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

Custom Filter with Checkboxes

30 Answers 2271 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Flo
Top achievements
Rank 1
Flo asked on 11 Sep 2014, 01:21 PM
Hy,

I've got a Column with String Values!

Our Customer wants to filter this Column with Checkboxes (like it is in Excel > look 'filter_checkbox-excel.png' attached) based on the Values of the Column and with "or"-Functionality! I've added a Screenshot oft the Design (filter_checkbox-web.png), how it should look like - can anyone say if this is possible?

greetings from Austria
Flo

30 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 15 Sep 2014, 08:24 AM
Hello Flo,

This is not supported but it is possible to implement it by using filterable ui function or the filterMenuInit event to modify the filter menu elements. I created an example that demonstrates one possible implementation with the filterMenuInit event.

Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Flo
Top achievements
Rank 1
answered on 15 Sep 2014, 09:22 AM
Thank you Daniel!

Your Code is working partly in my solution "out of the box"! I just had to do some adjustments!

Greetings from Austria
Flo
0
Thien
Top achievements
Rank 1
answered on 19 Sep 2014, 07:13 AM
Hi Daniel,

How would you take this a step further to update the filter list in an editable grid where the user creates, edits, or delete an item?
0
Daniel
Telerik team
answered on 23 Sep 2014, 07:47 AM
Hi,

I created an example that demonstrates how to update the filter items when the grid dataSource is changed.

Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Thien
Top achievements
Rank 1
answered on 23 Sep 2014, 05:11 PM
Thank you for this! This is great.
0
Thien
Top achievements
Rank 1
answered on 03 Oct 2014, 07:06 PM
Hi Daniel,

Do you know if there is a filter menu close event? I need to reset the checkboxes in case the user changes their selections but then never clicks on the filter or clear button and just closes the menu.
0
Daniel
Telerik team
answered on 07 Oct 2014, 02:07 PM
Hello,

The popup used by the filter menu has a close event:
function initCheckboxFilter(e) {           
    e.container.data("kendoPopup").bind("close", function (e) {
        //your logic
    });


Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Thien
Top achievements
Rank 1
answered on 09 Oct 2014, 05:45 PM
Hi Thanks for this. I swear I tried this before and it didn't work, but your code is working. I am running into another issue however. I am implementing these filter menu drop downs on multiple columns and not just 1 column as you have in the example. When I had local data for the dataSource everything was working but now that I have live data coming the server, the filters are not quite working correctly. The filters work but they are only filtering from checkboxes from 1 column.

Screen 1 shows filtering of the column "Model"

Screen 2 should have filtering for both "Model" and "Software" but as you can see from the query string parameters its only showing filters for "Software". This filter should return 0 items as the 2 Models checked do not have software with that version.

Your source code I am using:
e.container.find("[type='submit']").click(function (e) {
  var filter = dataSource.filter() || { logic: "and", filters: [] };
  var fieldFilters = element.find(":checkbox:checked").map(function (idx, input) {
    return {
      field: field,
      operator: "eq",
      value: input.value
    };
  });
  if (fieldFilters.length) {
    removeFiltersForField(filter, field);
    filter.filters.push({
      logic: "or",
      filters: fieldFilters
    });
    dataSource.filter(filter);
  }
});

0
Thien
Top achievements
Rank 1
answered on 09 Oct 2014, 06:33 PM
Also I am using MVC wrappers for getting the data. Here's the code for the grid

@(Html.Kendo().Grid<EndpointViewModel>()
     .Name("grid-inventory")
     .Columns(columns =>
     {
         columns.Bound(inventoryList => inventoryList.SiteName).Title(PhoenixLocalization.Inventory.List.Site).Filterable(false);
         columns.Bound(inventoryList => inventoryList.SiteName).Title(PhoenixLocalization.Inventory.List.Type).Filterable(false);
         columns.Bound(inventoryList => inventoryList.EndpointModelName).Title(PhoenixLocalization.Inventory.List.Model);
         columns.Bound(inventoryList => inventoryList.OwnerName).Title(PhoenixLocalization.Inventory.List.Owner).Filterable(false);
         columns.Bound(inventoryList => inventoryList.SoftwareVersionTypeName).Title(PhoenixLocalization.Inventory.List.Software);
         columns.Bound(inventoryList => inventoryList.SerialNumber).Title(PhoenixLocalization.Inventory.List.SN).Filterable(false);
         columns.Bound(inventoryList => inventoryList.E164Number).Title(PhoenixLocalization.Inventory.List.E164).Filterable(false);
         columns.Bound(inventoryList => inventoryList.IpAddress).Title(PhoenixLocalization.Inventory.List.IP).Filterable(false);
         columns.Bound(inventoryList => inventoryList.ISDNVideoNumber).Title(PhoenixLocalization.Inventory.List.ISDN).Filterable(false);
         columns.Bound(inventoryList => inventoryList.H323Alias).Title(PhoenixLocalization.Inventory.List.H323).Filterable(false);
         columns.Bound(inventoryList => inventoryList.GKIp).Title(PhoenixLocalization.Inventory.List.GKIP).Filterable(false);
         columns.Bound(inventoryList => inventoryList.SipServerIP).Title(PhoenixLocalization.Inventory.List.SIP).Filterable(false);
         columns.Bound(inventoryList => inventoryList.Managed).Title(PhoenixLocalization.Inventory.List.Managed).Filterable(false);
         columns.Bound(inventoryList => inventoryList.SipURI).Title(PhoenixLocalization.Inventory.List.SIPURI).Filterable(false);
     })
     .Sortable()
     .Filterable()
     .Events(e => e.FilterMenuInit("initCheckboxFilter"))
     .DataSource(dataSource => dataSource
           .WebApi()
           .Model(model =>
           {
               model.Id(inventoryList => inventoryList.Id); // Specify the property which is the unique identifier of the model
               model.Field(inventoryList => inventoryList.Id).Editable(false); // Make the ProductID property not editable
           })
               .Create(create => create.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "EndpointKds" }))) // Action invoked when the user saves a new data item
                   .Read(read => read.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "EndpointKds" }))) // Action invoked when the grid needs data
                          
     )
     .Pageable()
       )
