0

We are trying to create an sj:datepicker Calendar Control in an Editable sj:grid. The available edit types are only few (text, textarea, select).

We have seen examples in the jqGrid on how to bring a Datepicker within the grid rows, but couldn't find any similar option/implementation with the sjg:grid (Struts2-jQuery framework).

Has anyone implemented it ?

Here is all the links & documentation we could find for jQGrid:

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config jqgrid Save Cell Edit When DatePicker Is Closed Jquery UI DatePicker In a JQGrid

implement jqgrid cell edit datepicker

jqgrid Save Cell Edit When DatePicker Is Closed http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3acommon_rules

jqgrid - use datepicker with dynamic colModel

How do I add datepicker in the add row dialog in jqGrid?

jqgrid Save Cell Edit When DatePicker Is Closed

Community
  • 1
  • 1
yathirigan
  • 5,619
  • 22
  • 66
  • 104

2 Answers2

0

As of now, i am not seeing a way to get the jquery.ui.datepicker.js file included automatically via the sj:head tag.

Step 1: Manually download & include the jquery.ui.datepicker.js file in your JSP
Step 2: Add this jScript function to your JSP page 

<script>
    datePick=function(element) { 
    $(element).datepicker(
            {
                dateFormat: 'dd-M-yy',
                buttonImage: "calendar.gif",
                buttonImageOnly: true
            }
            );
    };
</script>

Step 3: Add the Grid Column for date. The editoptions is used to bring the calendar 

<sjg:gridColumn name="dateOfBirth" index="dateOfBirth" title="Date of Birth"
    formatter="String" editable="true" editoptions="{size: 12, maxlength: 10, dataInit:datePick,attr:{title:'Select the date'} }"  ></sjg:gridColumn>

Unanswered Question:
Is there a way to automatically include the jquery.ui.datepicker.js file using the struts2-jquery tags ? The <sj:head jqueryui="true" ></sj:head> is only including the following files.

 <script type="text/javascript" src="/grid/struts/js/base/jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="/grid/struts/js/base/jquery.ui.core.min.js?s2j=3.3.3"></script>
  <script type="text/javascript" src="/grid/struts/js/plugins/jquery.subscribe.min.js"></script>
  <script type="text/javascript" src="/grid/struts/js/struts2/jquery.struts2-3.3.3.min.js"></script>

eventhough the jqueryui has been set to true, i couldn't see the datepicker js file included automatically.

yathirigan
  • 5,619
  • 22
  • 66
  • 104
0

You can use the instruction

<sj:head ... loadAtOnce="true"/>
Dani
  • 2,602
  • 2
  • 23
  • 27