Filter Grid with Multiple Filters

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

    Posted 31 Mar Link to this post

    Hello,

    I want to have multiple filters on my grid.  I've tried and tried but I can't get my logic to work.  I'm getting some really wierd results back.  I want to be able to filter on a company and by a type of vessel.  The results are wrong so I need to know where I have messed up in my code. 

    Here is my javascript

    function filterChange() {
        var grid = $("#Grid").data("kendoGrid"),
            ddl_owners = document.getElementById("owners"),
            ddl_vessels = document.getElementById("vessel_types"),
            value = this.value(),              
         if (value) {          
             grid.dataSource.filter(
                 {
                     logic: "and",
                     filters: [
                         {
                             field: "owner_company",
                             operator: "eq",
                             value: ddl_owners.value
                         },
                         {
                             field: "vessel_type",
                             operator: "eq",
                             value: ddl_vessels.value
                         }
                     ]
                 })
         } else {
             grid.dataSource.filter({});
         }
    }

    Here is my dropdown code (toolbar of the grid) for my dropdown filters.

    @(Html.Kendo().ComboBox()
       .Name("vessel_types")
       .Placeholder("-- Select Type --")
       .Suggest(true)
       .Filter("contains")
       .DataTextField("spot_name")
       .DataValueField("spot_name")
       .AutoBind(false)
       .Events(e => e.Change("filterChange"))
       .DataSource(ds =>
         {
             ds.Read("toolbar_Types", "Home");
         }))
     
    @(Html.Kendo().ComboBox()
       .Name("owners")
       .Placeholder("-- Select Owner --")
       .Suggest(true)
       .Filter("contains")
       .DataTextField("owner_name")
       .DataValueField("owner_name")
       .AutoBind(false)
       .Events(e => e.Change("filterChange"))
       .DataSource(ds =>
         {
             ds.Read("toolbar_Types", "Home");
         }))

    What am I doing wrong and how do I use multiple filters at one?
  2. Milena
    Admin
    Milena avatar
    224 posts

    Posted 04 Apr Link to this post

    Hello Allan,

    I would suggest you to follow the approach for combining filters,  which is demonstrated in this forum thread and verify if it works for your scenario.

    Regards,
    Milena
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Allan
    Allan avatar
    34 posts
    Member since:
    Aug 2015

    Posted 04 Apr in reply to Milena Link to this post

    Milena said:Hello Allan,

    I would suggest you to follow the approach for combining filters,  which is demonstrated in this forum thread and verify if it works for your scenario.

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

     

    Thanks for linking this, I tried to implement that code to test however it throws up and error everytime you try to make a selection for the combobox of :

    TypeError: $(...).getKendoDropDownList(...) is undefined

    Here is my script so far:

    function filterChange() {
        var grid = $("#Grid").data("kendoGrid"),
            filters = [],
            ddl_owners = $("#owners").getKendoDropDownList().value(),
            ddl_region = $("#locations").getKendoDropDownList().value();
          
            if (ddl_region) {
                filters.push(
                    {
                        field: "current_location_spotlist_id" && "spotlist_id",
                        operator: "eq",
                        value: ddl_region
                    }
                );
            }
            if (ddl_owners) {
                filters.push(
                    {
                        field: "owner_company",
                        operator: "eq",
                        value: ddl_owners
                    }
                );
            }
            grid.data("kendoGrid").dataSource.filter({
                logic: "and",
                filters: filters
            });
       }

    Here is the combobox in question

    @(Html.Kendo().ComboBox()
        .Name("locations")
        .Placeholder("-- Filter Location --")
        .Filter("contains")
        .DataTextField("Text")
        .DataValueField("Value")
        .Events(e => e.Change("filterChange"))
        .BindTo(new List<SelectListItem>() {
            new SelectListItem() {
                Text = "Location A",
                Value = "1"
            },
            new SelectListItem() {
                Text = "Location B",
                Value = "2"
            }
        }
    ))

    @(Html.Kendo().ComboBox()
        .Name("owners")
        .Placeholder("-- Filter Owner --")
        .Filter("contains")
        .DataTextField("Text")
        .DataValueField("Value")
        .Events(e => e.Change("filterChange"))
        .BindTo(new List<SelectListItem>() {
            new SelectListItem() {
                Text = "Owner A",
                Value = "1"
            },
            new SelectListItem() {
                Text = "Owner B",
                Value = "2"
            }
        }
    ))
  5. Milena
    Admin
    Milena avatar
    224 posts

    Posted 05 Apr Link to this post

    Hello Allan,

    The example is using DropDownList control, however in your scenario the control is ComboBox.

    So, the problematic code should be replaced with:
    ddl_owners =  $("#owners").getKendoComboBox().value()
    ddl_region = $("#locations").getKendoComboBox().value()

    Regards,
    Milena
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Allan
    Allan avatar
    34 posts
    Member since:
    Aug 2015

    Posted 06 Apr in reply to Milena Link to this post

    Oh yeah, woops.  Sadly though I'm still getting an error, this time it's:

    TypeError: grid.data is not a function
    grid.data("kendoGrid").dataSource.filter({

    -^

    Despite the fact that it is defined, it's saying it's not. Any thoughts on this?


  7. Milena
    Admin
    Milena avatar
    224 posts

    Posted 07 Apr Link to this post

    Hello,

    Can you verify if the right name of grid is set:
    var grid = $("#Name").data("kendoGrid")

    Please replace "Name" with the name of your grid.

    In case this does not help, you can isolate a small runnable project, which demonstrates the issue and we will investigate it locally. 

    Regards,
    Milena
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Allan
    Allan avatar
    34 posts
    Member since:
    Aug 2015

    Posted 07 Apr in reply to Milena Link to this post

    Yes the grid name is #Grid,  I have attached the project, please have a look and see what you think ASAP.  I look forward to hearing from you.

    https://www.dropbox.com/sh/xub1ub4l4ceuq3e/AABezbThtfy_mrdh3tYAyJjYa?dl=0

Back to Top
Kendo UI is VS 2017 Ready