Kendo UI Grid Filter - Select All checkbox not working after using filterMenuInit Event

[Rahul]

Hi Team,

I am using Kendo UI MVC Grid and trying to override the checkbox style using FontAwesome fonts. I thought of doing it through CSS alone but since we can't select parent selector through CSS I ended up using the filterMenuInit event. 

Grid column is configured using:-

.Filterable(f => f.Multi(true).Search(true));

I am adding another label to the rendered checkbox text using the below function:-

 function addCustomLabel(e) {
            var container = e.container;
            var allCheckboxes = $("input[type='checkbox']", container);
            $.each(allCheckboxes, function (id) {
                $(this).attr("id", 'chk' + id).addClass("blueCheckbox");
                var checkbox = $(this)[0];
                console.log(checkbox);
                var parentLabel = $(this).parent('label');
                var labelText = parentLabel.text();
                parentLabel.empty();
                parentLabel.append(checkbox);
                parentLabel.append("<label for='"+ 'chk' + id +"'>" + labelText + "</label>");
            });
        }

It's working as expected i.e. adding an id to checkbox and label with "for" attribute but only the "Select All" checkbox is not working. I am assuming it's because kendo is checking for text "Select All" which is now wrapped inside a label. Could you please suggest a fix for this? Or please let me know if there is any better way to do this. 

[Eyup]

Hello Rahul,

 

Thank you for writing to us.

There is an alternative CSS solution which I think is more straightforward. You can use the approach demonstrated here to achieve an analogous result with the CheckBox filtering appearance:
https://docs.telerik.com/kendo-ui/knowledge-base/font-awesome-icons-in-custom-grid-command-buttons

You can also check:
- https://docs.telerik.com/kendo-ui/controls/navigation/menu/how-to/using-fontawesome-icons
- https://docs.telerik.com/kendo-ui/controls/charts/how-to/appearance/font-awesome-icons

The same applies for the MVC helpers since the CSS is the same practically.

Feel free to check these suggestions and let me know your thoughts.

If you come across any  issues, I can also prepare a new MVC sample and send it to you.

 

Regards,
Eyup
Progress Telerik

[Rahul]

Hi Eyup,

Thank you for your response. I am aware of using font awesome icons with Kendo but was not able to change the checkbox of the filter directly. I got it working just by overwriting the CSS.

Thank you for your help.