I have two drop downs in my Kendo grid, one for categories and one for sub-categories. The sub-categories drop down needs to change based on the value of the category drop down. This if fairly common scenario, but a bear to implement for someone who is new to Kendo. For anyone attempting to do so, I strongly recommend searching the forum for 'KendoGridWithInCellCascadingDropDownLists' and studying it closely.
I now have everything working properly and thought I would share a bit of what I learned from the experience.
a. While in InCell editing mode you cannot do something like this in your filter function:
function filterSubCategories()
{
return { catId: $("#CategoryId").data("kendoDropDownList").value() };
}
Instead, you must use the following to get the "CategoryId":
function filterSubCategories()
{
var grid = $("#equip-grid").data("kendoGrid");
var editRow = grid.tbody.find("tr:has(.k-edit-cell)");
var model = grid.dataItem(editRow);
return { catId: model.CategoryId };
}
To me this is less than intuitive, NOT very developer friendly and somewhat of a hack!
b. In Inline edit mode, the filter function is called when the user selects an item from the CATEGORY drop down. In InCell edit mode, the filter function is called when the user first clicks the SUB-CATEGORY drop down button.
This behavior in item b. is the reason for my post. WHY this inconsistency, why not call the filter function when the user changes the CATEGORY drop down?
From a useabilty stand-point, I need to clear the SUB-CATEGORY drop down and set it to the OptionLabel value, whenever the CATEGORY drop down changes.
Any thoughts on how to accomplish this?
I now have everything working properly and thought I would share a bit of what I learned from the experience.
a. While in InCell editing mode you cannot do something like this in your filter function:
function filterSubCategories()
{
return { catId: $("#CategoryId").data("kendoDropDownList").value() };
}
Instead, you must use the following to get the "CategoryId":
function filterSubCategories()
{
var grid = $("#equip-grid").data("kendoGrid");
var editRow = grid.tbody.find("tr:has(.k-edit-cell)");
var model = grid.dataItem(editRow);
return { catId: model.CategoryId };
}
To me this is less than intuitive, NOT very developer friendly and somewhat of a hack!
b. In Inline edit mode, the filter function is called when the user selects an item from the CATEGORY drop down. In InCell edit mode, the filter function is called when the user first clicks the SUB-CATEGORY drop down button.
This behavior in item b. is the reason for my post. WHY this inconsistency, why not call the filter function when the user changes the CATEGORY drop down?
From a useabilty stand-point, I need to clear the SUB-CATEGORY drop down and set it to the OptionLabel value, whenever the CATEGORY drop down changes.
Any thoughts on how to accomplish this?