Filter Grid with Multiple Filters

[Allan]

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?

[Milena]

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

 

 

[Allan]

[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

 

 

[/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"
        }
    }
))

[Milena]

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

 

 

[Allan]

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?

[Milena]

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

 

 

[Allan]

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

[Ed]

Is the name Grid or #Grid? jQuery finds the former by $("#Grid"), the latter by $("##Grid").

[Konstantin Dikov]

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

[Ed]

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.

[Dnyaneshwar]

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

Thanks in advance.

[Petar]

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