jQuery Grid Plugin - jqGrid

tony said:

Hello,

What do you use. - inline edit, form edit, cell edit.

Howe do you attach a datepicker. If possible publish the code.

Regards

Tony

var lastsel2;
var lastsel3;

function picktime3(){
    jQuery("#"+id+"_amount3","#list3").timepickr({convention:12});
}
function pickdates2(id){
    jQuery("#"+id+"_post_date2","#list2").datepicker({dateFormat:"yy-mm-dd"});
}
function pickdates3(id){
    jQuery("#"+id+"_invdate3","#list3").datepicker({dateFormat:"yy-mm-dd"});
}

$(document).ready(function(){
    $("#list2").jqGrid({
            url:'index-controller2.php',
            datatype: "json",
            colNames:['SN','Title', 'Date', 'Type','Notes'],
            colModel:[
                    {name:'ID2', index:'ID', width:20, editable:false, sortable:true, editoptions:{readonly:true,size:10}},
                    {name:'post_title2', index:'post_title', width:90, sortable:true, editable:true, editoptions:{size:25}},
                    {name:'post_date2', index:'post_date', width:90, sortable:true, editable:true, editoptions:{size:25}},
                    {name:'post_type2', index:'post_type', width:80, sortable:true, editable: true, edittype:"select", editoptions:{value:"pg:Page;attach:attachment;rev:revision"}},
                    {name:'guid2', index:'guid', width:250, sortable:false, editable: true, edittype:"textarea", editoptions:{rows:"5",cols:"40"}}
            ],
            onSelectRow: function(id){
                if(id && id !== lastsel2){
                    $('#list2').restoreRow(lastsel2);
                    $('#list2').editRow(id,true,pickdates2);
                    lastsel2 = id;
                }
            },
            onclickSubmit: function(id){
                jQuery("#list2").editGridRow("new", {afterSubmit: function(xhr, postdata){return [true]}, url: 'edit2.php?p=1'});
            },
            rowNum:20,
            rowList:[20,40,60],
            imgpath: "jscripts/jqGrid/themes/modern/images",
            pager: $('#pagernav2'),
            sortname: 'ID',
        viewrecords: true,
        sortorder: "desc",
        caption:"My Post",
        editurl:"edit2.php",
        height:400,
        width:780
    }).navGrid('#pagernav2', {edit:false,del:false,search:false});
    jQuery("#saveme2").click( function() {
        //jQuery("#list2").saveRow(lastsel2, false, 'clientArray');
        jQuery("#list2").saveRow(lastsel2);
    });
    jQuery("#delme2").click( function() {
        jQuery("#list2").delGridRow(lastsel2, {afterSubmit: function(xhr, postdata){return [true]}, url: 'edit2.php?p=0'});
    });

   
    $("#list3").jqGrid({
            url:'index-controller3.php',
            datatype: "json",
            colNames:['ID','Date', 'Name', 'Amount','Notes'],
            colModel:[
                    {name:'id3', index:'id', width:20, editable:false, sortable:true, editoptions:{readonly:true, size:10}},
                    {name:'invdate3', index:'invdate', width:90, sortable:true, editable:true, editoptions:{size:25}},
                    {name:'name3', index:'name', width:90, sortable:true, editable:true, editoptions:{size:25}},
                    {name:'amount3', index:'amount', width:80, sortable:true, editable: true, editoptions:{size:25}},
                    {name:'note3', index:'note', width:250, sortable:false, editable: true, edittype:"textarea", editoptions:{rows:"5", cols:"40"}}
            ],
            onSelectRow: function(id){
                if(id && id !== lastsel3){
                    $('#list3').restoreRow(lastsel3);
                    $('#list3').editRow(id,true,pickdates3);
                    $('#list3').editRow(id,true,picktime3);
                    lastsel3 = id;
                }
            },
            onclickSubmit: function(id){
                jQuery("#list3").editGridRow("new", {afterSubmit: function(xhr, postdata){return [true]}, url: 'edit3.php?p=1'});
            },
            rowNum:5,
            rowList:[5,15,45],
            imgpath: "jscripts/jqGrid/themes/modern/images",
            pager: $('#pagernav3'),
            sortname: 'id',
        viewrecords: true,
        sortorder: "desc",
        caption:"My Post 3",
        editurl:"edit3.php",
        height:200,
        width:780
    }).navGrid('#pagernav3', {edit:false,del:false,search:false});
    jQuery("#saveme3").click( function() {
        //jQuery("#list3").saveRow(lastsel3, false, 'clientArray');
        jQuery("#list3").saveRow(lastsel3);
    });
    jQuery("#delme3").click( function() {
        jQuery("#list3").delGridRow(lastsel3, {afterSubmit: function(xhr, postdata){return [true]}, url: 'edit3.php?p=0'});
    });
});

