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

1 Answer 37 Views
DropDownList Filter Grid
Rahul
Top achievements
Rank 1
Rahul asked on 03 Dec 2021, 11:25 PM | edited on 05 Dec 2021, 02:35 AM

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. 

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 08 Dec 2021, 03:47 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Rahul
Top achievements
Rank 1
commented on 09 Dec 2021, 06:03 PM

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.

Tags
DropDownList Filter Grid
Asked by
Rahul
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Share this question
or