Parameter in Cascading DropDownList

[Nikhil]

Hi,  I am using cascading dropdown list and trying to pass a parameter to the function that I am calling to get the data from DB. Below is my code, whenever this function is called it passes NULL. Anyone has any idea why?

var categories = $("#categories").kendoDropDownList({
                        optionLabel: "Select category...",
                        dataTextField: "CategoryName",
                        dataValueField: "CategoryID",
                        dataSource: {
                            type: "odata",
                            serverFiltering: true,
                            transport: {
                                read: {
                                url: '@Url.Action("Getcategories")',

                                contentType: "application/json",
                                type: "GET"
                            }
                            }
                        }
                    }).data("kendoDropDownList");

                    var products = $("#products").kendoDropDownList({
                        autoBind: false,
                        cascadeFrom: "categories",
                        optionLabel: "Select product...",
                        dataTextField: "ProductName",
                        dataValueField: "ProductID",
                        dataSource: {
                            type: "odata",
                            serverFiltering: true,
                            transport: {
                                read: {

                                url: '@Url.Action("GetProduct")?Catid=' + $("#categories").val(),

                                contentType: "application/json",
                                type: "GET"

                            }
                        }
                    }).data("kendoDropDownList");

[Neli]

Hello Nikhil,

The provided configuration seems correct. You could also try to send the value of the categories DropDownList to the remote endpoint by using the transport.read.data option:

- https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.read#transportreaddata

For example:

dataSource: {
        serverFiltering: true,
        transport: {
            read: {
                dataType: "json",
                url: "/DropDownList/GetCascadeProducts",
                data: additionalParam
            }
        }
    }

function additionalParam(e) {    
    return {
        categories: $("#categories").val()        
    };
}

I also noticed that there should be an additional closing bracket in the products DropDownList configuration, so I would suggest you to double-check the brackets on your side.

I hope you will find the provided suggestion helpful.

Regards,
Neli
Progress Telerik