<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>
}

    public async Task<JsonResult> GetLookupCategoriesHead()
    {
        var result = await serviceLookUps.GetAllCategoriesHeadAsync();
        return new JsonResult(result);
    }

    public async Task<JsonResult> GetLookupCategoriesMain(int headId)
    {
        var result = await serviceLookUps.GetAllCategoriesMainAsync(headId);
        return new JsonResult(result);
    }

    public async Task<JsonResult> GetLookupCategoriesSub(int headId, int mainId)
    {
        var result = await serviceLookUps.GetAllCategoriesSubAsync(headId, mainId);
        return new JsonResult(result);
    }

[DebuggerDisplay($"{nameof(Id)}: {{{nameof(Id)},nq}}, {nameof(Name)}: {{{nameof(Name)}}}, {nameof(Active)}: {{{nameof(Active)}}}")]
public class LookupCategoryHeadModel
{
    public int    Id     { get; set; }
    public string Name   { get; set; } = string.Empty;
    public bool   Active { get; set; }
}

[DebuggerDisplay($"{nameof(Id)}: {{{nameof(Id)},nq}}, {nameof(Name)}: {{{nameof(Name)}}}, {nameof(Active)}: {{{nameof(Active)}}}")]
public class LookupCategoryMainModel
{
    public int    Id     { get; set; }
    public int    HeadId { get; set; }
    public string Name   { get; set; } = string.Empty;
    public bool   Active { get; set; }
}

[DebuggerDisplay($"{nameof(Id)}: {{{nameof(Id)},nq}}, {nameof(Name)}: {{{nameof(Name)}}}, {nameof(Active)}: {{{nameof(Active)}}}")]
public class LookupCategorySubModel
{
    public int    Id     { get; set; }
    public int    HeadId { get; set; }
    public int    MainId { get; set; }
    public string Name   { get; set; } = string.Empty;
    public bool   Active { get; set; }
}

@page
@model IndexModel

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
@{
    ViewData["Title"] = "Home page";
}
--------------------------------------------------------------------------------
 
 
<div class="text-center">
    <h1 class="display-4">Welcome</h1>


         @(Html.Kendo().DropDownList()
            .Name("MyDropdownn")
            .DataTextField("Text")
            .DataValueField("Value")
            .HtmlAttributes(new { style = "width:300px;" })
            .AutoBind(false)
            .Filter(FilterType.Contains)      
            .DataSource(ds => ds
                .Custom()
                .Transport(transport => transport
                    .Read(r => r
                        .Url("/Index?handler=Sports")
                    ))
                    .ServerFiltering(false)
                )
            )

</div>

Index.cshtml.cs

        public JsonResult OnGetSports()
        {
            var allSports1 = db.Sports.Where(x => x.SportID > 0).Select(x => new DropDownModel
            {
                Text = x.Name,
                Value = x.SportID 
            }).ToList();

            return new JsonResult(allSports1);
        }

    public class DropDownModel
    {
        public int Value { get; set; }
        public string Text { get; set; } = String.Empty;
    }

.Items(items =>
{
   items.Add().Text("Complete")
              .HtmlAttributes(new { id = "CompleteID", title = "Complete" })
              .Enabled(false);
}

function EnableMenu(canComplete)
{
   var menu = $("#@Model.HtmlID").data("kendoContextMenu");

   menu.enable("#CompleteID", canComplete);
}