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

sorting values inside multi filter checkbox

12 Answers 372 Views

Grid

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

sandy asked on 20 Jan 2021, 11:24 AM

untitled5053a564194b4dcd82537f0203454140.png

Hi ,
i want to sort values inside multi checkbox filter dropdown.

here is my grid functionality.

so actually my requirement is if user applies some filters on few columns inside grid. he wants to save his applied filters as default view when he again comes to that page. so here user will clicks save my view button , am saving those filters in database. so when user again comes to that page am loading those filters through java script code. below is my code. the below code is working fine means filters are applying to grid.

if i remove sorting code inside FilterMenuInit then grid is working fine except columns sorting functionality. if i include sorting code inside FilterMenuInit then sum of columns is not working. so i want like sorting multifilter check box values with checked while appling filter values in page load and sum of aggregate columns.

here am attaching image and project code . pls find it.

https://drive.google.com/file/d/1BigmLzF_12b2sFzANGrGWCWaA5j4gcBT/view?usp=sharing

12 Answers, 1 is accepted

answered on 29 Jan 2021, 04:48 PM

TimeControlReportEnhancements.zip

Hello, Sandy,

As promised I am getting back to you.

I managed to resolve the situation by providing a separate DataSource for the Multi checkbox filters. This is based on this Sort multi check filter article. Namely:

- Declare the DataSource and set it as the one the multi checkbox filter to use in the desired columns:

@(Html.Kendo().DataSource<TimeControlReportEnhancements.Models.TimeControlGrid>()
                .Name("filterSource")
                .Ajax(dataSource => dataSource
                   .Read(read => read.Action("GetAllEmployees", "Home"))
                   .ServerOperation(false)
            ))
..
columns.Bound(p => p.ProjectName.ProjectName).ClientTemplate("#=ProjectName.ProjectName#").Width(210).Filterable(ftb => ftb.Multi(true).Search(true).DataSource("filterSource")).EditorTemplateName("ProjectName");

- Handle the FilterMenuInit event to filter the data source:

    function filterMenuInit(e) {
        e.container.data("kendoPopup").bind("open", function () {
            filterSource.sort({ field: e.field, dir: "asc" });
        })
  }

Please find the project attached applying the above.

Regards,
Nikolay
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

answered on 11 Feb 2021, 11:35 AM

Hello Sandy,

Please accept my apologies for the delay.

