Multiple Filters

[Allan]

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.

[Boyan Dimitrov]

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