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

Grid Checkbox multi select filter - form customization

5 Answers 368 Views

Grid

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

5 Answers, 1 is accepted

Accepted

answered on 05 Sep 2017, 10:21 AM

Hello Alex,

Based on the provided information, I believe that your project requires having a Grid with Multi Checkboxes filter. In the filter pop-up, the "check all" checkbox and the "selected items" div should be removed, as well as, the font in the pop-up should be customized. Please, correct me if I am wrong.

To achieve the above, I would suggest handling the filterMenuInit event. In the event handler function, select the closest "li" element of the "check all" checkbox and the "div" of the "selected items" and use the jQuery remove method. Furthermore, to change the font, use the jQuery css method.

For example, the code of the filterMenuInit event handler function could look like:

function onFilterMenuInit(e) {

var container = e.container;

var checkAll = container.find(".k-check-all").closest("li");

var selectedItems = container.find(".k-filter-selected-items");

checkAll.remove();

selectedItems.remove();

setTimeout(function(e) {

$("form.k-filter-menu.k-popup").css("font-family", "Comic Sans MS")

})

};

For a runnable example, check my testing Dojo:

http://dojo.telerik.com/AqaLI

I hope this helps.

Regards,
Preslav
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.