This is a migrated thread and some comments may be shown as answers.

Filter Grid with Multiple Filters

11 Answers 500 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Allan
Top achievements
Rank 1
Allan asked on 31 Mar 2016, 01:35 PM

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?

11 Answers, 1 is accepted

Sort by
0
Milena
Telerik team
answered on 04 Apr 2016, 08:04 AM
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!
 
0
Allan
Top achievements
Rank 1
answered on 04 Apr 2016, 10:48 AM
[quote]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!
 

[/quote]

 

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"
        }
    }
))
0
Milena
Telerik team
answered on 05 Apr 2016, 10:52 AM
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!
 
0
Allan
Top achievements
Rank 1
answered on 06 Apr 2016, 09:44 AM

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?


0
Milena
Telerik team
answered on 07 Apr 2016, 08:35 AM
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!
 
0
Allan
Top achievements
Rank 1
answered on 07 Apr 2016, 09:16 AM

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

0
Ed
Top achievements
Rank 1
answered on 06 Feb 2019, 04:10 PM
Is the name Grid or #Grid? jQuery finds the former by $("#Grid"), the latter by $("##Grid").
0
Konstantin Dikov
Telerik team
answered on 08 Feb 2019, 05:51 AM
Hello Ed,

The "Name" value will be added as an "id" of the wrapping element, so in the example the name is set to "Grid":
.Name("Grid")


Best Regards,
Konstantin Dikov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ed
Top achievements
Rank 1
answered on 11 Feb 2019, 09:21 PM
I was specifically addressing Allan's post, where he said, "Yes the grid name is #Grid". I just wanted to make sure he knew there was a difference between .Name("Grid") and .Name("#Grid"). In the example code, jquery would resolve $("#Grid") as the element that rendered .Name("Grid") as <div id="Grid" ...>. If it were rendered as <div id="#Grid" ... >, jquery would not find $("#Grid") - it would have to be $("##Grid"). I know from experience.
0
Dnyaneshwar
Top achievements
Rank 1
answered on 20 Mar 2020, 02:20 PM

I want to implement same code in angular 7 so can you help me on this .

Thanks in advance.

0
Petar
Telerik team
answered on 24 Mar 2020, 08:46 AM

Hi Dnyaneshwar,

The current thread discusses approaches that use Kendo UI for jQuery and ASP.NET. As the Kendo UI for Angular is a different suite, I would recommend submitting a support ticket with product "Kendo UI for Angular" with the details about the scenario you want to implement.

Regards,
Petar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Data Source
Asked by
Allan
Top achievements
Rank 1
Answers by
Milena
Telerik team
Allan
Top achievements
Rank 1
Ed
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Dnyaneshwar
Top achievements
Rank 1
Petar
Telerik team
Share this question
or