Select All/Deselect All in ColumnMenu in ASP.NET MVC

[Avinash]

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.

[Pavlina]

Hi,

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

[Avinash]

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.

[Konstantin Dikov]

Hi Avinash,

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:

• http://dojo.telerik.com/OcEQe

Hope this helps.


Regards,
Konstantin Dikov
Telerik

[Avinash]

Konstantin,

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

Thanks.

[Avinash]

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.

[Avinash]

Konstantin,

Also i found that everytime i click on 'Select All', i get the javascript error from 'kendo.all.js' and the error message is:

Uncaught TypeError: Cannot read property 'hidden' of undefined

[Konstantin Dikov]

Hello Avinash,

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:

• http://dojo.telerik.com/OpETE

Regards,
Konstantin Dikov
Telerik

[Avinash]

Konstantin,

Any reason why last column doesn't get deselect when 'Select All' is unchecked?

[Konstantin Dikov]

Hi Avinash,

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

[Avinash]

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

[Konstantin Dikov]

Hello,

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

[Avinash]

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?

[Viktor Tachev]

Hi,

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.

• http://dojo.telerik.com/IduTu/3

Regards,
Viktor Tachev
Telerik by Progress

[Avinash]

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.

[Viktor Tachev]

Hello,

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:

• http://screencast.com/t/ReL6hnb5k4

Regards,
Viktor Tachev
Telerik by Progress

[Avinash]

Viktor,

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.

[Viktor Tachev]

Hello,

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.

• http://dojo.telerik.com/IduTu/5

Regards,
Viktor Tachev
Telerik by Progress

[Avinash]

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 :)

[Sean]

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

[Viktor Tachev]

Hi 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:

• http://dojo.telerik.com/IduTu/8

Regards,
Viktor Tachev
Telerik by Progress

[Sean]

Viktor... thank you.  This appears to work in a JS based implementation, but not in the Razor implementation.  I don't see the select all added and it affected the width of all the columns.

[Viktor Tachev]

Hi Sean,

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.

• https://www.screencast.com/t/8X8xpNlLT

Regards,
Viktor Tachev
Telerik by Progress

[Sean]

Thank you!  I had forgotten the event setting... works like a charm now.

[Paul]

I am also trying to get this to work, but get the following javascript error: kendo.all.js:56152 Uncaught TypeError: Cannot read property 'length' of undefined

[Eyup]

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.

[Priyank]

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));



 }

 

[Viktor Tachev]

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