Kendo UI DDL MVC Identify requestor during data read

Question

I have an editor template that uses 3 kendo UI ddls. The second 2 DDLs cascade from their respective parent. The last DDL maps to the model in my form. The first 2 are just used to filter down the results of the final one. To use an automotive example, the first one could be Year, then the next Make, and the third and final is Model. Changing the first one (Year) forces the next to cascade from it and filter out its results based on the year in the first ddl, and so forth.

This all works dandy with one instance of the editor on the page. But now I need to add a second instance, so I need to change the names of the first 2 ddls to be unique from the first instance of this editor on the page or else it breaks Kendo UI. So I add a suffix to the name of these first 2 DDLs that is actually the name of the model property.

So far, so good....UNITL...the cascade from DDL2 kicks off and I have a js function to get the value selected in DDL1 from which I will filter the DDL2 data via an AJAX read. The problem, the .Data method in the Kendo UI read doesn't pass any arguments from which I can determine the requesting control so I can find the value from the correct instance of DDL1.

Time for some code so you get the picture:

@using OTIS.AppServ.Shared.ViewModels;
@using Kendo.Mvc.UI;

@{
    string controlId = ViewData.TemplateInfo.HtmlFieldPrefix.Replace('.', '_');
    string itemDescription = (string)ViewData["ItemDescription"];

    if(itemDescription != null){
     <span>@itemDescription</span><br />   
    }
}

<div>
@(Html.Kendo().DropDownList()
    .Name("attribute5_" + controlId)
    .HtmlAttributes(new { @style = "width:275px;", @class = "ddl1" })
    .DataValueField("Value")
    .DataTextField("DisplayText")
    .Events( e => e.Change("forceItemFilterCheck"))
    .OptionLabel("Select Gauge")
    .Template("#= data.DisplayText.replace(' ', '&nbsp;') #")
    .DataSource(source => {
               source.Read(read => {
                   read.Action("ItemUniqueAttributes", "ManageDDLs", new { area = "Shared", itemAttribute = "Attribute5" });
               })
               .ServerFiltering(true);
          })
)
<br />
@(Html.Kendo().DropDownList()
    .Name("attribute2_" + controlId)
    .HtmlAttributes(new { @style = "width:275px;", @class = "ddl2" })
    .DataValueField("Value")
    .DataTextField("DisplayText")
    .OptionLabel("Select Color")
    .Template("#= data.DisplayText.replace(' ', '&nbsp;') #")
    .AutoBind(false)
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetFilteredAttribute2From5", "ManageDDLs", new { area = "Shared" })
                .Data("filter5DDL"); <---------------------PROBLEM CALL
        })
        .ServerFiltering(true);
    })
    .CascadeFrom("attribute5_" + controlId)
)
<br />
@(Html.Kendo().DropDownListFor(model => model)
    .AutoBind(false)
    .HtmlAttributes(new { @style = "width:275px;", @class = "ddl3" })
    .Events(e =>
        {
            e.Change("preSetItemDescriptionFromDDL");
            e.DataBound("selectNonInvenItem");
        })
    .DataValueField("Value")
    .DataTextField("DisplayText")
    .OptionLabel("Select Material")
    .Template("#= data.DisplayText.replace(' ', '&nbsp;') #<hr>")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetFilteredItems", "ManageDDLs", new { area = "Shared" })
                .Data("filterDDL")
                ;
        })
        .ServerFiltering(true);
    })
    .CascadeFrom("attribute2_" + controlId)
)
@Html.ValidationMessageFor(m => m)

</div>

Here is the js function do get the DDL2 data read parameters to filter by. This is the original version:

function filter5DDL(e) {
    return {
        attribute5: $("#attribute5").data("kendoDropDownList").value()
    };
}

But since $("#attribute5") (which is the name of DDL1) is now no longer a valid name due to the adding of the unique suffix, how can I get its value?

For my other events triggered by these DDLs, I can use the e.sender then from there, find the appropriate control's value, i.e. it would be nice if I could do this:

function filter5DDL(e) {
    var $requestor = $(e.sender.element);
    var $firstDDLElement = $requestor.closest('div').find('input[name^="attribute5"]');
    var ddl1Value = $firstDDLElement.data("kendoDropDownList").value();

    return {
        attribute5: ddl1Value
    };
}

But the (e) parameter passed by the .Data in this case doesn't pass anything of value to determine the requesting control.

Any other ideas on ways to skin this cat?

crichavin crichavin · Accepted Answer · 2016-01-20T05:22:08

Figured it out. You need to basically turn off cascading (comment out the .CasecadeFrom) and remove the .Data("jsFiltercriteia") for all the ddls and manually wire up these events using jquery in your doc.ready section so you have more control over them.

Set the 2 dependent ddls to disabled, then on ddl 1 change call a function that gets the ddl2 filter parameters, calls ddl2.dataSource.read(filterCriteria) and enables ddl2. Then the same thing for change of ddl2 to refresh and enable ddl3 based on ddl1 and ddl2 values.

Kendo UI DDL MVC Identify requestor during data read

1 Answers