Cascading Dropdown posts for results twice when filter returns no results

1 posts, 0 answers
  1. Wayne
    Wayne avatar
    1 posts
    Member since:
    Oct 2012

    Posted 05 Nov 2012 Link to this post

    In this case, I've got a 'vendor' dropdown that cascades off of a 'companies' dropdown. Within the datasource, it is possible for the vendor query to return no results for a selected company.

    If I select a company that is associated with vendors, the vendor dropdown gets populated with the applicable values. If I then click on the vendor dropdown i can select values. This behavior is perfect.

    If I select a company that has no vendors, I would expect the vendors dropdown to have no choices (or a default choice). However in this case, the vendor dropdown request it's data (/Vendors/Get?companyCode=33), gets no records and then posts a second time to the endpoint. Also the vendor dropdown remains stale, containing any items from a previous cascade operation. Furthermore, if I click on the Vendors dropdown, it initializes two more requests to the data (causing the spinning indicator to appear twice quickly) and stops.

    Has anyone run into this double posting on no records issue? See source code below.

    <input id="CompanyCode"
           data-textfield="ItemText"
           data-valuefield="ItemValue"
           data-endpoint="http://localhost:8888/Customers/Get"
           data-selected="40"/>
            
    <input id="VendorId"
           data-textfield="ItemText"
           data-valuefield="ItemValue"
           data-endpoint="http://localhost:8888/Vendors/Get"
           data-cascade="CompanyCode"/>
            
    <script src="Content/js/jquery.min.js"></script>
    <script src="Content/js/kendo.all.min.js"></script>
    <script>
        $(function(){
            $('#CompanyCode').each(function(){
                var target = $(this);
                 
                var options = {
                    dataTextField: target.data('textfield'),
                    dataValueField: target.data('valuefield'),
                    dataSource: {
                        transport: {
                            read: target.data('endpoint')
                        }
                    }
                }
     
                target.kendoDropDownList(options);
            });
     
            $('#VendorId').each(function(){
                var target = $(this);
                target.kendoDropDownList( {
                    dataTextField: target.data('textfield'),
                    dataValueField: target.data('valuefield'),
                    dataSource: {
                        transport: {
                            read: target.data('endpoint'),
                            parameterMap: function(options, operation) {
                                return {
                                    companyCode: options.filter.filters[0].value
                                }
                            }
                        },
                        serverFiltering: true
                    },
                    cascadeFrom: target.data('cascade'),
                    autoBind: false
                });
            });
        });
    </script>
Back to Top