Populate jqGrid dropdown using beforeShowForm Event

Question

I'm trying to dynamically populate a dropdown when a user is trying to add a new record in a detail jqGrid. Here's what I have so far. It's pulling in the data fine but it just won't set the value to the dropdown. Any help would be greatly appreciated.

beforeShowForm: function(formid) {
       var sr = $("#list").jqGrid('selrow');
       if (sr) {
           // get data from master
           var UserID = $("#list").getGridParam('selrow');
           var roles = $.ajax({ type: "POST",
               url: '<%= ResolveUrl("~/Admin/GetRoles/") %>' + UserID,
               dataType: "json",
               async: false,
               success: function(data) {

               }
           }).responseText;

           // set the field in detail with the value of mnaster
           $("#UserID", formid).val(UserID);
  // try and populate dropdown
           $('#detail').setColProp('Description', { editoptions: { value: roles} });
       } else {
           // close the add dialog
           alert("no row is selected");
       }

   }

score 2 · Accepted Answer · edited May 23 '17 at 11:58

2

In your first question I explained you how to use dataUrl to generate the contain of the dropdown list dynamically. If you use form editing to modify the grid data you can use beforeInitData instead of beforeShowForm to modify the dataUrl to '<%= ResolveUrl("~/Admin/GetRoles/") %>' + $("#list").jqGrid('selrow') before the form will be filled. In the way you can simplify your code, make the ajax request asynchronous and the question with setting the values to the dropdown control will be solved automatically.

edited May 23 '17 at 11:58

Community

1
1

answered Dec 15 '10 at 16:11

Oleg

220,925
34
403
798

Thank you Oleg. I will review this again. – dolphy Dec 15 '10 at 16:45
Oleg -- the beforeInitData worked! Thank you so much for your help!! – dolphy Dec 15 '10 at 17:07
Oleg, I'm having performance issues in Internet Explorer 8 when the drop down contains > 300 items. Any suggestions on this? – dolphy Dec 17 '10 at 16:36
@dolphy: If you could post the full working example (including the corresponding JSON data just a text file) which reproduce the problem I could try to help you. I suppose that for the user the choice from so many items in the dropdown list could be also difficult. The usage of jQuery UI *autocomplete* widget (see http://jqueryui.com/demos/autocomplete/) could improve user experience. – Oleg Dec 17 '10 at 17:43
Ok...so, instead of using a dropdown, I can bind a jQuery UI autocomplete to the text field in the jqGrid form edit? I will try this out. Good advice. – dolphy Dec 17 '10 at 18:57
Ok. I got the AutoComplete working in the edit form. Thanks so much for your advice Oleg. Your contributions to this are greatly appreciated! – dolphy Dec 17 '10 at 19:41
@Oleg have you bind this dropdown with name/value pair? What should be the column names in order to bind dropdown with name/value pair? – sohaiby May 03 '15 at 13:40
@sohaiby: Sorry, but I don't understand your question. Which scenario you mean? Do you have *local* object which you want to use as the source of information about the dropdown or you load the data from `dataUrl`? What kind of binding you mean? Do you mean event binding or just the usage of the data as the source of information (data binding in common understanding of it)? Which editing mode you use? `beforeShowForm` callback can be used in form editing only, but `dataInit` is more common. Which version of jqGrid/free jqGrid/Guriddo jqGrid JS you use? free jqGrid has `buildSelect` callback. – Oleg May 03 '15 at 15:42

Populate jqGrid dropdown using beforeShowForm Event

1 Answers1