Multiple Filters

2 posts, 0 answers
  1. Allan
    Allan avatar
    34 posts
    Member since:
    Aug 2015

    Posted 29 Feb 2016 Link to this post

    Hello,

    Can someone offer some help with my grid.  I want to add multiple dropdown filters which use logic AND.  So far however nothing is working.

    Here is my code.

    @(Html.Kendo().Grid<Range_Sliders_Again.Models.tbl_vessels>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.vessel_name).Title("Vessel Name");
            columns.Bound(c => c.vessel_type).Title("Type");
            columns.Bound(c => c.spotlist_dp).Title("DP");
            columns.Bound(c => c.spotlist_bhp).Title("BHP");
            columns.Bound(c => c.current_location_spotlist_id).Title("Spotlist Location ID");
            columns.Bound(c => c.spotlist_id).Title("Spotlist ID");
            columns.Bound(c => c.spotlist_deck).Title("Deck");
            columns.Bound(c => c.spotlist_bp).Title("BP");
        })
        .Pageable()
        .Deferred()
        .ToolBar(toolbar => { toolbar.Template(@<text>
          <label class="type-label" for="type">Owner:</label>
          @(Html.Kendo().DropDownList()
              .Name("ddl_type")
              .OptionLabel("All")
              .DataTextField("spot_name")
              .DataValueField("spot_name")
              .AutoBind(false)
              .Events(e => e.Change("filters"))
              .DataSource(ds =>
              {
                  ds.Read("vessel_type", "Spotlist");
              }))
           @(Html.Kendo().DropDownList()
              .Name("ddl_location")
              .OptionLabel("All")
              .DataTextField("Text")
              .DataValueField("Value")
              .AutoBind(false)
              .Events(e => e.Change("filters"))
              .BindTo(new List<SelectListItem>() {
                  new SelectListItem() {
                      Text = "Norway",
                      Value = "2"
              },
               new SelectListItem() {
                      Text = "Aberdeen",
                      Value = "1"
               },
                new SelectListItem() {
                      Text = "Brazil",
                      Value = "7"
                }
              })
              )
      </text>);                      
          })
     
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("tbl_vessels_Read", "Spotlist"))
            .Model(model => { model.Id(c => c.vessel_idx); })
        )
      )

    <script>
     
        function filters() {
     
            var ddl_type = document.getElementById("ddl_type");
            var ddl_location = document.getElementById("ddl_location");
     
            var value = this.value(),
                 grid = $("#Grid").data("kendoGrid");
     
            if (value) {
                grid.dataSource               
                    .filter([
                        {"logic":"and",
                            "filters":[
                                      
                        { field: "vessel_type", operator: "eq", value: ddl_type.value },
                        { field: "current_location_spotlist_id" && "spotlist_id", operator: "eq", value: ddl_location.value
                        }]},
                    );
                } else {
                grid.dataSource.filter({});
            }
        }
    </script>

    I seperated the dropdowns with a comma but it's still only fitlering by one dropdown box.
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 02 Mar 2016 Link to this post

    Hello Allan,

     

    Have you tried to add separate filter for  spotlist_id and current_location_spotlist_id fields as shown in the filter.filters article? 

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top