Cascading DropDownList WITHOUT ServerFiltering

[jasonxz]

I have a DropDownList that, depending on another value, has anywhere from 5 to 15 values in it and there are about 20-25 total possible values.
It seems a bit ridiculous to go back to the server to get the proper data.
What I would like to do is render ALL of the items to the browser (as an array or something?) and do the filtering on the browser in javascript.
Has anyone done anything like this?  I can't find any examples of cascading DropDownLists that don't have ServerFiltering turned on.

[Georgi Krustev]

Hello Jason,

 
In order to achieve your goal you will need to serialize all required data. Thus the child widget will be able to filter the DataSource and show the corresponding child items. Check the FAQ section of this link.
You can also check this jsFiddle demo, which I prepared to show you how to define the child data.

Regards,
Georgi Krustev
Telerik

[jasonxz]

Hey Georgi!

May I first say how much I love Telerik's support!  Y'all rock!
Anyway, I appreciate the help.  But I left out one very significant piece of the puzzle:  these DropDownLists are inside a Kendo MVC Grid.
So, I'm trying to build this "child" control in an EditorTemplate and I can't see how to set the DataSource of the DropDownList to a client-side array.

[Georgi Krustev]

Hello again Jason,

Basically, you just need to put all required data in the ViewBag/ViewData and bind the widgets using BindTo method. Check this link for more information.
Please note that cascading functionality will work in a "inline" or "popup" editing mode.
 
Regards,
Georgi Krustev
Telerik

[jasonxz]

Thanks for the help Georgi!

What I ended up doing was, in the Edit event, getting a reference to the <input> element created and using the setDataSource to bind the kendoDropDownList to the values property of the Column in the Grid.  I figured by doing this, I would only be rendering the Array of options once, since the Grid is already doing it for me.

var container = e.container;

var grid = e.sender;

var input = $(container).find('input').first();

var id = input.attr('id');

switch (id) {

    case 'DowntimeCauseValue':

        $(input)

            .data("kendoDropDownList")

            //Set the DataSource to the Array used by the Grid

            //to display the proper text.

            .setDataSource(new kendo.data.DataSource({

                data: grid.columns[3].values

            }));

        break;


[jasonxz]

For the cascading DropDownList, though, I had to render the Array of options manually to the page because that was the only way I could find to get the property I needed for filtering to render.  So I just rendered an array to my scripts as a variable and used jQuery's grep function to do the filtering when calling the setDataSource in the Grid's Edit event.

case 'DowntimeDetail':
    var downtimeCause = grid.dataItem($(container).closest('tr')).DowntimeCauseValue;
    $(input)
        .data("kendoDropDownList")
        .setDataSource(new kendo.data.DataSource({
            data: jQuery.grep(detailsArray, function(n, i) {
                return downtimeCause == n.DowntimeCause;
            })
        }));
    break;