Databound Function in KendoDropdownList

In this article, I am going show you how we can call any javascript’s function after ajax request in Kendo DropdownList or we can say databound functionality in Kendo DropdownList.

Kendo DropdownList tool provides very beautiful look and effects and there are many different ways of binding options are available like you can bind data with ajax and also make default dropdown to Kendo DropdownList and Kendo also provides some cool api for this tool.

Actually the question is why I needed a DataBound functionality of Kendo DropdownList?

What I was doing like I was trying to populate the record in the kendo DropdownList according to the value I had, I tried to achieve this by several ways( like making default dropdown to KendoDropdownList etc.) but none of them was working as per my requirement, I don’t know what was the problem. So instead finding the root of the problem (which I usually don’t do this because I don’t had enough time to find why its happening), so I decided to implement the same on client side(with the help of jquery).

All right, now I had decided to do same with jquery but next challenging thing was in my way that find a way to call jquery function after data bound in Kendo DropdownList, so I started finding the solution in forum of  Telerik, fortunately  I finally came with solution(whew) that was requestEnd  property in Kendo DropdownList.

Solution is quite simple, but hard thing was like they’re not providing these kind of support on their demo page,  I also checked their online demos and they’re not providing any demo related to this. So I wasted to much time to find the right solution. Click here to check online demos. But good thing is finally I had a solution and which is working fantastically.

Complete example of data bound functionality are as follows:

$("#products").kendoDropDownList({
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    dataSource: {
        transport: {
            read: {
                dataType: "jsonp",
                url: "http://demos.telerik.com/kendo-ui/service/Products",
            }
        },							
        requestEnd: function (e) {
            $("#ProductIcon").data('kendoDropDownList').value("@Model.ProductIcon");
        }
    }
});

Hope, this will also useful for you.
Enjoy.