Is there a way to display checkbox with 'Select All/Deselect All' checkbox within column menu which selects all or deselect all columns of the grid? We have about 40 to 50 columns in grid, clicking each column to hide bunch of columns is pretty tedious work.
Thanks.
25 Answers, 1 is accepted
The article below shows how you can use checboxes in grid column menu:
http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/column-menu-using-checkboxes
Give it a try and see if this is what you are trying to achieve.
Regards,
Pavlina
Telerik

Pavlina,
I am not sure if that example helped me out. Here is the screenshot of what i was looking for. When user goes to columns section in columnmenu, it should display 'Select All' which when clicked should select all columns, and when unchecked should uncheck all columns.
Hope that makes sense.
The requirement that you have is not supported out of the box, but you could use the approach demonstrated in the following dojo example for manually inserting the "SelectAll" item:
Hope this helps.
Regards,
Konstantin Dikov
Telerik

Konstantin,
Clicking on 'Select All' doesn't seem to do anything. Could you check?
Thanks.

Konstantin,
i updated your code and it partially works now: http://dojo.telerik.com/edAHe
Not sure, why the last column doesn't get hidden.
Any idea.
Thanks.
It seems that for some reason the original example was modified and the selector before calling the siblings method should be "li" and not "ul".
As for the error, it is due to the included class names to the LI element for "SelectAll". If you want to avoid the error you should remove k-item and use custom class for getting the same style:
$("<
li
class
=
'custom-class'
><
span
class
=
'k-link'
><
input
type
=
'checkbox'
onclick
=
'checkAll(this)'
/>SelectAll</
span
></
li
>").insertBefore(e.container.find(".k-columns-item>ul>li").first());
and the CSS:
<style>
.custom-class{
padding
:
5px
5px
5px
15px
;
background
:
#555
;
color
:
#aaa
;
}
</style>
Here is the modified dojo example:
Regards,
Konstantin Dikov
Telerik

Konstantin,
Any reason why last column doesn't get deselect when 'Select All' is unchecked?
You need to have at least one visible column in the Grid and that is why the last column with this approach stays visible. The same behavior could be observed if you try to hide the columns without the SelectAll checkbox.
If you need, you can modify the hiding logic and keep the first column visible (or any other of your choosing).
Regards,
Konstantin Dikov
Telerik

Konstantin,
It works however is there way to accomplish this?
If all columns are selected, have 'Select All' checkbox checked.
If one of the column is unchecked, then have 'Select All' checkbox unchecked
You could try to change the onColumnMenuInit event handler with the following (http://dojo.telerik.com/iPeBa/4):
columnMenuInit:
function
(e) {
var
mylist = e.container.find(
".k-columns-item>ul"
);
var
listitems = mylist.children(
'li'
).get();
$(listitems).find(
"input"
).click(
function
(e){
var
allChecked = $(
this
).closest(
"ul"
).find(
"li.k-item input:checked"
).length == $(
this
).closest(
"ul"
).find(
"li.k-item input"
).length;
$(
".custom-class input"
)[0].checked = allChecked;
})
$(
"<li class='custom-class'><span class='k-link'><input type='checkbox' checked onclick='checkAll(this)'/>SelectAll</span></li>"
).insertBefore(e.container.find(
".k-columns-item>ul>li"
).first());
},
Please let me know if everything works correctly on your side too.
Regards,
Konstantin Dikov
Telerik by Progress

Konstantin,
Looks like it only works for single grid. If there are multiple grids, it doesn't seem to work.
http://dojo.telerik.com/IduTu
http://runner.telerik.io/fullscreen/IduTu (fullscreen)
Any idea how to get it to work for multiple grids in same page?
Note that the same checkbox with class name "custom-class" is referenced in the handlers for both grids. This is why the behavior is working for only one of the widgets.
In order to change that you need to ensure that the correct checkbox is referenced for each grid. Check out the modified sample as reference.
Regards,
Viktor Tachev
Telerik by Progress

Viktor,
Are you sure it's the right link? I clicked on checkbox of both tables column and 'selectall' checkbox didn't change anytime?
Thanks.
The behavior you describe seems strange. The checkbox state is changed as expected on my end. Please take a look at the video I made as reference and let me know if I am missing something:
Regards,
Viktor Tachev
Telerik by Progress

That is odd. I checked your video and yeah i can see it working as you mentioned however when i try on my chrome or edge browser i still have an issue. Do check the attached screencast.
I should say that the behavior you are observing is expected. The click event is handled for the checkboxes and the logic is executed when clicking on them. However, in your case you are clicking on the label.
In order to have the same behavior when clicking the labels you would need to modify the behavior a bit. You need to handle the click event for the span element in the menu. The rest of the logic is similar to the one that is already in place.
Check out the modified sample below for illustration.
Regards,
Viktor Tachev
Telerik by Progress

Victor,
Thanks this worked.
One suggestion: This is really a neat feature which i believe other people will be using it too so why not bake into grid control officially :)

I know this post is almost a year old now, but the links to the code snippets are no longer available and I would also like to accomplish this task. A select all for the ColumnMenu would be a great feature for grids with many columns like ours.
I upvoted the feature request but I would like to see these examples if you could wipe the dust off and send a link.
Thank you!
Sean
For your convenience I updated the dojo example from my last post to use the latest KendoUI version. Check it out in the link below:
Regards,
Viktor Tachev
Telerik by Progress

I tested the code in a Grid MVC wrapper and it seems to be working as expected on my end. You can see the relevant code in the snippets below:
Grid definition:
@(Html.Kendo().Grid<
Kendo.Mvc.Examples.Models.Order
>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(120);
columns.Bound(o => o.ShipCountry);
columns.Bound(o => o.ShipName);
columns.Bound(o => o.ShipAddress).Filterable(false);
})
.Scrollable()
.HtmlAttributes(new { style = "height: 550px" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(30)
.Read(read => read.Action("ColumnMenu_Read", "Grid"))
)
.Pageable()
.Filterable()
.Sortable()
.ColumnMenu()
.Events(e => e.ColumnMenuInit("onColumnMenuInit"))
)
JavaScript:
<script>
function
onColumnMenuInit(e) {
var
mylist = e.container.find(
".k-columns-item>ul"
);
var
listitems = mylist.children(
'li'
).get();
$(listitems).find(
".k-link"
).click(
function
(e){
var
chkBox = $(
this
).first(
"input"
)[0];
setTimeout(
function
() {
if
(!$(chkBox).hasClass(
"custom-class"
)){
var
allChecked = $(chkBox).closest(
"ul"
).find(
"li.k-item input:checked"
).length == $(chkBox).closest(
"ul"
).find(
"li.k-item input"
).length;
$(chkBox).closest(
"ul"
).find(
".custom-class input"
)[0].checked = allChecked;
}
},1);
})
$(
"<li class='custom-class'><span class='k-link'><input type='checkbox' checked onclick='checkAll(this)'/>SelectAll</span></li>"
).insertBefore(e.container.find(
".k-columns-item>ul>li"
).first());
}
function
checkAll(el) {
var
checked = el.checked;
$(el).closest(
"li"
).siblings().each(
function
(e) {
if
(!$(
this
).hasClass(
"custom-class"
) && $(
this
).find(
"input"
)[0].checked != checked) {
$(
this
).find(
"input"
).click();
$(
this
).removeClass(
"k-state-hover"
);
}
})
}
</script>
CSS:
<style>
.custom-class {
padding
:
5px
5px
5px
12px
;
background
:
#999
;
color
:
#fff
;
}
</style>
I also prepared a short video showing the behavior observed on my end. You can see it below. Please take a look and let me know what is different on your end.
Regards,
Viktor Tachev
Telerik by Progress

