jQuery Grid Plugin - jqGrid

Great job guys, again. An important feature I think is the posibility to group data on a column. So if the data is the same and groupOn:true in colModel it should not display the same data, just display it once in a cell and don't put the top/bottom borders for the others cells. Do you got any plans for this? or can you make some sugestions on how to accomplish that?

I'm trying to get one select menu to update a second select menu in the edit dialog. I haved tried using a JSON string, select HTML, etc... to no avail.

Here is the first one that dictates what the second should have:

{name:"action_codes_ata_id",label:"ATA",editable:true,editrules:{edithidden:true},edittype:"select",editoptions:{size:1,dataUrl:"/ipa/ajax/index/callback/getAta/return/html",dataEvents:[{type:"change",fn:function(e){$.ajax({type:"GET",async:false,url:"/ipa/ajax/index/callback/getAtaSubatas/return/html/jqgrid/true/ata_id/"+this.value,success:function(msg){jQuery("#dynagrid").setColProp("action_codes_subata_id",{editoptions:{value:msg}})}})}}]},stype:"select",searchoptions:{dataUrl:"/ipa/ajax/index/callback/getAta/return/html",sopt:["eq"]}},

Here is my second select menu in the form edit dialog:

{name:"action_codes_subata_id",label:"Sub-ATA",editable:true,editrules:{edithidden:true},edittype:"select",stype:"select",searchoptions:{dataUrl:"/ipa/ajax/index/callback/getSubata/return/html",sopt:["eq"]}}

My main problem is getting it to update the second select menu right away. If I close the edit dialog modal and click the record to edit agatin after selecting a value in the first drop-down, the second drop-down contains the right values, but I have to close the form edit dialog in order to 'refresh' that dialog. Thoughts?

@Tony:

Thanks for your response. I ended up just using jQuery with an AJAX call in the dataEvent to handle it for me. Due to the massive amount of possibilities in the second list, I do not want to intitially load it with all available options as I chose to load 0 at initialization and require a user to filter the list based on the first select menu's selectedIndex.

-Jason

hi,

first of all, great work!!!

im using jqgrid inside a modal window (jqmodal), which works fine in ie6+7(except some css issues)  & firefox.

but internet explorer 8 keeps on throwing errors.

Webpage error details:

Message: 'ts.rows.0.cells' is null or not an object
Line: 10
Char: 16964
Code: 0
URI: .../jquery.jqGrid.min.js

i updated the grid to 3.6 but it didn't help.

anyone got an idea ?

regards, simon

the code for the grid implementation:

jQuery(document).ready(
        function(){
            jQuery(”#list”).jqGrid({
                url:'/json?command=customer',
                datatype: 'json',
                height: 220,
                width: 600,
                mtype: 'GET',
                colNames:['id','name'],
                colModel :[
                    {name:'id', index:'id', width:120},
                    {name:'name', index:'name', width:450}
                ],
                pager: jQuery('#pager'),
                rowNum:10,
                rowList:[10,20,30],
                sortname: 'name',
                sortorder: 'desc',
                viewrecords: true,
                caption: 'Customers',
                multiselect: true
              }).navGrid('#pager',{add:false,del:false,edit:false,position:”none”});

call of the modal window:

<a href=”#” class=”jqModal”><img id=”search_img” alt=”select”  src=”/images/add.png” /></a>

<div class=”jqmWindow” id=”dialog”>
            <a href=”#” class=”jqmClose” style=”float:right;”><img src=”/images/exit_small.png”
            <p>
                <label>Name:</label>
                <input type=”text” id=”suggest4″ onchange=”gridReload()” />
                <img src=”/images/filter_small.jpg” onclick=”gridReload()” id=”submitButton” value=”Filter” />
                 <img src=”/images/add.jpg” id=”addtoResults” value=”Add”/>
                <br />
             </p>

<!–  if i comment out the following two lines, the content above is shown. otherwise the window is empty and the error appears–>

                <table id=”list” class=”scroll” cellpadding=”0″ cellspacing=”0″ />
                <div id=”pager” class=”scroll” style=”text-align:center;”></div>
           
</div>

Server response:

{"page":1,
"total":2758,
"records":27576,
"rows":[{"id":"1","cell":["1111","customer1"]},
{"id":"2","cell":["222","customer2"]},
{"id":"3","cell":["333","customer3"]},
{"id":"4","cell":["444","customer4"]},
{"id":"5","cell":["555","customer5"]},
{"id":"6","cell":["666","customer6"]},
{"id":"7","cell":["777","customer7"]},
{"id":"8","cell":["888","customer8"]},
{"id":"9","cell":["999","customer9"]},
{"id":"10","cell":["101010","customer10"]}]}