DropDownList DataSource Read Action failing to created expected JavaScript at run-time

1 Answer 30 Views
DropDownList
John
Top achievements
Rank 1
Iron
John asked on 10 Dec 2021, 12:51 PM

ASP.NET MVC 2020.3.915, development on an enclave network, so upgrading to newer versions takes an act of Congress, and all the code shown here is typed in by hand—meaning if there are any obvious typos, don't take that as the reason it's not working.

I have a DropDownList set up to get a fresh list of items based on Change and Close events on two DatePicker controls, and it works exactly as desired. I am trying to move this same set of controls to an (existing) preferences settings page. I copied the cshtml code verbatim and made appropriate changes, but it's not working.

Here's the control that is working. It sits inside a TabStrip control:


<div class="editor-field">
    @(Html.Kendo().DropDownListFor(m => m.ReportType)
        .Name("ReportType")
        .DataTextField("Text")
        .DataValueField("Value")
        .OptionLabel("Select a Report Type...")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetFilteredTeams", "Home").Data("get_Dates");
            }).ServerFiltering(true);
        })
        .HtmlAttributes(new { @class = "reportTypeDropdown" }))
</div>

When I inspect this page, I see that this JavaScript was generated:

kendo.SyncReady(function(){jQuery("#ReportType").kendoDropDownList({dataSource":{"transport":{"read":{"url":"/Reporting/Home/GetFilteredTeams","data":getDates},"prefix":""},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}},"dataTextField":"Test","dataValueField":"Value","optionLabel":"Select a Report type..."});});


Again, I copied the DropDownList over to the preference page, where it's inside a PanelBar, made appropriate changes, and this is what it looks like: (FWIW, the get_Dates JavaScript function is in a separate JavaScript file associated with the preferences page. Also, the DropDownList is not bound to the model here).

<div class="pref-sub-section-item">
    @(Html.Kendo().DropDownList
        .Name("ReportTypePref")
        .DataTextField("Text")
        .DataValueField("Value")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetFilteredTeams", "Preferences").Data("get_Dates");
            }).ServerFiltering(true);
        })
        .HtmlAttributes(new { @class = "reportTypeDropdown" }))
</div>

However, this is the JavaScript that gets generated:


kendo.SyncReady(function(){jQuery("#ReportTypePref").kendoDropDownList({"dataTextField":"Test","dataValueField":"Value"});});

If I copy the JS generated from the working page, change the name of the control and the URL, then paste it in the console (or add it to a document.ready block), the DropDownList starts working in sync with the DatePickers.

I've tried fooling with the CSS in case that was erroring out and causing a conflict. I've had my eye on the console, and there are no JS errors popping up. I've also taken the non-working version out of the PanelBar and just pasted the <div> to the root/top level on that page. Same results. No JS, and it doesn't work. I've also tried adding a property to the model and using DropDownListFor (just throwing darts, really), and still, no luck.

It seems the problem is that on my preferences page, Kendo is not generating the full JS for some reason. This is such a massive project that it's not really feasible to create a discrete model where the problem is repeatable. I realize without viewing the full project, it will be hard to pinpoint, but I'm just looking for some help on how to troubleshoot what's going on here, since looking under the hood of Kendo has it's limits.

Oh, also, the page that is working is \Reporting\Home\Index.cshtml — the page that is not working is \Preferences\Index.cshtml

1 Answer, 1 is accepted

Sort by
0
Accepted
John
Top achievements
Rank 1
Iron
answered on 10 Dec 2021, 05:41 PM

Ok, folks. Well, no one has viewed my question, but nonetheless, I want to say—sorry for the fire drill! I had a sneaking suspicion all along that it was something at the MVC level and not anything Kendo was doing wrong.

And, yes, the way the "Preferences" area was set up was that the controller and model and folders and everything was "Preferences_", but there was no specific routing, all default routes, which expects everything to be "Home_". So I took the dive and made all the changes necessary so that everything is "Home_" and, voila, I'm in business.

btw, this was the only Area in the app that didn't have things set up as "Home_". Inheriting other folks' wild west programming can be a challenge. But if it doesn't kill you, it only makes you stronger.

Anton Mironov
Telerik team
commented on 15 Dec 2021, 11:29 AM

Hi John,

I was working on the case at the same time. Thank you for sharing the pointed approach with the community. I confirm that this is the recommended one.

If assistance for anything else Kendo-related is needed, do not hesitate to contact the team.

Kind Regards
Anton Mironov

Tags
DropDownList
Asked by
John
Top achievements
Rank 1
Iron
Answers by
John
Top achievements
Rank 1
Iron
Share this question
or