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

Filtering Kendo UI Grid using multiple dropdownlists

1 Answer 316 Views

Grid

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

Irving asked on 01 Oct 2018, 07:08 PM

I have a Kendo UI MVC grid that I am trying to filter based on value of the drop down lists selected. The filtering can be on any combination of the 3 dropdownlists. I have created a javascript function to do the filtering on a change event, and I see the 3 different filters while looking in the console. However when it gets to the controller only the first filter value is used.

function filterChange() {

var ddlBranchValue = $("#DropDownListBranches").data("kendoDropDownList").text();

var ddlDoorValue = $("#DropDownListDoor").data("kendoDropDownList").text();

var ddlApplicationValue = $("#DropDownListApplication").data("kendoDropDownList").text();

var gridListFilter = { filters: [] };

var gridDataSource = $("#trailerGrid").data("kendoGrid").dataSource;

if ($.trim(ddlBranchValue).length > 0) {

gridListFilter.filters.push({ field: "Branch", operator: "eq", value: ddlBranchValue });

}

if ($.trim(ddlDoorValue).length > 0) {

gridListFilter.filters.push({ field: "Door_Type", operator: "eq", value: ddlDoorValue });

}

if ($.trim(ddlApplicationValue).length > 0) {

gridListFilter.filters.push({ field: "Class_Code", operator: "eq", value: ddlApplicationValue });

}

gridDataSource.filter(gridListFilter);

gridDataSource.read();

}

@(Html.Kendo().Grid<Trailer>()

.Name("trailerGrid")

.EnableCustomBinding(true)

.Columns(columns =>

{

columns.Bound(trailer => trailer.Branch).Width(40).Title("Location Name")

.ClientFooterTemplate("Units Available: #=count#")

.ClientGroupHeaderTemplate("Location Name: <a href=availability-contact>#=value #</a> (Units Available: #=count#)");

//columns.Bound(trailer => trailer.Trailer_Id).Width(40);

columns.Bound(trailer => trailer.Model).Width(40);

columns.Bound(trailer => trailer.Length).Width(20);

columns.Bound(trailer => trailer.Door_Type).Width(20);

columns.Bound(trailer => trailer.Class_Code).Width(40).Title("Application");

columns.Bound(trailer => trailer.Super_Spec).Width(20);

columns.Bound(trailer => trailer.Major_Spec).Width(20);

})

//.Pageable(p => p.Numeric(false).PreviousNext(false))

.Sortable()

//.Scrollable(s => s.Height(200))

.Scrollable(sc => sc.Endless(true))

.Filterable(filterable => filterable

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.StartsWith("Starts with")

.IsEqualTo("Is equal to")

.IsNotEqualTo("Is not equal to")

)))

.Groupable()

.DataSource(dataSource => dataSource

.Ajax()

.Aggregates(aggregates => aggregates.Add(trailer => trailer.Branch).Count())

.Group(groups => groups.Add(trailer => trailer.Branch))

//.PageSize(20)

.Read(read => read.Url(Url.Content("/web-interface/trailers"))))

.Events(events => events.DataBound("dataBound")))

1 Answer, 1 is accepted

Accepted