jQuery Grid Plugin - jqGrid - Topic: editable column is not posted as arg to the server

JQGRID_Fan on editable column is not posted as arg to the server

Tue, 06 Oct 2009 16:22:34 +0300

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...

tony on editable column is not posted as arg to the server

Mon, 05 Oct 2009 02:57:03 +0300

Hello,

All depends on what are the values from server!!!!

if you use ("#select2").load(.....) - you should return NOT <select><option>.....</option</select>

BUT

You know what I mean

Load replace the content of the element and not the element.

Regards

Tony

JQGRID_FAN on editable column is not posted as arg to the server

Sun, 04 Oct 2009 16:24:47 +0300

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);
}

}

]

tony on editable column is not posted as arg to the server

Fri, 02 Oct 2009 09:22:21 +0300

Hello,

Sorry the last expression is not plavced in the appropriate place in the docs. Also corrected.

Thanks.

Whe you bind dataEvents they exists until the element is not destroyed or you unbind it.

So I think you code should be something similar for the select

dataEvents : [

{type:'change', data:{your data here if you want it},fn:function(e) {

// here your code to get the selected value from the select and pass a ajax to server so that you

// update the other select

}

]

Regards

Tony

JQGRID_Fan on editable column is not posted as arg to the server

Wed, 30 Sep 2009 11:50:31 +0300

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

tony on editable column is not posted as arg to the server

Tue, 29 Sep 2009 10:50:07 +0300

Hello,

You can use dataEvents for this purpose (see docs). It is very easy.

Regards

Tony

JQGrid_FAN on editable column is not posted as arg to the server

Sun, 27 Sep 2009 12:27:25 +0300

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.

JQGRID_FAN on editable column is not posted as arg to the server

Fri, 25 Sep 2009 17:54:06 +0300

also, not sure if it was clear from the above post but I did remove space in 'Cost Center'. It made it worse....I realize the docs say don't use spaces, but it for some reason the ColName was different then the 'name' in the column model it broke the binding.

Anyway, kinda jammed here. I appreciate any help you can provide. Even if it turns out I'm missing something obvious (which I'm sure I am).

JQGRID_FAN on editable column is not posted as arg to the server

Fri, 25 Sep 2009 17:48:47 +0300

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:

            });
            $("#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>

tony on editable column is not posted as arg to the server

Fri, 25 Sep 2009 02:58:51 +0300

Hello,

Please do not use spaces in the names, since the on the base of the name we duild the name and the id. See docs.

Also instead of name: 'Record Number' use name: 'Record_Number' or something else, that will be valid id.

Regards

Tony

JQGRID_Fan on editable column is not posted as arg to the server

Wed, 23 Sep 2009 17:05:00 +0300

Hey Tony, I had posted an issue about hidden columns not being posted to the server but now it seems that an editable column is also not being posted to the server.

In the following defintion of the grid the 'Task' is never being sent. Is this because it's dynamically changing via the parent.load calls? All columns except Record Number and Task get sent correctly to the server when adding a new record.

});