[Solved] Mvvm databinding on Dropdown for Filter Row of Grid

[Lance]

Hi,

I am writing a Kendo SPA application that uses MVVM.  I have a Kendo Grid and want to take advantage of the Filter Row capabilities.  I want to set up a couple of the column filters to be dropdownlists that are databound to data from a function in the ViewModel.  I have tried all different combinations and haven't been able to get it to work.  I can create a template function:  

template: function (element)
         {
            return element.element.kendoDropDownList({
                dataSource: ["EquipmentAcquisition", "EquipmentLoan"]
               });
         }
This works only if I list the values of the datasource explicitly as above.  If I replace ["EquipmentAcquisition", "EquipmentLoan"] 

with the name of the function in the viewmodel that returns an array it doesn't work.  I tried

template: kendo.template($("#Script1").html()) 

    <script id="Script1" type="text/x-kendo-template">
       <div data-role="dropdownlist" data-bind="source: requestTypesSource"></div>
    </script>

but this doesn't work either. 

Please can you help me achieve this?

The kendo version I am using is 2014.3.1119.

Thanks

[Petur Subev]

Hello Lance,

This cannot be achieved. The filter-row itself is bound through MVVM to a model that on change actually calls the dataSource.filter() method with the corresponding method. And one HTML piece could only be bound to a single model.

Kind Regards,
Petur Subev
Telerik

 

 

[Lance]

Hi Petur,

I've managed to achieve what I wanted and thought I would post in case it helps anyone else and also so you can let me know if you foresee any issues with this approach.

On my html I define my filter columns as such:

                        {"field": "RequestType", "title": "Request Type", "width": "90px", filterable: {
                                cell: {
                                        template: function (element)
                                                  {
                                                      return element.element.kendoDropDownList({
                                                        
                                                      });
                                                  }
                                }}},

and on the Show method of my view I add the following code to bind the filter dropdowns:

            show: function (e)
            {
                var fc = $("[data-role=filtercell][data-field=RequestType]");
 
                var ddl = fc.find("[data-role=dropdownlist]").getKendoDropDownList();
                ddl.dataSource.data(commondatadf.getRequestTypes());
             }