Radgrid Expand/Collapse all Rows on External Button

[CG]

Hello,

I am trying to create two outside buttons that will collapse and expand rows and detail table rows in a radgrid.

I only need to expand/collapse the rows in the master table and the first nested detail grid table. Here is what I have so far:

<asp:Table runat="server" CellPadding="0" CellSpacing="0">
    <asp:TableRow>
        <asp:TableCell>
            <b><asp:LinkButton runat="server" Text="Collapse All" ID="CollapseAllBtn" OnClick="CollapseAllClick" /></b>
        </asp:TableCell>
        <asp:TableCell style="padding-left:10px">
            <b><asp:LinkButton runat="server" Text="Expand All" ID="ExpandAllBtn" OnClick="ExpandAllClick" /></b>
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>

Code behind:

protected void CollapseAllClick(object sender, EventArgs e)
      {
          foreach (GridDataItem item in PNLViewGrid.MasterTableView.Items)
          {
              item.Expanded = false;
              foreach (GridDataItem nestedItem in item.ChildItem.NestedTableViews[0].Items)
              {
                  nestedItem.Expanded = false;
              }
          }
      }

      protected void ExpandAllClick(object sender, EventArgs e)
      {
          foreach (GridDataItem item in PNLViewGrid.MasterTableView.Items)
          {
              item.Expanded = true;
              foreach (GridDataItem nestedItem in item.ChildItem.NestedTableViews[0].Items)
              {
                  nestedItem.Expanded = true;
              }
          }
      }

When i click on either of the buttons i get a javascript error. Can someone tell me how to get this to work?

Thanks

[Jayesh Goyani]

Hello,

protected void CollapseAllClick(object sender, EventArgs e)
{
RadGrid1.MasterTableView.HierarchyDefaultExpanded = false;
RadGrid1.Rebind();
// If you not used Advance data binding then again Bind // RadGrid1.DataSource = ""; RadGrid1.DataBind();
}
protected void ExpandAllClick(object sender, EventArgs e)
 {
RadGrid1.MasterTableView.HierarchyDefaultExpanded = true;
RadGrid1.Rebind();
// If you not used Advance data binding then again Bind // RadGrid1.DataSource = ""; RadGrid1.DataBind();
}

Thanks,
Jayesh Goyani

[CG]

Hi Jayesh,

I tried what you had but i sitll get the javascript error: Microsoft JScript runtime error: 'undefined' is null or not an object

What am i missing or doing wrong?

[Shinu]

Hello CG,

Try the following code snippet in the Button click.
C#:

protected void Button1_Click(object sender, EventArgs e)
    {
        foreach (GridDataItem item in radgrid1.MasterTableView.Items)
        {
            item.Expanded = true;
        }
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        foreach (GridDataItem item in radgrid1.MasterTableView.Items)
        {
            item.Expanded = false;
        }
    }

Thanks,
Shinu.

[CG]

Hi Shinu,

I tried that already (i already had this implemented in my code) but it did not work).

Any other suggestions?

[CG]

Can somebody please help me out with this? This is really important...

[Casey]

Are you using a RadAjaxManager?

[CG]

Hello Casey,

Yes I am :)
This is actually in a user control so i am using a RadAjaxManagerProxy with a LoadingPanel instead.

[Casey]

I'm guessing it is possible that the button is not able to update the RadGrid. You may need to modify the ajax settings because the code should work to expand/collapse the grid items.

I've never used the RadAjaxManagerProxy; however, if you are able to post the Ajax settings, I'm sure someone would be able to point you in the right direction. :)

[CG]

Hello Casey,

Yes I am :)
This is actually in a user control so i am using a RadAjaxManagerProxy with a LoadingPanel instead.

Here is there RadAjaxManager fround on the content page:

<telerik:RadAjaxManagerProxy ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

Here's the ManagerProxy in the UserControl:

<telerik:RadAjaxManagerProxy ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="CollapseAllBtn">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="PNLViewGrid" LoadingPanelID="LoadingPanel" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="ExpandAllBtn">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="PNLViewGrid" LoadingPanelID="LoadingPanel" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

[Casey]

I see that you are using a RadAjaxManagerProxy on the Content Page, as well as on the user control, does that mean you have a RadAjaxManager on a Master Page?

I know you said that you receive a javascript error when you click on the buttons, but does that mean if you put a breakpoint in the Click event that it doesn't even make it there before throwing the javascript error, or does the error occur after the OnClick event code is executed?

[CG]

Hi Casey,

Sorry about that, Here is my RadAjaxManager from my main page:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings></AjaxSettings>
</telerik:RadAjaxManager>