The above is the code used, IE7 allows me to select on both grids, but FF will allow on the 1st grid, while the 2nd one will show after I have unfocus FF window and refocus back. Kinda wierd.

I apologise for my late reply as I was away to a foreign land with no internet for a few days.

I see. Now that I disabled the 2nd one and it works well.
Thank you.

However, there is a new related-issue now. IE 8.0 works properly, but FF 3.10 and Safari 3.1.2 doesn't. IE 7.0 & Opera 9.6.4 crashed on load.

I need to call different functions for 2 different cell? What I did was to set one cell to popup the jquery-datepicker, while another to popup the jquery-timepickr (In future, I may also want to yet another cell to pop up colorpicker too).

I have included my full script here, excluding the unnecessary html tag.

<link rel="stylesheet" type="text/css" media="screen" href="jscripts/jqGrid/themes/modern/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jscripts/jqGrid/themes/jqModal.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/excite-bike/ui.datepicker.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/timepickr/ui.core.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/timepickr/ui.timepickr.css" />

<script src="jscripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="jscripts/jquery.jqGrid.js" type="text/javascript"></script>
<script src="jscripts/jqGrid/js/jqModal.js" type="text/javascript"></script>
<script src="jscripts/jqGrid/js/jqDnR.js" type="text/javascript"></script>
<script src="jscripts/ui.datepicker.js" type="text/javascript"></script>
<script src="jscripts/jquery.utils.js" type="text/javascript"></script>
<script src="jscripts/jquery.strings.js" type="text/javascript"></script>
<script src="jscripts/jquery.anchorHandler.js" type="text/javascript"></script>
<script src="jscripts/jquery.ui.all.js" type="text/javascript"></script>
<script src="jscripts/ui.dropslide.js" type="text/javascript"></script>
<script src="jscripts/ui.timepickr.js" type="text/javascript"></script>

