Telerik Forums / UI for ASP.NET MVC Forum / Grid /

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

Telerik UI for ASP.NET MVC
Resources Buy Try

24 posts, 1 answers

Avinash

52 posts

Member since:
Jan 2016

Posted 03 May 2016 Link to this post

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
Admin

6187 posts

Posted 04 May 2016 Link to this post

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
Avinash

52 posts

Member since:
Jan 2016
Posted 04 May 2016 Link to this post

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.

SelectAll.png
Konstantin Dikov
Admin

2466 posts
Posted 06 May 2016 Link to this post

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
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
Avinash

52 posts

Member since:
Jan 2016

Posted 15 Jun 2016 Link to this post

Konstantin,

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

Thanks.
Avinash

52 posts

Member since:
Jan 2016

Posted 15 Jun 2016 Link to this post

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

52 posts

Member since:
Jan 2016
Posted 15 Jun 2016 Link to this post

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

error.jpg
Konstantin Dikov
Admin

2466 posts
Posted 17 Jun 2016 Link to this post

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
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
Avinash

52 posts

Member since:
Jan 2016

Posted 21 Jun 2016 Link to this post

Konstantin,

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

2466 posts

Posted 23 Jun 2016 Link to this post

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
Avinash

52 posts

Member since:
Jan 2016

Posted 29 Jun 2016 Link to this post

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
Admin

2466 posts

Posted 05 Jul 2016 Link to this post

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
Avinash

52 posts

Member since:
Jan 2016

Posted 07 Jul 2016 in reply to Konstantin Dikov Link to this post

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
Admin

2497 posts
Posted 11 Jul 2016 Link to this post

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
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
Avinash

52 posts

Member since:
Jan 2016

Posted 11 Jul 2016 in reply to Viktor Tachev Link to this post

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
Admin

2497 posts
Posted 12 Jul 2016 Link to this post

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
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
Avinash

52 posts

Member since:
Jan 2016
Posted 12 Jul 2016 in reply to Viktor Tachev Link to this post

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.

Select_All.zip
Answer
Viktor Tachev
Admin

2497 posts
Posted 13 Jul 2016 Link to this post

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
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
Avinash

52 posts

Member since:
Jan 2016

Posted 13 Jul 2016 in reply to Viktor Tachev Link to this post

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

3 posts

Member since:
Feb 2015

Posted 08 May 2017 in reply to Viktor Tachev Link to this post

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
Admin

2497 posts
Posted 10 May 2017 Link to this post

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

3 posts

Member since:
Feb 2015

Posted 12 May 2017 in reply to Viktor Tachev Link to this post

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
Admin

2497 posts
Posted 16 May 2017 Link to this post

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

3 posts

Member since:
Feb 2015

Posted 16 May 2017 in reply to Viktor Tachev Link to this post

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

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

Avinash

Pavlina

Avinash

Konstantin Dikov

Avinash

Avinash

Avinash

Konstantin Dikov

Avinash

Konstantin Dikov

Avinash

Konstantin Dikov

Avinash

Viktor Tachev

Avinash

Viktor Tachev

Avinash

Viktor Tachev

Avinash

Sean

Viktor Tachev

Sean

Viktor Tachev

Sean