Collapsible RadGrid

[Andreja Zitnik]

Hi,

do you have any suggestions on how to make a RadGrid collapsible? I would like to click the header and have grid collapse/expand. JQuery does quite a nice job with toggle(), but I'm looking for a solution that would persist through AJAX calls. Since I never know how many RadGrids there will be on a page I can't use a hidden field to store the toggle state and frankly, storing it in cookies seems like an overkill.

Any ideas?

Kind regards,
Andrea

[Shinu]

Hello Andreja,

I am not sure if there is any direct method available for expanding/collapsing the grid. But I tried following code for hiding the grid items from client side which gives same feeling as grid is collapsed. I tried the code in OnColumnClick event which fires when clicking the grid header. Give a try with the following approach and see whether this suits your need.

aspx:

<ClientSettings>
   <ClientEvents OnColumnClick="CollapseGrid" />
</ClientSettings>

javascript:

<script type="text/javascript">
    function CollapseGrid(sender, args) {
        var grid = sender;
        var MasterTable = grid.get_masterTableView();
        var row = MasterTable.get_dataItems();
        var length = row.length;
        for (var i = 0; i < length; i++) {
            var row = MasterTable.get_dataItems()[i];
            row.set_visible(!row.get_visible());  // Set the row visibility
        }
    }
</script>

Regards,
Shinu.

[Andreja Zitnik]

Hi Shinu,

thank you for your suggestion, but it has the same problem as my current implementation - it doesn't persist through AJAX calls.

My current implementation looks like this: 

      $('div.canCollapse table thead').click(function() {

        $(this).parents('div.canCollapse table').children('tbody').toggle();

      });

To enable collapsing on a grid I just need to set its cssClass to canCollapse. The trick, however, is remembering the current state for the next page render. Oh well, perhaps I will need to use cookies after all...

Kind regards,
Andrea