And yes, the error seems to occur after the method is finished. I put a break point at the beginning of every method the grid uses (Itemcommand, Page_Init, DataBind, NeedDataSource, etc) and it runs through all of them (not in the order i listed), but errors out after all of them are finished running.

Any suggestions?

Thanks!

[Casey]

Does it show you the javascript function where the error occurs? Do you call any javascript functions? If so, could you please post them as well?

I'm not 100% sure that I understand the exact setup of your pages... I'm assuming that the user control is a pop-up opened from the content page and that the RadGrid and the LinkButtons are all on the user control. If this is not correct, could you please elaborate on the setup some more?

[CG]

Hi Casey,

So i have a grid that is formatted like so:

Master Table
    - Detail Table 1
        - Detail Table 2
            - Detail Table 3

When i first populate it with data, the preRender function gets called and it sets up an initial expansion of Detail Table 1 and Detail Table 2, leaving Detail Table 3 collapsed.

The grid is in a User Control, and the User control is placed within a RadPageView of the Content page. The Collapse and Expand External buttons are also in the User control.

I get the following error:
Microsoft JScript runtime error: 'undefined' is null or not an object

Inside the Telerik.Web.UI.WebR.....bd8f85e4 [dynamic] javascript page:
Between the // MicrosoftAjax.js
and
/* END MicrosoftAjax.js */

 

at around line ....Sys.UI.Control=function(a){Sys.UI.Control.initializeBase(this);this._element=a;a.control=this;...

[Casey]

Maybe you could try commenting out the RadAjaxManagerProxy on the UserControl and wrapping the RadGrid & LinkButtons in a RadAjaxPanel.

<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="LoadingPanel">

  Your LinkButtons and RadGrid here 


</telerik:RadAjaxPanel>

If that doesn't work, you may have to do a full postback, at least until Telerik, or any other forum users are able to provide some more assistance. Ill try to recreate your setup locally, but I'm not sure when I will get the opportunity to do so.

[CG]

Hi Casey,

Unfortunately this did not work. How would I do a full postback?

Thanks

[Casey]

If you don't use the RadAjaxManagerProxy, or RadAjaxPanel, then the page should do a full postback on the linkbutton click by default.

[CG]

Hi!

This dos not deserve to be closed!! Dont know who closed this but this is still a serious issue and am now beginning to believe it is a bug on Telerik's end. Can somebody from Telerik please look into this?

[CG]

Seriously, anybody from telerik?

[Jayesh Goyani]

Hello,

please create a support ticket and submit your project.

so we can check it and able to find solutions.

Thanks,
Jayesh Goyani

[Rick]

Did anyone ever figure out why item.Expanded is always false? Here, I am trying to save the state of the groups, and save only the ones that are expanded to a list. Is there any way to make this work?
My goal is simply to allow a user to sort on a column and maintain the state of the groups while doing so. Currently, sorting collapses all groups, as they are collapsed by default. If a user expands one (or more) and then does a sort, the ones that were expanded before the sort should be expanded afterward. This should not be impossible.

​ private void SaveGroupsExpandedState(RadGrid grid)
{

GridItem[] groupItems = grid.MasterTableView.GetItems(GridItemType.GroupHeader);

if (groupItems.Length > 0)
{

var listCollapsedIndexes = new List<int>();

foreach (GridItem item in groupItems)
{
string temp = item.Cells[1].Text;
if (item.Expanded)
{

listCollapsedIndexes.Add(item.RowIndex);

}

}

Session["groupExpandedState"] = listCollapsedIndexes;

}

}

[Rick]

Obviously listCollapsedIndexes is misnamed and should be listExpandedIndexes, so there is no need to point this out.

[Princy]

Hi Rick,

Please take a look at the following code library on Persist Groups Expanded State on Rebind to maintain the state of the Groups while sorting, paging etc.

Thanks,
Princy

[Rick]

I received your proposed solution at http://www.telerik.com/support/code-library/persist-groups-expanded-state-on-rebind.

​Unfortunately, the code I need to put in the loop isGroups[((GridGroupHeaderItem)item).DataCell.Text] = !item.Expanded;
and a GridDataItem cannot  be converted to a GridGroupHeader item. Also, the solution still depends on item.Expanded returning true is the item is expanded, and so I am doubtful, since that doesn't work anywhere else. It would seem that the best solution would be to fix the Expanded property, and then everyone would not have this problem.

[Kostadin]

Hello Rick,

I am not completely sure why the code library is not working in your case. Could you please elaborate a little bit more on your scenario?

Regards,
Kostadin
Telerik