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