[Solved] Expand collapse all records in grouped Grid.

[Pim]

Hello,

We have a grid with multiple level grouping.
Like this:

1.
   1.1
        1.1.1
   1.2
        1.2.1
2
  2.1
       2.1.1
  2.2

etc.

I followed the examples from the demo, we had to use server binding(probably because we have to much data to use AJAX and we want to load all data at once)

Is there a way to expand / collapse all groupings at once (clientside)?

Cheers

[Pim]

We have now changed our grid to use Ajax binding.
We are not using a grouped grid any more, in stead we use a Master - Detail (hierarchical) grid.

The output to the user is more or less the same as it was earlier:

1.
   1.1
        1.1.1
   1.2
        1.2.1
2
  2.1
       2.1.1
  2.2

etc.

My question is the same, is there a way to expand / collapse all records at once?
We want to create a button / link where the user can click to expand / collapse all (hierarchical) data at once.

Is there a way to accomplish this?
Can someone give me a push in the right direction, is there a Client API for the grid? I found this one, but it has no irrelevant info about hierarchical data.

Thanks

[Rosen]

Hello Pim,

In order to expand/collapse grid's detailsView you should use expandRow and collapseRow client-side methods. I have attached a small sample which demonstrates this approach.

Regards,
Rosen
the Telerik team

[Pim]

Thanks Rosen for the reply.

I was aware of the expand / collapse client methods. They work fine.

However what we are after is a way to expand / collapse all hierarchical data at once. The example you provided on has 2 levels. Our grid has 4 levels at the moment.

I added a new level to your example (factory) which comes under Product. What we are after is a way to expand all data levels in one click.
Or at least all hierarchical data under a selected row.

So in this example, when all data is collapsed we want all data to be expanded when we click expand, so we can see all products and all factories under products.

I tried to hack it in as seen in the provided example:

function toggleClick(expand) {
            var grid = $("#Orders").data("tGrid");
            grid.$rows().each(function () {
                if (expand) {
                    grid.expandRow(this);
                }else{
                    grid.collapseRow(this);
                }
            });

            $('[id*="Orders_"]').each(function () {
                var orderGrid = $(this).data('tGrid');
                orderGrid.$rows().each(function () {
                    if (expand) {
                        orderGrid.expandRow(this);
                    } else {
                        orderGrid.collapseRow(this);
                    }
                });
            });
        }

But this doesn't work, there must be an easier way to accomplish this?

Thanks for your help! Very much appreciated!

Pim

[Rosen]

Hi Pim,

In order to achieve the requested functionality you should take a slightly different approach when expanding child grids. You should wait for inner grid to be databound in order to expand their detailViews. I have attached a modified version of the View, which to illustrate the required changes.

All the best,
Rosen
the Telerik team

[Pim]

Hi Rosen,

Thanks again for your reply!

This is the grid behavior we were looking for; great. Although I don't think we can use the event 'OnDetailViewExpand' in our case.
We don't want all the detail-grids to expand when we click on the arrow image on the main rows.

Only the 1 level should expand when we click on that level within the grid.
All detail levels should only expand when we click on the 'Expand Details' link that is above the Grid.

Can we accomplish this?

Thanks once again for your help!


Off Topic:
Unfortunately, since we have quite a lot of data in our Grid, it takes really long to expand (load on demand) all data.

[Pim]

oeps double post...

[Pim]

Could someone please confirm that our needed functionality is not possible?

Also, please reply back when our wanted functionality is unclear. What we want seems relatively simple but I probably didn't explain it very well..

Thanks a lot for your time!


Cheers

[Atanas Korchev]

Hello Pim,

 Unfortunately we are not sure what your requirement is. First you said you wanted all details to be expanded then that you need only the first level. A sample application would help us understand what you really need. You can attach a simple running project to this thread.

Regards,
Atanas Korchev
the Telerik team

[Pim]

Thanks for the reply.

I thought I wasn't clear enough, let me try once more.

If you look at the already attached code example; you can see all data (all multiple child records) is expanded when clicking the Expand All button. This is the behaviour what we are looking for, great so far.

But, because in the example you advise to use the: OnDetailViewExpand event to expand the other child data, all the (multiple hierarchical) child will expand when the + sign on any level is clicked. Because when the + sign on any level is clicked the OnDetailViewExpand is fired so that all (multiple) child data will expand.

This last behaviour is not what we want. we only want all child data to be expanded when we click on the Expand All button.
When we click the + sign we only want the level that is clicked on to be expanded.

So basically we are happy with the behaviour in the earlier attached example, but we don't want all (hierarchical multiple) child data to be expanded when clicking the + sign. when the + sign is clicked we only want the level that is clicked on to be expanded.

I really appreciate your help so far!
Please let me know if our wanted behaviour makes sense now.

Cheers

[Rosen]

Hello Pim,

Unfortunately, this exact  behavior is not currently possible.

Best wishes,
Rosen
the Telerik team

[Nikolai]

have a look
http://www.telerik.com/community/forums/aspnet-mvc/grid/collapsed-rows-on-grouping.aspx