We now have built-in checkbox selection column for the grid:
https://demos.telerik.com/aspnet-mvc/grid/checkbox-selection
If you continue to have issues, feel free to open a formal support thread and we will look at it.

Hi i have tried this and worked for me but <li> is appearing at bottom of ul not at top. when i inspect element in debug it prepend to top but in UI its shows at bottom.
function onColumnMenuInit(e) {
var mylist = e.container.find(".k-columns-item>ul");
var listitems = mylist.children('li').get();
$(listitems).find("input").click(function (e) {
var allChecked = $(this).closest("ul").find("li.k-item input:checked").length == $(this).closest("ul").find("li.k-item input").length;
$(".custom-class input")[0].checked = allChecked;
})
//$(e.container.find(".k-columns-item>ul>li:nth-child(2)")).prepend($("<
input
type
=
'text'
class
=
'txtInput'
id
=
'searchTheKey'
onkeyup
=
'FilterColumnSearch(this)'
placeholder
=
'Enter the keywords to search.....'
>"));
//$(e.container.find(".k-columns-item>ul>li:nth-child(2)")).prepend("<
div
class
=
'custom-class'
><
span
class
=
'k-link'
><
input
class
=
'select-all'
type
=
'checkbox'
checked
onclick
=
'checkAll(this)'
/>SelectAll</
span
></
div
>");
//$(e.container.find(".k-columns-item>ul")).prepend("<
li
class
=
'custom-class'
><
span
class
=
'k-link'
><
input
type
=
'checkbox'
checked
onclick
=
'checkAll(this)'
/>SelectAll</
span
></
li
>");
//$(e.container.find(".k-columns-item>ul")).prepend($("<
input
type
=
'text'
class
=
'txtInput'
id
=
'searchTheKey'
onkeyup
=
'FilterColumnSearch(this)'
placeholder
=
'Enter the keywords to search.....'
>"));
debugger;
$("<
li
class
=
'custom-class'
><
span
class
=
'k-link'
><
input
type
=
'checkbox'
checked
onclick
=
'checkAll(this)'
/>Select All</
span
></
li
>").insertBefore(e.container.find(".k-columns-item>ul>li").eq(1));
$("<
input
type
=
'text'
class
=
'txtInput'
id
=
'searchTheKey'
onkeyup
=
'FilterColumnSearch(this)'
placeholder
=
'Enter the keywords to search.....'
>").insertBefore(e.container.find(".k-columns-item>ul>li").eq(1));
}
Hello Priyank,
Are there any custom styles in place that target ul elements? In case there are that could affect how the items are shown.
That said, would you send us a runnable sample where the behavior is observed? This will enable us to examine it locally and look for its cause.
Regards,
Viktor Tachev
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/.