Cascading DropDownList WITHOUT ServerFiltering

6 posts, 1 answers
  1. jasonxz
    jasonxz avatar
    17 posts
    Member since:
    Jul 2012

    Posted 26 Jun 2013 Link to this post

    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.
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 27 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. jasonxz
    jasonxz avatar
    17 posts
    Member since:
    Jul 2012

    Posted 27 Jun 2013 Link to this post

    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.
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 01 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. jasonxz
    jasonxz avatar
    17 posts
    Member since:
    Jul 2012

    Posted 01 Jul 2013 Link to this post

    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;
  7. Answer
    jasonxz
    jasonxz avatar
    17 posts
    Member since:
    Jul 2012

    Posted 01 Jul 2013 Link to this post

    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;
Back to Top
UI for ASP.NET MVC is VS 2017 Ready