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

Collapsible RadGrid

2 Answers 143 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Andreja Zitnik
Top achievements
Rank 1
Andreja Zitnik asked on 15 Apr 2010, 01:10 PM
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

2 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 16 Apr 2010, 08:43 AM
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.
0
Andreja Zitnik
Top achievements
Rank 1
answered on 16 Apr 2010, 11:19 AM
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
Tags
Grid
Asked by
Andreja Zitnik
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Andreja Zitnik
Top achievements
Rank 1
Share this question
or