Question

I have an ASP.NET website with a C# back-end that uses Jqgrid.

I want users to be able to select an item in the grid to edit. One of the fields that can be edited will be presented to users as a drop-down selection list with only valid options for that user.

For example, let’s say I have a grid displaying persons. If “person1” is edited, the user may be able to choose “blue” or “red” from the selection list for this item, but if “person2” is edited the user may only choose “yellow” or “green” from the selection list.

I want to dynamically populate the selection list based on what person/row is selected.

I have editoptions and dataurl set on the specific field as follows:

editoptions: { dataUrl: 'FetchData.aspx' }

Yet, I somehow need some kind of parameter to pass to the FetchData.aspx page so that it can do its background-checking on the specific person and create the correct list for the specific “person”.

I was hoping I could pass the rowid or itemname or something as follows to identify the specific row/item that is selected:

editoptions: { dataUrl: 'FetchData.aspx?selecteditem=' + Id }

How can I pass a parameter so that I can create the correct list of items for the specific item? There are countless similar questions on the web, but I haven’t been able to find a conclusive answer…

Answer 1

I have solved the problem by adding the following onSelectRow function (note that ‘Id’ in the below code represents the name of a column I want to pass as parameter. It can be any column name in your grid) :

onSelectRow: function (id) {
  var temp = $("#list").getRowData(id)['Id']
  $("#list").setColProp('mySelectListColumnName', { editoptions: { dataUrl:'FetchData.aspx?selecteditem=' + temp });
}

The above helps to pass the parameter. However, this alone is not sufficient – it allows FetchData.aspx to receive a parameter and customize the html response accordingly, but it only fetches the values once from the dataUrl – so it doesn’t refresh when I select different rows.

To solve this, I have also added the following statement:

jQuery.extend(jQuery.jgrid.edit, { recreateForm: true });

This ensures that the edit form will be recreated every time that edit is clicked, which is what I want since the edit form will be slightly different for each row. Works perfectly. Hope this helps someone out there – there is a maze of options out there and this is the simplest I’ve seen. And it works.