Indeed, using a separate DataSource for the Multi checkbox filter triggers another request. However, in your case, the regular approach for sorting the filterMultiCheck data source does not bind the already checked boxes as the field is a nested one: ProjectName.ProjectName

    function filterMenuInit(e) {
        if (e.field === "ProjectName.ProjectName") {
            var filterMultiCheck = this.thead.find("[data-title='Project Name']").data("kendoFilterMultiCheck");
            filterMultiCheck.container.empty();
            filterMultiCheck.checkSource.sort({ field: e.field, dir: "asc" }); //e.field is ProjectName.ProjectName
            filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
            filterMultiCheck.createCheckBoxes();
        }

I recommend sticking to the approach of using a separate data source for the multi checkbox filter.

Regards,
Nikolay
Progress Telerik

answered on 07 Mar 2021, 02:04 PM

Hi Nikolay,
here is my solution to my question. here am posting bcs it will useful to anybody.

in filterMenuInit function first am retrieving checked values in multi checkbox container. after getting checked values am storing in some variable. after am sorting values in multi checkbox container. after sorting values then am doing check box checked activity using datasource filter method. below is my code.

function filterMenuInit(e) {
var FilterdValues = getGridFilterValues();
if (e.field === "ProjectName.ProjectName" || e.field === "Dept.DeptName" ) {
var title;
if (e.field === "ProjectName.ProjectName") {
title = "Project Name";
}
else if (e.field === "Dept.DeptName") {
title = "Dept CC";
}

var filterMultiCheck = this.thead.find("[data-title='" + title + "']").data("kendoFilterMultiCheck")
filterMultiCheck.container.empty();
filterMultiCheck.checkSource.sort({ field: e.field, dir: "asc" });

filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
filterMultiCheck.createCheckBoxes();
//applyMyFilters();
}
if (FilterdValues.length > 0) {
var filters = FilterdValues.split(',');
var firstField = filters[0];
var secondField = "";
var thirdField = "";
var fourthField = "";
var fifthField = "";
if (firstField != null && firstField != "") {
var dataSource = $("#Grid").data("kendoGrid").dataSource;
var _fltMain = [];
var _fltParent = { logic: "and", filters: [] };
var _flt = { logic: "or", filters: [] };
var _fltSecond = { logic: "or", filters: [] };
var _fltThird = { logic: "or", filters: [] };
var _fltFourth = { logic: "or", filters: [] };
var _fltFifth = { logic: "or", filters: [] };
var bool = false;
for (var i = 0; i < filters.length; i++) {
var filtercount = filters.length - 1;
if ((i % 3) == 0 && i < filtercount) {
if (filters[i] == firstField) {
_flt.filters.push({ field: filters[i], operator: filters[i + 1], value: filters[i + 2] });
}
else {
if (bool == false) {
_fltParent.filters.push(_flt);
bool = true;
}
if (secondField == "") {
secondField = filters[i];
}
else if (thirdField == "") {
thirdField = filters[i];
}
else if (fourthField == "") {
fourthField = filters[i];
}
else if (fifthField == "") {
fifthField = filters[i];
}
if (secondField == filters[i]) {
_fltSecond.filters.push({ field: filters[i], operator: filters[i + 1], value: filters[i + 2] });
thirdField = "";
fourthField = "";
fifthField = "";
}
else if (thirdField == filters[i]) {
//_fltParent.filters.push(_fltsecond);
//thirdField = filters[i];
_fltThird.filters.push({ field: filters[i], operator: filters[i + 1], value: filters[i + 2] });
fourthField = "";
fifthField = "";
}
else if (fourthField == filters[i]) {
_fltFourth.filters.push({ field: filters[i], operator: filters[i + 1], value: filters[i + 2] });
fifthField = "";
}
else if (fifthField == filters[i]) {
_fltFifth.filters.push({ field: filters[i], operator: filters[i + 1], value: filters[i + 2] });
}
else {

_fltParent.filters.push({ field: filters[i], operator: filters[i + 1], value: filters[i + 2] });
}
}
}
}
if (_fltSecond.filters.length > 0) {
_fltParent.filters.push(_fltSecond);
}
if (_fltThird.filters.length > 0) {
_fltParent.filters.push(_fltThird);
}
if (_fltFourth.filters.length > 0) {
_fltParent.filters.push(_fltFourth);
}
if (_fltFifth.filters.length > 0) {
_fltParent.filters.push(_fltFifth);
}
if (_fltParent.filters.length > 0) {
_fltMain.push(_fltParent);
}
else {
_fltMain.push(_flt);
}
dataSource.filter(_fltMain);
}
}
}

function getGridFilterValues() {
var dataSource = $("#Grid").data("kendoGrid").dataSource;
var filter = dataSource.filter();
let FilterdValues = [];
$.each(filter, function (i, filters1) {
if (filters1 != "and" && filters1 != "or") {
$.each(filters1, function (j, filters2) {
if (filters2.field != "" && filters2.logic != "and" && filters2.logic != "or") {
FilterdValues += [filters2.field, filters2.operator, filters2.value, ""];
}
else {
$.each(filters2, function (k, filters3) {
if (filters3 != "and" && filters3 != "or") {
$.each(filters3, function (l, filters4) {
if (filters4.field != "" && filters4.logic != "and" && filters4.logic != "or") {
FilterdValues += [filters4.field, filters4.operator, filters4.value, ""];
}
else {
$.each(filters4, function (m, filters5) {
if (filters5 != "or" && filters5.logic != "and") {
for (x = 0; x < filters5.length; x++) {
if (filters5[x].field != "") {
FilterdValues += [filters5[x].field, filters5[x].operator, filters5[x].value, ""];
}
}

}
});
}
});
}
});
}
});
}
});
return FilterdValues;
}

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

sorting values inside multi filter checkbox

12 Answers, 1 is accepted