<< How to stop a run-away SQL transaction | Home | Firebug Network Monitoring Quick Reference Guide >>

jqGrid Dynamically loading select options


Scenario: You are using the jqGrid to edit rows that contain fields that are of HTML tag type "SELECT".
Problem: You do not want to hard code the values of the select tag like in the jqGrid samples. For example:

editoption: { value: "FE:FedEx; IN:InTime; TN:TNT" }
Solution: For example to load a list of countries dynamically, define the variable before the definition of the jqGrid:

//get all countries
var countries = $.ajax({url: $('#ajaxAllCountriesUrl').val(), async: false, success: function(data, result) {if (!result) alert('Failure to retrieve the Countries.');}}).responseText;


Now define your jqGrid:

$(yourgrid).jqGrid({
...
colModel: [
{ name: 'Id', index: 'Id', width: 20, sortable: true, align: "center", editable: false, editoptions: { readonly: true, size: 0 }, search: true },

{ name: 'Country', index: 'Country', width: 80, sortable: true, editable: true, edittype: "select", editrules: { required: true }, editoptions: { size: 71} }
],
...
loadComplete: function() {
$(item).setColProp('Country', { editoptions: { value: countries} });
},
...
Important: The ajax call to retrieve the countries must be set to "async: false" otherwise you have a very good chance that the grid will be defined before the data is actually returned. Using the same logic you can reload the list based on some other event and trigger the reload of the grid if need be to reload the new list.

Print | posted @ Thursday, July 02, 2009 11:14 AM

Comments on this entry:

Gravatar # re: jqGrid Dynamically loading select options
by shiva at 7/15/2009 3:23 AM
if multiple drop downs is there fil like this with onchange event

$( '#'+id+'_clients' ).change( function(){
iCustomerID = $(this).val();
var objProjectsList = getProjectsList( iCustomerID );
var objProjectsDropDown = $(this).parent('td').next().find('select');
$( objProjectsDropDown ).empty();

$( objProjectsDropDown ).append( '<option value="0">--Select projects--</option>' );

for( strIndex in objProjectsList )
{
$(objProjectsDropDown).append( '<option value="' + objProjectsList[strIndex].ProjectId + '">' + objProjectsList[strIndex].ProjectName + '</option>' );
}


$(objProjectsDropDown).unbind('change');

// Fill the ActivitesDropDown with dynamic data
$(objProjectsDropDown).change(function(){
iProjectId = $(this).val();
var objActivitiesList = getActivitesList( iCustomerID, iProjectId );
var objActivitiesDropDown = $(this).parent('td').next().find('select');
$(objActivitiesDropDown).empty();
$( objActivitiesDropDown ).append( '<option value="0">--Select activites--</option>' );
for( strIndex in objActivitiesList )
{
$(objActivitiesDropDown).append( '<option value="' + objActivitiesList[strIndex].ActivityId + '">' + objActivitiesList[strIndex].ActivityName + '</option>' );
}
$(objActivitiesDropDown).unbind('change');

$(objActivitiesDropDown).change(function(){
iActivityId = $(this).val();
});
});
});
Gravatar # re: jqGrid Dynamically loading select options
by Renso at 7/15/2009 2:29 PM
Shiva I am not sure if I understand your question but it seems you have drop down dependencies and yes can you do it this way. There is a short way to load SELECT tags via ajax requests using the selectboxes plug-in: http://www.texotela.co.uk/code/jquery/select/:

objActivitiesDropDown.removeOption(/./).ajaxAddOption(getProjectsList( iCustomerID ), null, false).addOption({ '': '--Select activites--' });

This will clear the existing list as well as load the new dependent list as well with one line of code.

When you are using jqGrid and edit the records in form edit mode (meaning in the modal dialog box) then you would do it like you have specified above or using the example I have here, but you will need to specify the bind in the navGrid callback functions like so (only show the edit options here for brevity but you will need to do the same for add options also):

.navGrid(item + 'Pager',
{ refresh: true, edit: true, add: true, del: true, search: false }, //options
{height: 280, width: 500,
reloadAfterSubmit: true,
modal: true,
processData: 'Updating the Project...',
editCaption: 'Edit a Project',
beforeShowForm: function() {
objActivitiesDropDown.removeOption(/./).ajaxAddOption(getProjectsList( iCustomerID ), null, false).addOption({ '': '--Select activites--' });

}
}, // edit options

Please let me know if this answers your question. Also thank you for your sample of code here, without the selectboxes plug-in ths will come in very handy :-)




Gravatar # re: jqGrid Dynamically loading select options
by shiva at 7/16/2009 6:07 AM
hi, renso
I forgot to right the comments at last ,
my problem is u understood the scenario multiple dropdowns clients,projects,activites all are filling with denpedency with previous one.

I want the option is in selected mode when i try to edit the record in projects, activites dropdowns(the items existing in non editable mode)

thanks
renso,
Gravatar # re: jqGrid Dynamically loading select options
by Andrew Shansky at 9/23/2009 5:42 PM
Hey Thanks for posting this article.

I have one page where the dropdown options are listed and can be added to/removed/edited by the user. On another page I have a grid that uses two selects that pull their data from the other pages using the method you suggested. However my problem is that if I go to the parent page, and then go and add an option on the other pages, the parent grid does not up date when i go to edit or add a new record. Is there any way to force the grid to update it's data?

thanks
Andrew
Gravatar # re: jqGrid Dynamically loading select options
by Renso at 9/24/2009 7:27 AM
To refresh a grid without destroying it an redefining it is to trigger the built-in grid refresh when the drop down changes. I am assuming when you say "parent page" you mean the same web-page but in a different part of the web-page. Here is an example:

$(objActivitiesDropDown).change(function(){
$('#myGrid').trigger('reloadGrid');
});

Gravatar # re: jqGrid Dynamically loading select options
by pandu ranga rao at 10/20/2009 8:05 AM
hi i solved the above problem here is the code to load the jqgrid dynamically for onchange event

$("#prod_code").change(function(){
var p_c=document.getElementById("prod_code").value;
$('#list2').setGridParam({url:"gdata.php?q=1&prod_code="+p_c,page:1});
$('#list2').trigger('reloadGrid');
});

Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification: