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

sorting values inside multi filter checkbox

12 Answers 35 Views
Grid
This is a migrated thread and some comments may be shown as answers.
sandy
Top achievements
Rank 1
Iron
Veteran
sandy asked on 20 Jan 2021, 11:24 AM

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

Sort by
0
Nikolay
Telerik team
answered on 22 Jan 2021, 10:39 AM

Hi Sandy,

The returned data from the controller seems to contain duplicate items

Thus, upon applying filters with dataSource.filter(_fltMain) they are not applied correctly:

Could you please check the sample you shared and modify it so I can observe and investigate?

Looking forward t your reply.

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/.

0
sandy
Top achievements
Rank 1
Iron
Veteran
answered on 25 Jan 2021, 10:43 AM

Hi nikolay,

below is the link which contains updated code.

https://drive.google.com/file/d/1LiVwg0-no09s2vEZgLFzThzQYxXzObSo/view?usp=sharing

0
Nikolay
Telerik team
answered on 27 Jan 2021, 09:12 AM

Hello Sandy,

Please accept my apologies for this taking too long to resolve.

I downloaded the project from the provided link, unfortunately, once I try to unarchive it I got an error message. Could you please check on that?

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/.

0
sandy
Top achievements
Rank 1
Iron
Veteran
answered on 27 Jan 2021, 09:30 AM

Hi Nikolay,

Please find the below updated link.

https://drive.google.com/file/d/1kPRzmevDD1Enu73t2-LwVJtKF6O0xHAh/view?usp=sharing

0
Nikolay
Telerik team
answered on 29 Jan 2021, 09:21 AM

Hi Sandy,

Thank you for sharing the project. I confirm I was able to build and run it this time.

I am still working o nthe case and I will follow you up today.

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/.

0
Nikolay
Telerik team
answered on 29 Jan 2021, 04:48 PM

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/.

0
sandy
Top achievements
Rank 1
Iron
Veteran
answered on 03 Feb 2021, 09:47 AM

Hi Nikolay,

Thanks for your solution. but i think this solution is not correct solution. because calling same function twice is not good idea.

is there any way that we can copy grid data and assign it to another kendo data source.  like in above data source code is there any chance to clone grid data source to filterSource data source ?.

0
Nikolay
Telerik team
answered on 05 Feb 2021, 09:08 AM

Hello, sandy,

Just to let you know I am working on the case and will get back to you shortly.

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/.

0
sandy
Top achievements
Rank 1
Iron
Veteran
answered on 09 Feb 2021, 01:43 PM

Hi Nikolay,

Do we have any update on this query ?

0
Nikolay
Telerik team
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

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/.

0
sandy
Top achievements
Rank 1
Iron
Veteran
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;
    }
0
Nikolay
Telerik team
answered on 09 Mar 2021, 12:31 PM

Hello Sandy,

I am happy to hear you managed to resolve the situation.

Thank you very much for posting the solution you came up with here. I believe it will be helpful to others facing the same scenario.

Please let us know if anything new arises.

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/.

Tags
Grid
Asked by
sandy
Top achievements
Rank 1
Iron
Veteran
Answers by
Nikolay
Telerik team
sandy
Top achievements
Rank 1
Iron
Veteran
Share this question
or