CODEWITHSUNDEEP
jqueryasp.net-mvckendo-uikendo-asp.net-mvctelerik-mvc
Ben
Ben

Reputation: 1023

How to add a Telerik/Kendo DropdownList Dynamiclly with javascript?

I have recently been tasked with replacing all of the controls on an application with Telerik/Kendo UI components. In most cases, this is very easy, but I'm stumped on one issue:

In the exiting pre Kendo app, there is a form that has cascading dropdowns for categories, but there can be any number of dropdowns due to the fact that our admin program lets the admin create unlimited numbers of child categories - so every time a category is chosen, if there are subsequent child categories found (via an ajax call to the server) a new select element was created with javascript by concatenating strings together and appended it to the dom so the user could keep selecting additional child categories.

In a scenario where you know the number of dropdowns, it seems easy enough to cascade with Kendo, but I can't find any documentation on how to create a new Kendo Dropdownlist in javascript, set the values, etc. and then add it to the page. Is this possible?

I'm fiddling around with something like below, but no success yet... is this possible, either right on the client side or with some kind of ajax call that returns the dropdown from the server?

<script>
    $(document).ready(function () {
        $('#test-button').click(function () {
            var dropdown = new kendo.ui.DropDownList();
            //Do some configuring and set data...then add to page
            $('#new-dropdown').append(dropdown);
        })
    }
</script>

<button id="test-button">Test</button>
<div id="new-dropdown">

</div>

Upvotes: 0

Views: 2025

Answers (1)

Ben
Ben

Reputation: 1023

No sooner did I post this question did I figure out a solution. This is what I came up with in case anyone needs the same help I needed:

<script>
    $(document).ready(function () {
        $('#test-button').click(function () {
            $('#new-dropdown').append('<select id="dropdown"></select>');
            var dropdown = $("#dropdown").kendoDropDownList({
                name: "name"
                //etc...
            });
        })
    }
</script>

<button id="test-button">Test</button>
<div id="new-dropdown">

</div>

Upvotes: 0

Related Questions