[Solved] Cascading Dropdowns in Grid Edit - ForeignKey columns

[Jason]

I have a grid where the first 2 columns are bound with ForeignKey.  The value of the first dropdown dictates the value of the second.  How can I reload the values of the second dropdown after the first dropdown value changes?

    @(Html.Telerik().Grid<ExpenseGridModel>()
    .DataBinding(dataBinding => dataBinding.Ajax()
        .Select("ExpenseAjaxBinding", "ExpenseEntry")
        .Update("ExpenseUpdate", "ExpenseEntry")
    )
    .Name("ExpensesGrid")
    .DataKeys(keys => keys.Add(r => r.id))
    .Columns(columns =>
        {
            columns.ForeignKey(o => o.categoryId, Model.expenseCategories, "Id", "Name");
            columns.ForeignKey(o => o.categoryId, Model.expenseTypes, "Id", "Name"); 
            columns.Bound(r => r.date);
            columns.Bound(r => r.description);
            columns.Bound(r => r.amount);
            columns.Command(commands =>
                commands.Edit()
            );
        })
 )

[Samantha]

anyone? I badly need the solution for this

[Jason]

Here is what I did to accomplish this.

Add the OnEdit client side event to the grid:

.ClientEvents(c => c

.OnEdit("OnEditing")


Add the following Javascript to the page:

function onEditing(e) {
  //get the first combobox in the edit form
  var categoryCombobox = $(e.form).find('#categoryId');
  //get the second combobox in the edit form
  var typeCombobox = $(e.form).find('#typeId');
  //get the selected value of the first combobox
  var categoryValue = categoryCombobox.data("tDropDownList").value();
  //get the selected value of the second combobox
  var originalTypeValue = typeCombobox.data("tDropDownList").value(); 
  //set the value change event for the first combobox.  this calls the categoryChanged method 
  //and passes the value of the first combobox when the event is triggered.

  categoryCombobox.bind("valueChange", function (e) { categoryChanged(e.value); });
  //calls the categoryChanged method. this is needed so the comboboxes in the edit form properly load when
  //it first opens.
  categoryChanged(categoryValue, originalTypeValue);
}

function categoryChanged(categoryId, originalTypeValue) {
   //gets the second combobox
   var typeCombobox = $("#typeId").data("tDropDownList");  
   //calls the GetComboboxTypes action in the ExpenseEntry controller.

   var url = '@Url.Action("GetComboboxTypes", "ExpenseEntry")';

    $.get(url, { categoryId: categoryId }, function (data) {
       //bind the combobox with the new data
       typeCombobox.dataBind(data);  
       //sets the selected value of the second combobox if it was passed, otherwise set the first item.

       if (originalTypeValue == undefined)
          typeCombobox.select(0);
       else
           typeCombobox.value(originalTypeValue);

        });
}

Let me know if you have any questions.

[Samantha]

Can you post a running example? i cant make this thing to run on my project

Thanks

[Samantha]

Hi Jason

Can you post the code on how you load or send back the data to the dropdown???
 code for "GetComboboxTypes"  in your controller

Thanks

[Jason]

 

public JsonResult GetComboboxTypes(int categoryId)

{

 

IEnumerable<ExpenseType> types = expenseTypeService.GetByCategory(categoryId);

 

return Json(new SelectList(types, "Id", "Name"), JsonRequestBehavior.AllowGet);

}

[Samantha]

You saved my life Jason, thank you

[Swa]

//Controller
public JsonResult GetComboboxTypes(int categoryId)

{

return Json(new SelectList(Viewbag.ItemDesc, "Text", "Value"), JsonRequestBehavior.AllowGet);

}


//view
@(Html.Telerik().Grid<ExpenseGridModel>()
    .DataBinding(dataBinding => dataBinding.Ajax()
        .Select("ExpenseAjaxBinding", "ExpenseEntry")
        .Update("ExpenseUpdate", "ExpenseEntry")
    )
    .Name("ExpensesGrid")
    .DataKeys(keys => keys.Add(r => r.id))
    .Columns(columns =>
        {
            columns.ForeignKey(o => o.categoryId, Model.expenseCategories, "Id", "Name");
            columns.ForeignKey(o => o.categoryId, ViewBag.ItemDesc, "Id", "Name");
            columns.Bound(r => r.date);
            columns.Bound(r => r.description);
            columns.Bound(r => r.amount);
            columns.Command(commands =>
                commands.Edit()
            );
        })
 )

 .ClientEvents(c => c

.OnEdit("OnEditing")

//Javascript
function onEditing(e) {
  //get the first combobox in the edit form
  var categoryCombobox = $(e.form).find('#categoryId');
  //get the second combobox in the edit form
  var typeCombobox = $(e.form).find('#typeId');
  //get the selected value of the first combobox
  var categoryValue = categoryCombobox.data("tDropDownList").value();
  //get the selected value of the second combobox
  var originalTypeValue = typeCombobox.data("tDropDownList").value();
  //set the value change event for the first combobox.  this calls the categoryChanged method
  //and passes the value of the first combobox when the event is triggered.

  categoryCombobox.bind("valueChange", function (e) { categoryChanged(e.value); });
  //calls the categoryChanged method. this is needed so the comboboxes in the edit form properly load when
  //it first opens.
  categoryChanged(categoryValue, originalTypeValue);
}

function categoryChanged(categoryId, originalTypeValue) {
   //gets the second combobox
   var typeCombobox = $("#typeId").data("tDropDownList");  
   //calls the GetComboboxTypes action in the ExpenseEntry controller.

   var url = '@Url.Action("GetComboboxTypes", "ExpenseEntry")';

    $.get(url, { categoryId: categoryId }, function (data) {
       //bind the combobox with the new data
       typeCombobox.dataBind(data);  
       //sets the selected value of the second combobox if it was passed, otherwise set the first item.

       if (originalTypeValue == undefined)
          typeCombobox.select(0);
       else
           typeCombobox.value(originalTypeValue);

        });
}


 i have used the above coding snippet but the cascade effect is not taking place every thing works fine till i fill the viewbag with data but the typeCombobox.bind(data) does seem to take place can any one help me with this