Hello,
I'm having a strange problem with a cascading dropdown. I have an in cell edit grid for a list in my model. I have two dropdowns in editor templates. CustomerContact cascades from Customer. Both dropdowns are bound to a SelectListItem object on my model with properties "Text" and "Value". Both dropdowns function normally on initial selection and the value of both dropdowns is successfully set as an object. I'm able to use #= data.Text # in a ClientTemplate to display the text of the selected item.
This is where it gets weird. If I click to focus the cell containing my cascaded CustomerContact dropdown, and then click off without actually expanding the dropdown, the value changes from being the whole object to just the DataValueField ("Value" in my case). I've checked and sure enough the datasource change event is triggered when i click off of the cell for the CustomerContact dropdown even though I haven't opened it. This doesn't happen to the Customer dropdown, so it must be something with the cascade but I really can't understand what is causing it. Code below and some screenshots of before and after click my second dropdown's cell. Any help would be appreciated!
Grid:
@(Html.Kendo().Grid(Model.ScheduledInteractions)
.Name("scheduled-interactions-grid")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Customer).DefaultValue(new SelectListItem() { Text = "- Select -", Value = "-1" });
model.Field(p => p.CustomerContact).DefaultValue(new SelectListItem() { Text = "- Select -", Value = "-1" });
})
.ServerOperation(false))
.Columns(c =>
{
c.Command(cmd => cmd.Destroy()).Width(100);
c.Bound(x => x.Customer).EditorTemplateName("CustomerDropdown")
.ClientTemplate("#= data.Customer ? data.Customer.Text : '' #" +
"<input type='hidden' name='ScheduledInteractions[#= getIndex(data)#].Customer' value='#= data.Customer #' />"
);
c.Bound(x => x.CustomerContact).EditorTemplateName("CustomerContactDropdown")
.ClientTemplate("#= data.CustomerContact ? data.CustomerContact.Text : '' #" +
"<input type='hidden' name='ScheduledInteractions[#= getIndex(data)#].CustomerContact' value='#= data.CustomerContact #' />"
);
c.Bound(x => x.InteractionType).EditorTemplateName("InteractionTypeDropdown")
.ClientTemplate("#= InteractionType #" +
"<input type='hidden' name='ScheduledInteractions[#= getIndex(data)#].InteractionType' value='#= InteractionType #' />"
);
c.Bound(x => x.Description).ClientTemplate("#= Description #" +
"<input type='hidden' name='ScheduledInteractions[#= getIndex(data)#].Description' value='#= Description #' />"
);
})
.ToolBar(tb => {
tb.Create();
})
.Navigatable()
.Editable(editable => editable.Mode(GridEditMode.InCell))
)
Editor Templates:
@model SelectListItem @(Html.Kendo().DropDownListFor(m => m) .Name("customer-select") .HtmlAttributes(new { @class = "form-control", name = Html.NameFor(m => m) }) .OptionLabel("- Select -") .DataTextField("Text") .DataValueField("Value") .Filter("contains") .DataSource(ds => { ds.Read(read => { read.Action("CompanyOptions", "Common", new { Area = "API" }).Data("filterCustomersInGrid"); }).ServerFiltering(true); }) ) @Html.ValidationMessageFor(m => m, "", new { @class = "text-danger" })
@model SelectListItem @(Html.Kendo().DropDownListFor(m => m) .Name("customer-contact-select") .HtmlAttributes(new { @class = "form-control", name = Html.NameFor(m => m) }) .OptionLabel("- Select -") .DataTextField("Text") .DataValueField("Value") .Filter("contains") .DataSource(ds => { ds.Read(read => { read.Action("ContactOptions", "Common", new { Area = "API" }).Data("filterContactsInGrid"); }).ServerFiltering(true); }) .AutoBind(false) .CascadeFrom("customer-select") ) @Html.ValidationMessageFor(m => m, "", new { @class = "text-danger" })
Javascript:
function getCurrentGridRow() {
var grid = $("#scheduled-interactions-grid").data("kendoGrid");
var editRow = grid.tbody.find("tr:has(.k-edit-cell)");
return grid.dataItem(editRow);
}
function filterCustomersInGrid() {
var row = getCurrentGridRow();
return { contains: '', currentId: row.Customer ? row.Customer.Value : null };
}
function filterContactsInGrid() {
var row = getCurrentGridRow();
return { companyId: row.Customer ? row.Customer.Value : null, contains: '', currentId: row.CustomerContact ? row.CustomerContact.Value : null };
}
function getIndex(dataItem) {
var data = $("#scheduled-interactions-grid").data("kendoGrid").dataSource.data();
return data.indexOf(dataItem);
}
Value of Dropdowns After Initial Selections
After Cell Click: