How to apply angular filter on a Angular-Kendo Dropdown list?

2
votes

Below is my data source which needs to be binded to two kendo drop down list. One is for Program and another for IForm. I need the filteration to be done in the dropdown itself.

$scope.programIFormList = new kendo.data.DataSource({
        data: [
                    {
                        Name: "Program1",
                        IsProgram: "true",
                        ProgramId: 1,
                        Status: 0,
                        PatientId: 1,
                        StartDate:"",
                        EndDate:""
                    },
                    {
                        Name: "Program2",
                        IsProgram: "false",
                        ProgramId: 2,
                        Status: 0,
                        PatientId: 1,
                        StartDate:"",
                        EndDate:""
                    }
                ]
    });

Below is html code:

 <div class="col-lg-2 col-md-4 col-sm-4 col-xs-4">
                    <select id="patient" kendo-drop-down-list k-data-text-field="'Name'" k-data-value-field="'PatientId'"  k-data-source="patientList" >                      
                    </select>
                </div>

                <div class="col-lg-2 col-md-4 col-sm-4 col-xs-4">
                    <select kendo-drop-down-list k-data-text-field="'Name'" k-data-value-field="'ProgramId'" k-data-source="programIFormList | filter:{IsProgram: true}" k-cascade-from="'patient'">
                    </select>
                </div>
                <div class="col-lg-2 col-md-4 col-sm-4 col-xs-4">
                    <select kendo-drop-down-list k-data-text-field="'Name'" k-data-value-field="'ProgramId'" k-data-source="programIFormList | filter:{IsProgram: false}"  k-cascade-from="'patient'">
                    </select>
                </div>

Here, I am trying to apply angular filter. But it's not working. How can this be achieved using Kendo Angular?

1
angularjskendo-uiangular-filterskendo-dropdown

1 Answers

0
votes

You can use this approach

angular.module("MyApp", [ "kendo.directives" ])
      .controller("FilterController", function($scope){


          $scope.programIFormList = new kendo.data.DataSource({
              data: [
                          {
                              Name: "Program3",
                              IsProgram: "true",
                              ProgramId: 1,
                              Status: 0,
                              PatientId: 1,
                              StartDate: "",
                              EndDate: ""
                          },
                          {
                              Name: "Program1",
                              IsProgram: "false",
                              ProgramId: 2,
                              Status: 0,
                              PatientId: 1,
                              StartDate: "",
                              EndDate: ""
                          }
              ],
              filter: [
                { field: "IsProgram", operator: "eq", value: "true" }

              ]
          });
      });