Getting Cascading Dropdownlist working with RazorPages

[Mitchell]

I can't seem to get the Cascading DropdownList functionality to return the selected value from the parent.  I will list what I have and if someone can point out my problem I would appreciate it.  The parent loads the selected items correctly, and it calls the child dropdownlist event when a new select is made, but the parameter that should have the selected id is always null.

.cshtml page

<table><tr>
        <td>CLIN:</td>
        <td>

                <kendo-dropdownlist name="ddlCLIN"  datatextfield="Title" datavaluefield="ProjectID" >
                    <datasource type="DataSourceTagHelperType.Custom">
                        <transport>
                            <read url="/LogEditor?handler=CLINS" />
                        </transport>
                    </datasource>

                </kendo-dropdownlist>
            </td>
    </tr>
    <tr>
        <td>CLIN Task Type:</td>
        <td>
            <kendo-dropdownlist name="ddlCLINTaskType" cascade-from="ddlCLIN" datatextfield="Title" datavaluefield="ProjectID">
                <datasource type="DataSourceTagHelperType.Custom">
                    <transport>

                        <read url="/LogEditor?handler=CLINTaskTypes" />

                    </transport>
                </datasource>

            </kendo-dropdownlist>
        </td>
    </tr></table>

 

html.cs

 

public JsonResult OnGetCLINTaskTypes(int? ddlCLIN)
        {
            TaskTypes tt = new TaskTypes(SQLWrapper);
            DataSet ds = new DataSet();
            
            
            if(ddlCLIN == null)
            {
                ddlCLIN = 0;
            }
            ds = tt.SelectRecordsForDropDown("TITLE", Int32.Parse(HttpContext.Session.GetInt32(Globals.SessionName.Org.ToString()).ToString()), ddlCLIN);

            List<Projects> list = new List<Projects>();

            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                list.Add(new Projects(SQLWrapper)
                {
                    ProjectID = Convert.ToInt32(dr["TYPE_ID"].ToString()),
                    Title = dr["TITLE"].ToString(),


                });
            }


            var dsResult = list;//.ToDataSourceResult(request);
            return new JsonResult(dsResult);
            
            
        }
        public JsonResult OnGetCLINS()
        {
            Projects Projdb = new Projects(SQLWrapper);
            DataSet ds = new DataSet();
            ds = Projdb.SelectRecordsForDropDown("TITLE", Int32.Parse(HttpContext.Session.GetInt32(Globals.SessionName.Org.ToString()).ToString()));

            List<Projects> list = new List<Projects>();

            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                list.Add(new Projects(SQLWrapper)
                {
                    ProjectID = Convert.ToInt32(dr["PROJECT_ID"].ToString()),
                    Title = dr["TITLE"].ToString(),
    

                });
            }

           
            var dsResult = list;//.ToDataSourceResult(request);
            return new JsonResult(dsResult);
        }                                                                          

[Mitchell]

Adding the following script passes the parent selected item id to the child event however it then causes another issue.  Now with this the Parent dropdownlist has all the items cleared except the first item.

<script>
    function getSelectedCLIN() {
        return {
            ddlCLIN: $("#ddlCLIN").data("kendoDropDownList").value()
        };
    }

    $(document).ready(function () {
        $("#ddlCLIN").kendoDropDownList({
            change: function () {
                $("#ddlCLINTaskType").data("kendoDropDownList").enable(true);
                $("#ddlCLINTaskType").data("kendoDropDownList").value("");
                $("#ddlCLINTaskType").data("kendoDropDownList").dataSource.read();
            }
        });
    });
</script>

[Aleksandar]

Hi Mitchel,

In order for the child DropDownList to pass additional data to the endpoint add a data handler function to the read configuration. The Data handler should return the value of the parent DropDownList, for example:

            <kendo-dropdownlist name="ddlCLIN"  datatextfield="Title" datavaluefield="ProjectID" >
                    <datasource type="DataSourceTagHelperType.Custom">
                        <transport>
                            <read url="/LogEditor?handler=CLINS" />
                        </transport>
                    </datasource>
                </kendo-dropdownlist>


            <kendo-dropdownlist name="ddlCLINTaskType" cascade-from="ddlCLIN" datatextfield="Title" datavaluefield="ProjectID">
                <datasource type="DataSourceTagHelperType.Custom">
                    <transport>
                        <read url="/LogEditor?handler=CLINTaskTypes"  data="dataHandler"/>
                    </transport>
                </datasource>
            </kendo-dropdownlist>

<script>
    function dataHandler(){
        return {
            ddlCLIN: $("#ddlCLIN").val()
        }
    }
</script>

 

The handler(OnGetCLINTaskTypes) should expect the additional parameter ddlCLIN. There is no need to call $("#ddlCLIN").kendoDropDownList(...) on document.ready, as that would cause duplicate initialization and lead to undesired behavior. Refer to the Cascading DropDownLists demo for further details on the implementation of the functionality. Make sure to click on the View Source tab and select TagHelpers for the relevant details:

I hope this helps.

Regards,
Aleksandar
Progress Telerik

[Mitchell]

I have tried your solution and it calls public JsonResult OnGetCLINTaskTypes(int? ddlCLIN) on the load of the page, but afterwards every time I select a selection in the parent dropdownlist it does not call the child event JsonResult OnGetCLINTaskTypes(int? ddlCLIN)...

[Aleksandar]

I have missed that the server-operation for the cascading DropDownList is not set to true. Without this configuration the child DropDownList will not make additional requests. Here is a screencast of the expected behavior.

<kendo-dropdownlist name="ddlCLIN" datatextfield="Title" datavaluefield="ProjectID" option-label="Select...">
    <datasource type="DataSourceTagHelperType.Custom">
        <transport>
            <read url="/Index?handler=CLINS" />
        </transport>
    </datasource>
</kendo-dropdownlist>


<kendo-dropdownlist name="ddl2" cascade-from="ddlCLIN" datatextfield="Title" datavaluefield="ProjectID" auto-bind="false" enable="false" option-label="Select...">
    <datasource type="DataSourceTagHelperType.Custom" server-filtering="true">
        <transport>
            <read url="/Index?handler=CLINTaskTypes" data="dataHandler" />
        </transport>
    </datasource>
</kendo-dropdownlist>

<script>
    function dataHandler() {
        return {
            ddlCLIN: $("#ddlCLIN").val()
        }
    }
</script>

Attached you will find a runnable sample, for reference.