Search code examples
asp.net-mvckendo-uikendo-asp.net-mvccascadekendo-dropdown

kendo dropdown list casecadefrom


I have three kendo drop downlist as below

1)

@(Html.Kendo().DropDownListFor(m => m.ProgrammeID)
.HtmlAttributes(new { data_value_primitive = "true" })
.Name("ProgrammeID") 
.DataTextField("DegreeName") 
.DataValueField("Id") 
.OptionLabel("Select Below...")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetProgramme", "AptitudeTset").Data("filterProgramme");
            })

            .ServerFiltering(true); 
        })
.SelectedIndex(0)
.CascadeFrom("FacultyID")
)

2)

@(Html.Kendo().DropDownListFor(m => m.SpecializationID)
    .HtmlAttributes(new { data_value_primitive = "true" })
.Name("SpecializationID") 
.DataTextField("SpecializationNameID") 
.DataValueField("SpecializationID") 
.OptionLabel("Select Below...")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetSpecialization", "Subject").Data("filterSpecialization"); 
            })

            .ServerFiltering(true);
        })
.SelectedIndex(0) 
.CascadeFrom("ProgrammeID")
)

3)

 @(Html.Kendo().DropDownListFor(m => m.SemesterID)

.HtmlAttributes(new { data_value_primitive = "true" })
.OptionLabel("Select Below...")
.Name("SemesterID") 
.DataTextField("SemesterName") 
.DataValueField("SemesterID")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetSemester", "StudentRSRegistration").Data("loadSemester");
            })  

            .ServerFiltering(true); 
        })
.SelectedIndex(0) 
.CascadeFrom("SpecializationID")    
.CascadeFrom("ProgrammeID"`enter code here`)        
)

in here my 3rd DDL load based on 1st & 2nd DDL. But some times 2nd DDL may not has values. It can be empty..1st DDL always has values. My problem is, when 2nd DDL is null value my 3rd DDL not loading. But I want to load my 3rd DDL always. Because SemesterID is Requires. SemesterID depend on programmeID or/and SpecializationID. That's why some times 2nd DDl may have null values.


Solution

  • I solved this problem using Ajax call..I used 2nd DDL Cascade Event Handel like below .Events(m=>m.Cascade("cascadesp"))

    Now my 2nd DDL

    @(Html.Kendo().DropDownListFor(m => m.SpecializationID)
    
        .HtmlAttributes(new { data_value_primitive = "true" })
        .Name("SpecializationID") 
        .DataTextField("SpecializationNameID") 
        .DataValueField("SpecializationID")
        .OptionLabel("Select Below...")
                .DataSource(source =>
                {
    
                    source.Read(read =>
                    {
                        read.Action("GetSpecialization", "Subject").Data("filterSpecialization"); 
                    })
    
                    .ServerFiltering(true); 
                })
        .Events(m=>m.Cascade("cascadesp"))
        .SelectedIndex(0)
        .CascadeFrom("ProgrammeID")
    )
    

    my ajax call is

    function cascadesp()
    {
        getSemesterID($("#ProgrammeID").data("kendoDropDownList").value(),$("#SpecializationID").data("kendoDropDownList").value(),$("#SpecializationLevelID").data("kendoDropDownList").value(),$("#IntakeID").data("kendoDropDownList").value(),$("#intakeYear").val());
    }
    
    function getSemesterID(ProgrammeID, SpecializationID, SpecializationLevelID, IntakeID, intakeYear)
    {
        var ddl = $('#SemesterID').data("kendoDropDownList");
        var URL = "/StudentRSRegistration/GetSemester/";
        $.ajax({
            url: URL,
            data: JSON.stringify({ ProgrammeID: ProgrammeID, SpecializationID: SpecializationID, SpecializationLevelID: SpecializationLevelID, IntakeID: IntakeID, intakeYear: intakeYear }),
            async: false,
            cache: false,
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                ddl.setDataSource(data);
            }
        });
    }
    

    now my SemeterID DDL is loding Propely