Asp.net Core DropDownList with IE 11 and read action

[Rick]

Hi,
I am having an issue with the ASP.Net Core DropdownList with IE 11.  I have done a search and found a few suggested fixes, none seem to resolve my issue.

The scenario is that I have one dropdownlist that on its change event is to cause another dropdownlist to populate with related data.  It is a parent (Category) to child (Subcategory) relationship. 

The issue is that on the change event of the parent dropdownlist the child is not being refresh as expected.  If any new subcategories have been added since the last time the browser was opened, they do not show.  Sometimes even closing the browser and reopening it does not refresh the data.  I believe it is a caching issue related to IE as it works fine in Chrome.  I have followed the suggested fixes below.  They do not resolve my issue in a satisfactory way.

Solution one suggests using the inherit cascading functionality of the dropdownlist.  This does not work. In the code sample you will see that I am using a function within the .Data() to pass the parent category id.  I cannot seem to get that to work with passing the antiforgerytoken as well. 

https://www.telerik.com/forums/dropdownlist-datasource-read-and-refresh-the-parameters-

Solution two suggests to add “.Type(HttpVerbs.Post)” to the read action of the dropdownlists.  This does work if I remove our AntiForgeryToken protection.  The problem with this solution is that we cannot remove the antiforgerytoken for any post action even if the result is not a change to data.

https://stackoverflow.com/questions/26612828/issue-updating-kendo-dropdownlist-with-internet-explorer

Is there any other solution to my issue?  IE 11 is the official browser the company supports and as such I need it to work with IE 11.

In this first example I am using the cascading functionality with trying to pass the antiforgerytoken within the getCategoryId function.

function onCategoryChange() {
    $("#SubCategoryId").data("kendoDropDownList").dataSource.read();
}

function getCategoryId() {
    var categoryId = $("#CategoryId").data("kendoDropDownList").value();
    var id = categoryId;
    dict = new Object();
    dict['parentId'] = id;
    return { args: dict, "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val() };
}

 

@(Html.Kendo().DropDownListFor(m => m.CategoryId)
    .HtmlAttributes(new { @class = "input-category" })
    .DataTextField("Description")
    .DataValueField("ServiceCategoryId")
    .Events(e => e.Change("onCategoryChange"))
    .DataSource(source => {
        source.Read(read => {
            read.Action("ActionSelectList", "ServiceRequest", new { listModel = "category" }).Type(HttpVerbs.Post).Data("sendAntiForgery");
            });
        })
)

@(Html.Kendo().DropDownListFor(m => m.SubCategoryId)
    .HtmlAttributes(new { @class = "input-category" })
    .ValuePrimitive(true)
    .DataTextField("Description")
    .DataValueField("ServiceCategoryId")
    .NoDataTemplate("NO SUBCATEGORY")
    .DataSource(source => {
        source.ServerFiltering(true);
        source.Read(read => {
            read.Action("ActionSelectList", "ServiceRequest", new { listModel = "subcategory" }).Data("getCategoryId");
        });
    })
    .Enable(false)
    .AutoBind(false)
    .CascadeFrom("CategoryId")
)

 

In this second example is am using the “.Type(HttpVerbs.Post)" solution with antiforgerytoken protection turned off.  The onCategoryChange function and the parent categoryId dropdownlist are the same as the first.  This works but is not a real solution since I have to turn of antiforgerytoken.

function getCategoryId() {
    var categoryId = $("#CategoryId").data("kendoDropDownList").value();
    var id = categoryId;
    dict = new Object();
    dict['parentId'] = id;
    return { args: dict };
}

 

@(Html.Kendo().DropDownListFor(m => m.SubCategoryId)
    .HtmlAttributes(new { @class = "input-category" })
    .ValuePrimitive(true)
    .DataTextField("Description")
    .DataValueField("ServiceCategoryId")
    .NoDataTemplate("NO SUBCATEGORY")
    .DataSource(source =>
    {
        source.ServerFiltering(true);
        source.Read(read =>
        {
                read.Action("ActionSelectList", "ServiceRequest", new { listModel = "subcategory" }).Data("getCategoryId").Type(HttpVerbs.Post);
        });
    })
    .AutoBind(false)
)

 

Thank you for any help you can provide.

Rick

 

 

[Martin]

Hello Rick,

I will need some additional time to find the most appropriate solution for the described scenario. I will get back to you as soon as I am ready with a sample project that will help with resolving the issue.

Regards,
Martin
Progress Telerik

[Martin]

Hello Rick,

Attached you will find a project which I believe should meet your requirements. It uses the cascading functionality of the DropDownList. For the child DropDownList, you can define the following function in the Data():

.Data("myDataFunction");

function myDataFunction() {
    return {
        categories: $("#categories").val(), "__RequestVerificationToken": kendo.antiForgeryTokens().__RequestVerificationToken
    };
}

It will filter the widget according to the parent DropDownList's value, and then return the antiforgery token using the antiForgeryTokens method. 

I hope that would help you solve your issue. Feel free to ask if you need further assistance.

Regards,
Martin
Progress Telerik

[Rick]

It is now working as expected now.  Thank you for the help with this issue.