<script type="text/javascript">
    function pickdates2(id){
        jQuery("#"+id+"_post_date2","#list2").datepicker({dateFormat:"yy-mm-dd"});
    }
    function pickdatetime3(id){
        jQuery("#"+id+"_amount3","#list3").timepickr({convention:12});
        jQuery("#"+id+"_invdate3","#list3").datepicker({dateFormat:"yy-mm-dd"});
    }
    $(document).ready(function(){
        $("#list2").jqGrid({
                url:'index-controller2.php',
                datatype: "json",
                colNames:['SN','Title', 'Date', 'Type','Notes'],
                colModel:[
                        {name:'ID2', index:'ID', width:20, editable:false, sortable:true, editoptions:{readonly:true,size:10}},
                        {name:'post_title2', index:'post_title', width:90, sortable:true, editable:true, editoptions:{size:25}},
                        {name:'post_date2', index:'post_date', width:90, sortable:true, editable:true, editoptions:{size:25}},
                        {name:'post_type2', index:'post_type', width:80, sortable:true, editable: true, edittype:"select", editoptions:{value:"pg:Page;attach:attachment;rev:revision"}},
                        {name:'guid2', index:'guid', width:250, sortable:false, editable: true, edittype:"textarea", editoptions:{rows:"5",cols:"40"}}
                ],
                onSelectRow: function(id){
                    if(id && id !== lastsel2){
                        $('#list2').restoreRow(lastsel2);
                        $('#list2').editRow(id,true,pickdates2);
                        lastsel2 = id;
                    }
                },
                onclickSubmit: function(id){
                    jQuery("#list2").editGridRow("new", {afterSubmit: function(xhr, postdata){return [true]}, url: 'edit2.php?p=1'});
                },
                rowNum:20,
                rowList:[20,40,60],
                imgpath: "jscripts/jqGrid/themes/modern/images",
                pager: $('#pagernav2'),
                sortname: 'ID',
            viewrecords: true,
            sortorder: "desc",
            caption:"My Post",
            editurl:"edit2.php",
            height:400,
            width:780
        }).navGrid('#pagernav2', {edit:false,del:false,search:false});
        jQuery("#saveme2").click( function() {
            //jQuery("#list2").saveRow(lastsel2, false, 'clientArray');
            jQuery("#list2").saveRow(lastsel2);
        });
        jQuery("#delme2").click( function() {
            jQuery("#list2").delGridRow(lastsel2, {afterSubmit: function(xhr, postdata){return [true]}, url: 'edit2.php?p=0'});
        });

       
        $("#list3").jqGrid({
                url:'index-controller3.php',
                datatype: "json",
                colNames:['ID','Date', 'Name', 'Amount','Notes'],
                colModel:[
                        {name:'id3', index:'id', width:20, editable:false, sortable:true, editoptions:{readonly:true, size:10}},
                        {name:'invdate3', index:'invdate', width:90, sortable:true, editable:true, editoptions:{size:25}},
                        {name:'name3', index:'name', width:90, sortable:true, editable:true, editoptions:{size:25}},
                        {name:'amount3', index:'amount', width:80, sortable:true, editable: true, editoptions:{size:25}},
                        {name:'note3', index:'note', width:250, sortable:false, editable: true, edittype:"textarea", editoptions:{rows:"5", cols:"40"}}
                ],
                onSelectRow: function(id){
                    if(id && id !== lastsel3){
                        $('#list3').restoreRow(lastsel3);
                        $('#list3').editRow(id,true,pickdatetime3);
                        lastsel3 = id;
                    }
                },
                onclickSubmit: function(id){
                    jQuery("#list3").editGridRow("new", {afterSubmit: function(xhr, postdata){return [true]}, url: 'edit3.php?p=1'});
                },
                rowNum:5,
                rowList:[5,15,45],
                imgpath: "jscripts/jqGrid/themes/modern/images",
                pager: $('#pagernav3'),
                sortname: 'id',
            viewrecords: true,
            sortorder: "desc",
            caption:"My Post 3",
            editurl:"edit3.php",
            height:200,
            width:780
        }).navGrid('#pagernav3', {edit:false,del:false,search:false});
        jQuery("#saveme3").click( function() {
            jQuery("#list3").saveRow(lastsel3);
        });
        jQuery("#delme3").click( function() {
            jQuery("#list3").delGridRow(lastsel3, {afterSubmit: function(xhr, postdata){return [true]}, url: 'edit3.php?p=0'});
        });
    });
</script>
In my body, I have ~
    <table id="list3" class="scroll" cellpadding="0" cellspacing="0"></table>
    <div id="pagernav3" class="scroll" style="text-align:center;"></div>
    <input type="button" id="saveme3" value="Save Row" /> <input type="button" id="delme3" value="Delete Row" />

What happened was, IE 8.0 pop up the datepicker and timepickr of #list3 correctly, but FF will popup the datepicker only  after I have clicked timepickr field to had it popped up. This wierd issue also occurs in Safari 3.1.2. Strangely both IE 7.0 and Opera 9.6.4 crashed on load (I have to do CTRL+ALT+DEL to terminate the windows).

Dear tony

Is there no solution to the above problem?