jqGrid中的Dependent ComboBox

Question

I am using jqGrid and PHP.

I have two combo Boxes in my jqGrid. I want to change the second combo Box Value when I select a value from the first one while I am adding a new row or Editing a previous one using Form in my jqGrid.

Is it possible in jqGrid. Please help me with a working example.

Answer 1

I am assuming that your both combo boxes uses database for their data.

In the first combobox's editoptions please use the following code:

editoptions: {
   value: "1:One;2:Two",
   dataEvents: [{
       type: "change",
       fn: function(e) {
          $("#your_grid").setColProp("second_combo", { 
              editoptions: { value: "-1:--Select One--"} 
          });
          var v = parseInt($(e.target).val(), 10);
          $.ajax({
             url: "path/to/your/controller/"+v,
             dataType: "html",
             success: function(data) {
                if ($(e.target).is(".FormElement")) {
                var form = $(e.target).closest("form.FormGrid");                                                       
                $("select#second_combo.FormElement", form[0]).html(data);
                }
                else {
                   // inline editing
                   var row = $(e.target).closest("tr.jqgrow");
                   var rowId = row.attr("id");
                   $("select#" + rowId + "_second_combo", row[0]).html(data);
                }
             }
       });
     }
  }] 
}   

Now in your Add and Edit Options of your Grid use the following:

recreateForm:true   

Your controller should return data in the following syntax:

  <option value="val">Display</option>

As much as you need.

Hope it will be helpful for you.