<div class="row mt-3">
		<div class="col-lg-4">
			@(Html.Kendo().DropDownListFor(m => m.CategoryHeadId)
			      .Size(ComponentSize.Medium)
				  .Rounded(Rounded.Medium)
				  .FillMode(FillMode.Solid)
				  .OptionLabel("Select head category...")
				  .HtmlAttributes(new { style = "width: 100%" })
				  .DataTextField("Name")
				  .DataValueField("Id")
				  .DataSource(source =>
				  {
					  source.Read(read =>
					  {
						  read.Action("GetLookupCategoriesHead", "Api");
					  });
				  })
				)
		</div>
		<div class="col-lg-4">
			@(Html.Kendo().DropDownListFor(m => m.CategoryMainId)
			      .Size(ComponentSize.Medium)
				.Rounded(Rounded.Medium)
				.FillMode(FillMode.Solid)
				.OptionLabel("Select main category...")
				.HtmlAttributes(new { style = "width: 100%" })
				.DataTextField("Name")
				.DataValueField("Id")
				.DataSource(source =>
				{
					source.Read(read =>
					{
						read.Action("GetLookupCategoriesMain", "Api")
						    .Data("filterMainCategories");
					})
					.ServerFiltering(true);
				})
				.Enable(false)
				.AutoBind(false)
				.CascadeFrom("CategoryHeadId")
				)
		</div>
		<div class="col-lg-4">
			@(Html.Kendo().DropDownListFor(m => m.CategorySubId)
				.Size(ComponentSize.Medium)
				.Rounded(Rounded.Medium)
				.FillMode(FillMode.Solid)
				.OptionLabel("Select sub-category...")
				.HtmlAttributes(new { style = "width: 100%" })
				.DataTextField("Name")
				.DataValueField("Id")
				.DataSource(source =>
				{
					source.Read(read =>
					{
						read.Action("GetLookupCategoriesSub", "Api")
						    .Data("filterSubCategories");
					})
					.ServerFiltering(true);
				})
				.Enable(false)
				.AutoBind(false)
				.CascadeFrom("CategoryMainId")
				)
		</div>
	</div>

@section Scripts {
	<script>
		function filterMainCategories() {
			return {
				headId: $("#CategoryHeadId").val()
			};
		}

		function filterSubCategories() {
			return {
				headId: $("#CategoryHeadId").val(),
				mainId: $("#CategoryMainId").val()
			};
		}
	</script>
}

Originally, this was a View on its own but later got refactored into an EditorTemplate. Since then, the second and third DropDowns are always disabled even if a parent makes a valid selection.

Console windows don't log any errors. I'm thinking it's an issue with the placement of the JS block. I tried placing it within a @Script section and directly. The thing that is really frustrating is that there are two views now using this EditorTemplate and one is working fine but the other has issues:

Create (Working):

	@using (Html.BeginForm("", "Letter", FormMethod.Post))
	{
		@Html.AntiForgeryToken()

		@Html.EditorFor(m => m, "Letter")

		<div class="row mt-3">
			<div class="col-md-1">
				<button type="submit" class="btn btn-primary w-100 me-5px" formaction="CreateSave" title="@(Model.IsUpdateCase ? "Update letter" : "Save letter")">@(Model.IsUpdateCase ? "Update" : "Save")</button>
			</div>
			<div class="col-md-1">
				<button type="submit" class="btn btn-default w-100" formaction="CreateSubmit" title="@(Model.IsUpdateCase ? "Update letter & submit" : "Save letter & submit")">Submit</button>
			</div>
		</div>
	}

ViewInfo (Not working):

	@using (Html.BeginForm("ViewInfo", "Letter", FormMethod.Post))
	{
		@Html.AntiForgeryToken()

		@Html.EditorFor(m => m.Letter, "Letter")

		<div class="row mt-3">
			<div class="col-md-1">
				<button type="submit" class="btn btn-primary w-100 me-5px" title="Submit">Submit</button>
			</div>
		</div>
	}

I have verified that the APIs are up and running and also the model for the template(s) is valid.

How do troubleshoot this behavior? And where should the script block files go per best practice? I think it should be in the template within the section.

@(Html.Kendo().Grid(Model)
      .Name("gridLetters")
      .Columns(columns =>
      {
	      columns.Bound(p => p.Id).ClientTemplate("<a href='" + Url.Action("View", "Letter", new { letterId = "#:Id#" }) + "'>#=Id#</i></a>");
	      columns.Bound(p => p.Subject);
	      columns.Bound(p => p.CompanyName).Title("Company");
	      columns.Bound(p => p.BrandName).Title("Brand");
	      columns.Bound(p => p.Location.Name).Title("Location");
	      columns.Bound(p => p.LetterType.Name).Title("RL Type");	      
      })
      .ToolBar(toolbar =>
      {
	      toolbar.Search();
      })
      .Sortable()
      .Navigatable()
      .Resizable(r => r.Columns(true))
      .Pageable(pageable => pageable
	                .Refresh(true)
	                .PageSizes(true)
	                .ButtonCount(5))
      .Filterable()
      .Scrollable()
      .ClientDetailTemplateId("detailTemplate")
      .HtmlAttributes(new { style = "height:430px;" })
      .DataSource(dataSource => dataSource
	                  .Ajax()
	                  .Sort(x => x.Add("Id").Descending())
	                  .PageSize(20)
	                  .ServerOperation(false)
	  ))

@section Scripts {
	<script id="detailTemplate" type="text/kendo-tmpl">
	    @(Html.Kendo().TabStrip()
	          .Name("tabStrip_#=Id#")
	          .SelectedIndex(0)
	          .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
	          .Items(items =>
	          {
		          items.Add().Text("History").Content(@<text>@Html.DisplayFor(m => m.History, "LetterHistory")</text>);
		          items.Add().Text("Details").Content("");
	          }).ToClientTemplate())
	</script>
}

@model IList<BusApp.Domain.Models.BusinessObjects.LetterActionHistoryFlatModel>

@(Html.Kendo().Grid(Model)
      .Name("gridLetterHistory")
      .Columns(columns =>
      {
	      columns.Bound(p => p.ActionStamp).Title("Stamp").Format("{0:dd-MMM-yyyy}");
	      columns.Bound(p => p.LetterActionName).Title("Action");
	      columns.Bound(p => p.ActionTakenByName).Title("Taken By");
      })
      .Navigatable()
      .Resizable(r=>r.Columns(true))
      .Pageable(pageable => pageable
	                .Refresh(true)
	                .PageSizes(true)
	                .ButtonCount(10))
      .Filterable()
      .Scrollable()
      .DataSource(dataSource => dataSource
	                  .Ajax()
	                  .Sort(x => x.Add("ActionStamp").Descending())
	                  .PageSize(20)
	                  .ServerOperation(false)
	  )
	)