0
Daniel
Telerik team
answered on 13 Oct 2014, 11:16 AM
Hello,

I am not sure what could be causing the described problem and at least when I tested with the example, the filtering was working correctly for multiple fields. Could you check this updated version and let me know if I am missing something?

Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Thien
Top achievements
Rank 1
answered on 13 Oct 2014, 05:01 PM
Hi Daniel,

It seems when I set ServerOperation to false, this fixes it, however for our situation we need to have this set as True as we only want to send back data that is in the page view and not all data.
0
Chris
Top achievements
Rank 1
answered on 15 Oct 2014, 05:53 AM
Daniel,

First off this is great.   It works as expected if filtering on that column alone

I have issues when it comes to multi-column sorting.  If I sort by column A then by the StatusEnum column I can see that the Ajax grid is posting two times,  first with the correct filters (Column A,  and column StatusEnum) and gets a valid result.  but then immediately does another ajax call only with column A filters?

The same thing happens if I pre-filter "statusEnum":
.Filter(filter => filter.Add(p => p.StatusEnum).IsNotEqualTo(Enums.StatusEnums.Cancelled)

It initials loads with only cancled,  then if I change the filter it does two ajax calls,  first what my new selection is,  second the original filter.

Here is the filter js:
function onFilterMenuInit(e) {
        if (e.field == "StatusEnum") {
            initCheckboxFilter.call(this, e);
        }
    }

    function initCheckboxFilter(e) {
        var grid = $("#Tasks").data("kendoGrid");
        var field = e.field;
        var checkboxesDataSource = new kendo.data.DataSource({
                data: [
                  { Label: "Not Started", Enum: 0 },
                  { Label: "On Hold", Enum: 1 },
                  { Label: "Complete", Enum: 2 }
                ]
        });


        var helpTextElement = e.container.children(":first").children(":first");
        helpTextElement.nextUntil(":has(.k-button)").remove();
        var element = $("<div class='checkbox-container'></div>").insertAfter(helpTextElement).kendoListView({
            dataSource: checkboxesDataSource,
            template: "<div><label><input type='checkbox' value='#:Enum#'/> #:Label#</label></div>"
        });
       
        
        e.container.find("[type='submit']").click(function (e) {

            var filter = grid.dataSource.filter() || { logic: "and", filters: [] };

            var fieldFilters = element.find(":checkbox:checked").map(function (idx, input) {
                return {
                    field: field,
                    operator: "eq",
                    value: input.value
                };
            });
            if (fieldFilters.length) {
                removeFiltersForField(filter, field);
                filter.filters.push({
                    logic: "or",
                    filters: fieldFilters
                });
                
                grid.dataSource.filter(filter);
            }
        });
    }

    function removeFiltersForField(expression, field) {
        if (expression.filters) {
            expression.filters = $.grep(expression.filters, function (filter) {
                removeFiltersForField(filter, field);
                if (filter.filters) {
                    return filter.filters.length;
                } else {
                    return filter.field != field;
                }
            });
        }
    }

0
Chris
Top achievements
Rank 1
answered on 15 Oct 2014, 05:55 AM
I had a typo...  I said sort,  instead of filtering.

I have issues when it comes to multi-column filtering.  If I filter by column
0
Daniel
Telerik team
answered on 15 Oct 2014, 04:37 PM
Hi,

Thien

If server operations are enabled then the dataSource will have the data only for the current page and filters so if all items should be shown in the checkboxlist then you should make a separate request to get all items. The filter should still work as expected for multiple columns. I attached a sample MVC project which uses server operations and seems to work as expected. Let me know if I am missing something.

Chris

I couldn't reproduce the multiple requests. Could you provide a runnable sample?

Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Thien
Top achievements
Rank 1
answered on 15 Oct 2014, 05:39 PM
Hey Daniel,

I believe you are having the same issue that I am having however its just being masked by the data. As a quick replication :- 

Select a filter on Endpoint Model Name as 3 4 and 5 
Then on Software Version Type Name select 4

This correctly filters to just one item (item 4) however if you remove the item 4 filter we should then have items 3,4,5 appear since they were added as filters, unfortunately however they revert to the full dataset. 

The problem I am seeing is that when you have two filters set and ServerOperation is true the DataSource does not return the list of filters and only applies the most recent filter instead of all filters. 

Thanks 
Thien
0
Daniel
Telerik team
answered on 17 Oct 2014, 12:06 PM
Hi Thien,

Thank you for pointing out the issue. It seems that the default filter menu submit handler will still clear the filters for the field if there are not any values in the expected inputs. I attached an updated version of the project that stops the default handler and manually closes the popup which should resolve the problem.

Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Thien
Top achievements
Rank 1
answered on 17 Oct 2014, 05:46 PM
Hi Daniel,

Thanks for this fix. We also found a fix by adding a return false at the end of Submit button handler event.
0
Chris
Top achievements
Rank 1
answered on 18 Oct 2014, 03:48 AM
This is perfect,  this solves the double posting issue I was having!

Do you know how I can make it auto do this for any enum?  Currently if I have an enum the telerik grid makes filters that are a dropdown of the enum options.  I would like any enum to automatically make this check box filter option,  giving a check box for each possible enum.
0
Daniel
Telerik team
answered on 21 Oct 2014, 03:09 PM
Hello,

The grid treats enumerations the same way as foreignkey fields so you could check if the grid column has a values option in order to automatically initialize a checkbox filter in this scenario e.g.
function onFilterMenuInit(e) {
    var field = e.field;
    var columns = this.columns;
    var column;
    for (var idx = 0; idx < columns.length; idx++) {
        if (columns[idx].field == field) {
            column = columns[idx];
            break;
        }
    }
 
    if (column.values) {
        //init checkbox filter
    }
}



Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Rajasekar Nammalvar
Top achievements
Rank 1
answered on 29 Apr 2015, 10:47 AM

I have faced the same problem that Thein has faced like the following, 

I need to reset the checkboxes in case the user changes their selections but then never clicks on the filter or clear button and just closes the menu.

I am not sure how we can reset the user changed checkboxes unless user clicks the Fliter or Clear button. Is it possible to do with the close event as described,

function initCheckboxFilter(e) {               
e.container.data("kendoPopup").bind("close"function (e) {        
//your logic    
});

0
Rajasekar Nammalvar
Top achievements
Rank 1
answered on 01 May 2015, 11:03 AM

I have fixed the Issue: Reset the checkboxes in case the user changes their selections but then never clicks on the filter or clear button and just closes the menu.

Telerik Example: http://dojo.telerik.com/IWudI

I have taken the code example from the above telerik link & modified the following,

function initCheckboxFilter(e) {
 var popup = e.container.data("kendoPopup");
 var dataSource = this.dataSource;
 var field = e.field;
 var checkboxesDataSource = new kendo.data.DataSource({
                     data: uniqueForField(dataSource.data(), field)
 });
 e.container.data("kendoPopup").bind("close", function (e) {
   checkboxesDataSource.data(uniqueForField(dataSource.data(),field));
   var appliedFilter = dataSource.filter();
   if (appliedFilter != null && appliedFilter != undefined) {
   for (i = 0; i < appliedFilter.filters.length; i++) {
       var appliedFiltersChild = appliedFilter.filters[i];
       for (j = 0; j < appliedFiltersChild.filters.length; j++) {
             if (appliedFiltersChild.filters[j].field == field)
                 $("div[class='k-animation-container'] input[type='checkbox'][value='" + appliedFiltersChild.filters[j].value + "']").prop('checked', true);
       }
   }
 }   });
}

0
Rajasekar Nammalvar
Top achievements
Rank 1
answered on 01 May 2015, 11:05 AM

I have fixed the Issue: Reset the checkboxes in case the user changes their selections but then never clicks on the filter or clear button and just closes the menu.

Telerik Example: http://dojo.telerik.com/IWudI

I have taken the code example from the above telerik link & modified the following,

function initCheckboxFilter(e) {
 var popup = e.container.data("kendoPopup");
 var dataSource = this.dataSource;
 var field = e.field;
 var checkboxesDataSource = new kendo.data.DataSource({
                     data: uniqueForField(dataSource.data(), field)
 });
 e.container.data("kendoPopup").bind("close", function (e) {
   checkboxesDataSource.data(uniqueForField(dataSource.data(),field));
   var appliedFilter = dataSource.filter();
   if (appliedFilter != null && appliedFilter != undefined) {
   for (i = 0; i < appliedFilter.filters.length; i++) {
       var appliedFiltersChild = appliedFilter.filters[i];
       for (j = 0; j < appliedFiltersChild.filters.length; j++) {
             if (appliedFiltersChild.filters[j].field == field)
                 $("div[class='k-animation-container'] input[type='checkbox'][value='" + appliedFiltersChild.filters[j].value + "']").prop('checked', true);
       }
   }
 }   });
}

0
HungReo
Top achievements
Rank 1
answered on 19 Apr 2016, 09:52 PM

Hi,

Would it be possible to make the multi-checkbox filter checked by default, i.e. similar to what excel does? 

0
Daniel
Telerik team
answered on 22 Apr 2016, 07:16 AM
Hi,

You can apply the initial state in the template:
template: "<div><input type='checkbox' checked='checked' value='#:" + field + "#'/>#:" + field + "#</div>"


Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Rahul
Top achievements
Rank 1
answered on 01 Apr 2019, 11:36 PM

Hi Daniel,


I am trying to create a multi checkbox filter for a Kendo grid column. For this feature I am using "multi:true" property on the column's filterable. I also want to use the "ui" callback function (filterable:ui) which does not seem to work when I have the "multi:true" property set. If I remove this property, the "ui:function(e){}" gets called.

Is there a way I can use both these together? -  https://dojo.telerik.com/EcUdaFeT/5 

0
Viktor Tachev
Telerik team
answered on 03 Apr 2019, 11:25 AM
Hi Rahul,

Generally the filterable.ui setting is used when customizing the filter for a given Grid column. For example when you would like to use a different input in the filter menu. 

With that said, would you elaborate in more detail what is the functionality you would like to implement? If we have better understanding of your goal we will be able to provide specific suggestions on how it can be implemented.

Regards,
Viktor Tachev
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
Shawn
Top achievements
Rank 2
answered on 16 Aug 2019, 09:00 AM

Hi Daniel.

I how can I achieve this when I have column menu specified on the grid?

I've found this post (https://www.telerik.com/forums/filtermenuinit-event-not-fired) that says to use columnMenuInit instead.  But when I do so, I don't seem to have the same access to the Filter Container as your example demonstrates? 

0
Viktor Tachev
Telerik team
answered on 20 Aug 2019, 06:26 AM

Hello Shawn,

 

When you specify filterable.ui for a Grid column the customized filter will be used with filter menu and column menu. There is no need to handle other events in this case. Check out the example below that illustrates how you can customize the filters when column menu is enabled.

https://dojo.telerik.com/aNAWEnev

 

Regards, Viktor Tachev
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
Len
Top achievements
Rank 1
answered on 16 Sep 2020, 07:18 PM
How are the checkboxes retaining their selected state when the element is re-built when it it is opened?
0
Viktor Tachev
Telerik team
answered on 17 Sep 2020, 12:29 PM

Hi Len,

 

I guess that you are addressing the checboxes shown in the column menu in the previous example. 

When the column menu is opened the internal logic that is responsible for showing it considers what columns are visible and shows the respective checkboxes as checked.

 

In case you have something else in mind please elaborate in more detail on what it is.

 

Regards,
Viktor Tachev
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Tags
Grid
Asked by
Flo
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Flo
Top achievements
Rank 1
Thien
Top achievements
Rank 1
Chris
Top achievements
Rank 1
Rajasekar Nammalvar
Top achievements
Rank 1
HungReo
Top achievements
Rank 1
Rahul
Top achievements
Rank 1
Viktor Tachev
Telerik team
Shawn
Top achievements
Rank 2
Len
Top achievements
Rank 1
Share this question
or