jQuery Grid Plugin - jqGrid

hey tony, I just spent the day re-reading the docs and I still think it's a bug.

what's weird is if I change the costcenter column from 'Cost Center' to 'CostCenter' the event that is supposed to fire when the 'Project' column is changed doesn't even fire.  And after closing the 'Add' dialog the Task column isn't populated with the value from the drop down select in the Add dialog.  It stays blank!

I simplified the xml model and little bit (got rid of the id column, and I'm using the RecordNum as the id so re reading the docs all day helped there.  Please take another look.

I'm convinced the issue is when the the events fire to change dynamically the select columns.  I think the id that is being generated cells is wrong.

here is the xml from the server (xml response from a .NET c# mvc app):

<LaborRecords>
                    <Request>true</Request>   
                    <Items>
                        <page>1</page>
                        <total>17</total>
                        <records>20</records>   
                        <Item>
                            <RecordNum>1234</RecordNum>
                            <Project></Project>
                            <CostCenter>arg</CostCenter>
                            <Task>dostuff</Task>
                            <Units>0.0</Units>
                            <Rate></Rate>
                        </Item>
                    </Items>
                    </LaborRecords>

and the grid definition:

<script type="text/javascript">
        jQuery(document).ready(
            function() {
                var lastsel; //for storing the last edited row
                jQuery('#list').jqGrid({
                    url: '/WorkItemNew/GridData',
                    datatype: "xml",
                    colNames: ['Project', 'Cost Center', 'Task', 'Unit(s)', 'Rate' ],
                    colModel: [
                      { name: 'Project', index: 'Project', width: 200, editable: true, edittype: "select", align: 'right', editoptions: { size: 1, dataUrl: '/WorkItemNew/GridDataGetProjects',
                          dataEvents: [{ type: 'change', fn: function(e) {
                              $("#CostCenter").parent().load('/WorkItemNew/GridDataGetCostCatagories?job=' + e.target.value);
                          } }]
                          }
                      },
                      { name: 'Cost Center', index: 'CostCenter', width: 200, xmlmap:'CostCenter', editable: true, edittype: "select", align: 'right', editoptions: { size: 1, dataUrl: '/WorkItemNew/GridDataGetCostCatagories',
                          dataEvents: [{ type: 'change', fn: function(e) {
                              var tempVal = e.target.value.replace(/^\\s\\s*/, '').replace(/\\s\\s*$/, '');
                              //we could prevent a server call here by checking to see if tempVal == ""
                              $("#Task").parent().load('/WorkItemNew/GridDataGetTasks?costCenter=' + e.target.value);
                          } }]
                          }
                      },
                      { name: 'Task', index: 'Task', width: 200, xmlmap: 'Task', editable: true, edittype: "select", align: 'right', editoptions: { size: 1, dataUrl: '/WorkItemNew/GridDataGetTasks'} },
                      { name: 'Units', index: 'units', width: 150, editable: true, xmlmap: 'Units', align: 'right', sorttype: "float" },
                      { name: 'Rate', index: 'rates', width: 150, editable: true, xmlmap: 'Rate', edittype: "select", align: 'right', editoptions: { size: 1, dataUrl: '/WorkItemNew/GridDataGetRates'} },
                    ],
                    rownumbers: true,
                    pager: jQuery('#pager'),
                    sortname: 'Id',
                    viewrecords: true,
                    sortorder: "desc",
                    xmlReader: {
                        root: 'Items',
                        row: 'Item',
                        repeatitems: false,
                        id: 'RecordNum'
                    },
                    height: 300,
                    editurl: '/WorkItemNew/GridDataEdit',
                    caption: 'New Work Item View',
                }).navGrid("#list", { edit: false, add: true, del: false });

            });
            $("#AddLabor").click(function() {
                workDate = document.getElementById('WorkDate'); //can't figure out how to use ajax to get this... $("WorkDate).value should work...
                if (workDate.value == "") {
                    alert("You need to specify a work date");
                    return;
                }
                jQuery("#list").editGridRow("new", { processData: "Processing...", bSubmit: "Save", bCancel: "Exit", height: 280, url: "/WorkItemNew/GridDataEdit?WorkDate=" + workDate.value, reloadAfterSubmit: false }); ;          
            });
    </script>

Hey Tony, I figured out what was wrong.

The ajax call of $("#Task").parent().load  is actually recreating the element from scratch but only with the information that was being passed back from the server.  So all the tag names etc. were wrong in the generated html.

I changed the code to this:

var randomnumber=Math.floor(Math.random()*100000); //generate a random number to pass with the load request...otherwisse IE caches the request...
$("#tr_CostCenter").load('/WorkItemNew/GridDataGetCostCatagories?job=' + e.target.value + "&random=" + randomnumber );

and returned this back from the server so that element would get built correctly with all the correct class and tag names:

<TD class='CaptionTD ui-widget-content'>CostCenter</TD>
<TD style='WHITE-SPACE: pre' class='DataTD ui-widget-content'>&nbsp<SELECT id=CostCenter class=FormElement size=1 name=CostCenter  >
<option selected='selected' value='none' ></option>
<option value='4'>value1</option>
<option value='5'>value2</option>
<option value='6'>value3</option>
<option value='7'>value4</option>
<option value='8'>value5</option>
<option value='9'>value6</option></select></td>

It would be nice not to have to jump through all these hoops to get dynamic data being loaded from the server.

If you have 3 select boxes where the choice of  the first one effects the values in the second which effect the values in the 3rd I wish you had a tag in the column model that would allow dynamically reloading the values of that cell from the server.

I had tried to get the data evnts working correctly before Tony, but the last line of the documention suggested to me that once the element has been loaded, it won't bother making a subsquent request to the server : "The event(s) are called only once when the element is created".  i.e.  if it won't reload the select drop down once it's loaded the first time.  So while I can probably delay loading data, once the data is loaded then i can't reload the select control.

So say I only have 2 select controls, called select1 and select2.  When I change the value of select1 I want the values of select2 to change dynamically by requesting the data from the server.  I don't want the values hard coded in the jqGrid colmodel config.  So everytime select1 changes I want it to request an updated select2 control from the SERVER.

This was all the documentation that I had found on dataevents on the wiki.  like you pointed out, I'm sure it's dead easy, easy as pie even, and no doubt this is a stupid question, but from the docs that are provided I was unable to move forward.  The only solution I could come up with was to reload the element that select2 is a child of each time the first select control changed.  Here is all the documentation that I was able to find:

http://www.trirand.com/jqgridw.....dataevents

{ dataEvents: [
{ type: 'click', data: { i: 7 }, fn: function(e) { console.log(e.data.i); } },
{ type: 'keypress', fn: function(e) { console.log('keypress'); } }
]
}
The event(s) are called only once when the element is created

hi tony, thanks for answering.

Getting the initial onchange event to fire is not the problem that I am having.  Your comment of:

// update the other select

is the key.  The short statement of "update the other select" is where I've been having all my problems.  How do I get the other select to reload. 

In my first post I said I was doing this:

$("#Task").parent().load('/WorkItemNew/GridDataGetTasks?costCenter=' + e.target.value); 

So if we go back to using select1 and select2 as our select controls:

dataEvents: [

{ type: 'change', fn: function(e) {
                              $("#select2").parent().load('/pathToServer/getNewValues?select1=' + e.target.value);
                          }

 }

]

So I am passing the value of select1 to the server and hoping that this will reload the select2 with the select2 values returned from the server.  But like I said, all the tags in the DOM get messed up so the pop up add/edit dialog and the jqGrid stop communicating.

The only way I could seem to get it to work (and still there are some issues) is to switch it to this:

$(”#tr_select1”).load('/pathToServer/getNewValues?select1=' + e.target.value); //this reloads the entire table row...not just the select

and returned this back from the server so that element would get built correctly with all the correct class and tag names:

<TD class='CaptionTD ui-widget-content'>Select1</TD>
<TD style='WHITE-SPACE: pre' class='DataTD ui-widget-content'>&nbsp<SELECT id=Select1 class=FormElement size=1 name=select1 >
<option selected='selected' value='none' ></option>
<option value='4'>value1</option>
<option value='5'>value2</option>
<option value='6'>value3</option>
<option value='7'>value4</option>
<option value='8'>value5</option>
<option value='9'>value6</option></select></td>

Like I said it seems silly to have to rebuild the whole table row in the edit/add dialog.

Maybe it's simply not possible to do this?? 

When select1 changes I just want to fetch new values for select2 that are dependent on the value that chosen by the user for select1.

So in suedo code something like:

select1:  dataEvents: [

{ type: 'change', fn: function(e) {
                              $("#select2").getNewValuesForSelect('/pathToServer/getNewValues?select1=' + e.target.value);
                          }

 }

]

select2:  dataEvents: [

{ type: 'change', fn: function(e) {
                              $("#select3").getNewValuesForSelect('/pathToServer/getNew?select2=' + e.target.value);
                          }

 }

]

ok....I've finally come up with a work able solution to end this saga.

if you search the web, the issue of trying to use jqGrid with multiple selects that dynmically load based on the values of a chained series of select elements is pretty common.  And while some people claim to have this working I haven't actually seen a working example (i'm sure there are lots).

for example someone had this post with a similar issue:
http://geekswithblogs.net/rens.....ions.aspx#

Anyway, using the information found on these two sites (thanks!!):

http://www.xml.com/pub/a/2007/.....d-xml.html

http://www.ajaxprojects.com/aj.....itemid=688

I came up with a solution that works for me.  I'm posting the result in case any one has a similar need or has a better idea:

from the server I return this:

'<select>
<option value='1'>number1</option>
<option value='2'>number2</option>
</select>'

encoded as 'text/xml' from my .NET c# asp.net mvc application.

the column model has to look something like this:
colModel: [
{ name: 'Project', index: 'Project', width: 200, editable: true, edittype: "select", align: 'right', editoptions: { size: 1, dataUrl: '/GridDataGetProjects',
    dataEvents: [{ type: 'change', fn: function(e) {
        var randomnumber=Math.floor(Math.random() * 100000); //generate a random number to pass with the load request...otherwisse IE caches the request...
        costCenterSelect = document.getElementById('CostCenter'); //probably should use ajax...anyway, this gets the select element
        costCenterSelect.options.length = 0; //reset the length of the select options.
        //ok let's hit the server with a post request to grab new values for the select
        $.post(      
        '/GridDataGetCostCategories?job=' + e.target.value + "&random=" + randomnumber,{},
        function( data, textStatus){
        //parse the returned xml...which is just a html select....
        $(data).find('option').each(function(){
            var id_value = $(this).attr('value');
            var catagory = $(this).text();
            costCenterSelect = document.getElementById('CostCenter');
            costCenterSelect.options[costCenterSelect.options.length] = new Option( catagory, id_value, false, false ); ;
        });                
        }, "xml" );
        } }]
    }
},
etc...

hope this helps...