jqGrid Dynamically loading select options

July 2, 2009 · 1 min read

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() {
$(yourgrid).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.

The format of the country object is a JSON object and looks like this:

{"Countries":{"Content":"230:UNITED STATES;40:CANADA;7:AFGHANISTAN;

New on Geeks with Blogs

  • We Won The One Award I Actually Care About

    Full Scale made the Inc. 5000 for the fifth year straight, the 12th listing across my three companies. Here is why the one award you cannot buy is worth stopping for.

  • Your Customers Build the Features Now

    I let a tool I liked sit dead for a year rather than build the features I wanted. An MCP server meant I never had to, and your customers can do the same to your product.

  • Get the Size of a Directory in Linux the Easy Way

    du -sh for the quick answer, ncdu for the cleanup, df for the disk itself: every command for checking directory size in Linux, plus why du and df never agree.

  • Vim Search and Replace: The Ultimate Guide

    One :%s command replaces every match in a file before a find dialog would even open. The Vim substitute patterns worth the muscle memory: flags, ranges, capture groups, and multi-file edits.