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

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

25 Answers 310 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Avinash
Top achievements
Rank 1
Avinash asked on 03 May 2016, 06:41 PM

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

Sort by
0
Pavlina
Telerik team
answered on 04 May 2016, 10:04 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Avinash
Top achievements
Rank 1
answered on 04 May 2016, 02:13 PM

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.

0
Konstantin Dikov
Telerik team
answered on 06 May 2016, 01:33 PM
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:
Hope this helps.


Regards,
Konstantin Dikov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Avinash
Top achievements
Rank 1
answered on 15 Jun 2016, 05:27 PM

Konstantin,

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

Thanks.

0
Avinash
Top achievements
Rank 1
answered on 15 Jun 2016, 06:58 PM

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.

0
Avinash
Top achievements
Rank 1
answered on 15 Jun 2016, 07:36 PM

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

0
Konstantin Dikov
Telerik team
answered on 17 Jun 2016, 11:38 AM
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:

Regards,
Konstantin Dikov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Avinash
Top achievements
Rank 1
answered on 21 Jun 2016, 09:42 PM

Konstantin,

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

0
Konstantin Dikov
Telerik team
answered on 23 Jun 2016, 07:19 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Avinash
Top achievements
Rank 1
answered on 29 Jun 2016, 08:07 PM

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

0
Konstantin Dikov
Telerik team
answered on 05 Jul 2016, 04:33 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Avinash
Top achievements
Rank 1
answered on 07 Jul 2016, 09:07 PM

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?

0
Viktor Tachev
Telerik team
answered on 11 Jul 2016, 11:25 AM
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.



Regards,
Viktor Tachev
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Avinash
Top achievements
Rank 1
answered on 11 Jul 2016, 07:04 PM

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.

0
Viktor Tachev
Telerik team
answered on 12 Jul 2016, 11:42 AM
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:



Regards,
Viktor Tachev
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Avinash
Top achievements
Rank 1
answered on 12 Jul 2016, 04:10 PM
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.
0
Accepted
Viktor Tachev
Telerik team
answered on 13 Jul 2016, 02:30 PM
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.



Regards,
Viktor Tachev
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Avinash
Top achievements
Rank 1
answered on 13 Jul 2016, 09:23 PM

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

0
Sean
Top achievements
Rank 1
answered on 08 May 2017, 09:44 PM

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

0
Viktor Tachev
Telerik team
answered on 10 May 2017, 02:04 PM
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:



Regards,
Viktor Tachev
Telerik by Progress
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.
0
Sean
Top achievements
Rank 1
answered on 12 May 2017, 04:08 PM
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.
0
Viktor Tachev
Telerik team
answered on 16 May 2017, 12:58 PM
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.



Regards,
Viktor Tachev
Telerik by Progress
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.
0
Sean
Top achievements
Rank 1
answered on 16 May 2017, 10:13 PM
Thank you!  I had forgotten the event setting... works like a charm now.
Paul
Top achievements
Rank 1
commented on 05 Jul 2021, 11:48 AM

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
Telerik team
commented on 07 Jul 2021, 09:34 AM

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.

0
Priyank
Top achievements
Rank 1
Veteran
answered on 13 Apr 2021, 10:27 AM

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

 

0
Viktor Tachev
Telerik team
answered on 15 Apr 2021, 10:12 AM

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/.

Tags
Grid
Asked by
Avinash
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Avinash
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Viktor Tachev
Telerik team
Sean
Top achievements
Rank 1
Priyank
Top achievements
Rank 1
Veteran
Share this question
or