Parameter in Cascading DropDownList

1 Answer 18 Views
DropDownList
Nikhil
Top achievements
Rank 1
Nikhil asked on 09 Jul 2021, 12:16 PM

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");

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 14 Jul 2021, 06:12 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
DropDownList
Asked by
Nikhil
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or