Reputation:

datepicker not working for jqgrid

I am not able to add DatePicker to the jqGrid,

Following is my code.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My Date time example</title>
<script src="js/jquery-1.7.2.min.js"  type="text/javascript"></script>
<link href="js/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.datepicker.css" />
<link href="css/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="js/grid.locale-en.js"  type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<link href="css/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ui.datepicker.css"/>
</head>
<script>

var lastsel3;
function FillGridOnEvent()
{
jQuery("#rowed6").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Last Sales','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'sdate',index:'sdate',width:90, editable:true, sorttype:"date",editoptions:{        dataInit: function(el) { setTimeout(function() { $(el).datepicker(); }, 200); }}},
{name:'name',index:'name', width:150,editable: true,editoptions{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions:
{value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:    
{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea",   
editoptions:{rows:"2",cols:"10"}},
],
onSelectRow: function(id){
    if(id && id!==lastsel3){
        jQuery('#rowed6').jqGrid('restoreRow',lastsel3);
        jQuery('#rowed6').jqGrid('editRow',id,true,pickdates);
        lastsel3=id;
    }
},
editurl: "/MyServletNameHere",
caption: "Date Picker Integration"
});
var mydata3 = [
        {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
        {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
        {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},                                                 
        {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"},
        {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},
        {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
        {id:"76543",name:"MobileTelephone", note:"note", stock:"Yes", ship:"ARAMEX", sdate:"2007-12-03"},
        {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
        {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"}
        ];
for(var i=0;i < mydata3.length;i++)
jQuery("#rowed6").jqGrid('addRowData',mydata3[i].id,mydata3[i]);
}
function pickdates(id){
    jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"});
}
</script>
<body>
<body onload="FillGridOnEvent();">
    <table id="rowed6"></table>
</body>
</html>

when above code executes, it shows the output, but it does not show the datepicker in the sdate column. Please let me khow if I am wrong somewhere in the code!

I think i have done a silly mistake, but not able to find it!

Update Following is working example of datepicker using jqGrid,

Following is working Example of datepicker using jqGrid..

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My Date time example</title>
<script src="js/jquery-1.7.2.min.js"  type="text/javascript"></script>
<link href="js/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.datepicker.css" />
<link href="css/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="js/grid.locale-en.js"  type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<link href="css/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ui.datepicker.css"/>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
</head>
<script>

var lastsel3;
function FillGridOnEvent()
{
jQuery("#rowed6").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Last Sales','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'sdate',index:'sdate',width:90, editable:true, sorttype:"date",editoptions:{        dataInit: function(el) { setTimeout(function() { $(el).datepicker(); }, 200); }}},
{name:'name',index:'name', width:150,editable: true,editoptions{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions:
{value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:    
{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea",   
editoptions:{rows:"2",cols:"10"}},
],
onSelectRow: function(id){
    if(id && id!==lastsel3){
        jQuery('#rowed6').jqGrid('restoreRow',lastsel3);
        jQuery('#rowed6').jqGrid('editRow',id,true,pickdates);
        lastsel3=id;
    }
},
editurl: "/MyServletNameHere",
caption: "Date Picker Integration"
});
var mydata3 = [
        {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
        {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
        {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},                                                 
        {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"},
        {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},
        {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
        {id:"76543",name:"MobileTelephone", note:"note", stock:"Yes", ship:"ARAMEX", sdate:"2007-12-03"},
        {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
        {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"}
    ];
for(var i=0;i < mydata3.length;i++)
jQuery("#rowed6").jqGrid('addRowData',mydata3[i].id,mydata3[i]);
}
function pickdates(id){
    jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"});
}
</script>
<body>
<body onload="FillGridOnEvent();">
    <table id="rowed6"></table>
</body>
</html>

Upvotes: 1

Answers (3)

Oleg

Reputation: 221997

I would recommend you full rewrite your code. The most important problems:

you need use <!DOCTYPE html ...>. It's very important because HTML without <!DOCTYPE> statement switch on quirks mode which is not supported by jQuery UI and jqGrid.
you should use data: mydata3 instead of filling grid with addRowData in the loop
you need call datepicker once (currently you call datepicker in both dataInit and oneditfunc parameter of editRow - pickdates)
you need include every CSS and JavaScript file once. For example "js/jquery-ui-1.9.2.custom.css" should be enough. It should contain all CSS of jQuery UI (inclusive ui.datepicker.css). So you should remove lines with "css/ui.datepicker.css", "css/jquery-ui.css", css/jquery.ui.theme.css and "css/jquery.ui.datepicker.css"
you should use jQuery.ready instead of usage onload.
you should define all variables inside of some function (like inside of $(function () {/*here*/})). In the way you will have no global variables.
you should be careful with encoding of special characters (like <) in case of usage inline code in HTML page. Try to validate the page on http://validator.w3.org/ for example and you will find the errors which I mean.
I would strictly recommend you to use gridview: true to improve performance and use autoencode: true to be sure that jqGrid could display any text in the grid.

UPDATED: The demo shows an example how the code could be modified. Below if the full HTML code. I used non-minimized version of all JavaScript files for better debugging. The productive code should use minimized version of the corresponding files:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>http://stackoverflow.com/q/14318014/315935</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.2/css/ui.jqgrid.css" />
    <style type="text/css">
        html, body { font-size: 75%; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.src.js"></script>

    <script type="text/javascript">
    //<![CDATA[
        /*global $ */
        $(function () {
            "use strict";
            var mydata = [
                    {id: "12345", name: "Desktop Computer", note: "note",      stock: "Yes", ship: "FE", sdate: "2007-12-03"},
                    {id: "23456", name: "Laptop",           note: "Long text", stock: "Yes", ship: "IN", sdate: "2007-12-03"},
                    {id: "34567", name: "LCD Monitor",      note: "note3",     stock: "Yes", ship: "TN", sdate: "2007-12-03"},
                    {id: "45678", name: "Speakers",         note: "note",      stock: "No",  ship: "AR", sdate: "2007-12-03"},
                    {id: "56789", name: "Laser Printer",    note: "note2",     stock: "Yes", ship: "FE", sdate: "2007-12-03"},
                    {id: "67890", name: "Play Station",     note: "note3",     stock: "No",  ship: "FE", sdate: "2007-12-03"},
                    {id: "76543", name: "MobileTelephone",  note: "note",      stock: "Yes", ship: "AR", sdate: "2007-12-03"},
                    {id: "87654", name: "Server",           note: "note2",     stock: "Yes", ship: "TN", sdate: "2007-12-03"},
                    {id: "98765", name: "Matrix Printer",   note: "note3",     stock: "No",  ship: "FE", sdate: "2007-12-03"}
                ],
                $grid = $("#rowed6"),
                initDate = function (elem) {
                    $(elem).datepicker({
                        dateFormat: "yy-mm-dd",
                        //autoSize: true,
                        defaultDate: new Date(2007, 11, 3),
                        changeYear: true,
                        changeMonth: true,
                        showButtonPanel: true,
                        showWeek: true,
                        onSelect: function () {
                            var $grid, grid;
                            if (typeof (elem.id) === "string" && elem.id.substr(0, 3) === "gs_") {
                                $grid = $(elem).closest("div.ui-jqgrid-hdiv")
                                            .next("div.ui-jqgrid-bdiv")
                                            .find("table.ui-jqgrid-btable:first");
                                if ($grid.length > 0) {
                                    grid = $grid[0];
                                    if ($.isFunction(grid.triggerToolbar)) {
                                        grid.triggerToolbar();
                                    }
                                }
                            } else {
                                // to refresh the filter
                                $(elem).trigger("change");
                            }
                        }
                    });
                },
                dateTemplate = {align: "center", sorttype: "date", width: 94,
                    editrules: { date: true }, editoptions: { dataInit: initDate },
                    searchoptions: {
                        sopt: ["eq", "ne", "lt", "le", "gt", "ge"],
                        attr: { maxlength: 10, size: 11 }, // for searching toolbar
                        maxlength: 10, size: 11, // for searching dialog
                        dataInit: initDate
                    },
                    formatter: "date", formatoptions: { srcformat: "ISO8601Short", newformat: "Y-m-d" }},
                lastsel3;

            $grid.jqGrid({
                datatype: "local",
                data: mydata,
                colNames: ["Last Sales", "Name", "Stock", "Ship via", "Notes"],
                colModel: [
                    { name: "sdate", template: dateTemplate },
                    { name: "name", width: 115, editoptions: {maxlength: "30"} },
                    { name: "stock", width: 70, align: "center", editable: true, formatter: "checkbox",
                        edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
                        stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
                    { name: "ship", width: 105, align: "center", editable: true, formatter: "select",
                        edittype: "select", editoptions: { value: "FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX", defaultValue: "AR" },
                        stype: "select", searchoptions: { sopt: ["eq", "ne"],
                        value: ":Any;FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX" } },
                    { name: "note", width: 60, sortable: false, editable: true, edittype: "textarea" }
                ],
                cmTemplate: {editable: true},
                rowNum: 10,
                rowList: [5, 10, 100],
                pager: "#pager",
                gridview: true,
                rownumbers: true,
                autoencode: true,
                ignoreCase: false,
                viewrecords: true,
                sortname: "sdate",
                sortorder: "desc",
                height: "100%",
                onSelectRow: function (id) {
                    if (id && id !== lastsel3) {
                        $(this).jqGrid("restoreRow", lastsel3);
                        $(this).jqGrid("editRow", id, true);
                        lastsel3 = id;
                    }
                },
                editurl: "/MyServletNameHere",
                caption: "Date Picker Integration"
            });
            $.extend($.jgrid.search, {
                recreateFilter: true,
                multipleSearch: true,
                multipleGroup: true,
                closeOnEscape: true,
                closeAfterSearch: true,
                overlay: 0,
                searchOnEnter: true
            });

            $grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});
            $grid.jqGrid("filterToolbar", {defaultSearch: "cn", stringResult: true});
        });
    //]]>
    </script>
</head>
<body>
    <table id="rowed6"><tr><td></td></tr></table>
    <div id="pager"></div>
</body>
</html>

Upvotes: 5

Irvin Dominin

Reputation: 30993

I don't see any jquery-ui.js script included in your code. For example:

 <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

if you don't include that script you don't have jQuery-UI loaded and you can't use the datepicker widget.

Upvotes: 1

A. Wolff

Reputation: 74420

Maybe try this:

function pickdates(id){
    jQuery("#rowed6 .hasDatepicker").datepicker('destroy');
    jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"});
}

Or by autotriggering click() handler adding click() at end:

jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"}).click();

Upvotes: 0

datepicker not working for jqgrid

Answers (3)

Related Questions