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

19 posts, 1 answers
  1. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 03 May 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.

  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 04 May 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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 04 May 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.

  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1800 posts

    Posted 06 May 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:
    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
  6. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 15 Jun Link to this post

    Konstantin,

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

    Thanks.

  7. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 15 Jun 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.

  8. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 15 Jun 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

  9. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1800 posts

    Posted 17 Jun 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:

    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
  10. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 21 Jun Link to this post

    Konstantin,

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

  11. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1800 posts

    Posted 23 Jun 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
  12. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 29 Jun 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

  13. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1800 posts

    Posted 05 Jul 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
  14. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 07 Jul 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?

  15. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 11 Jul 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.



    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
  16. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 11 Jul 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.

  17. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 12 Jul 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:



    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
  18. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 12 Jul 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.
  19. Answer
    Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 13 Jul 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.



    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
  20. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 13 Jul 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 :)

Back to Top
UI for ASP.NET MVC is VS 2017 Ready