RadGrid Detailtable Items are not in Editmode when collapsed send from Server

[Markus]

Hi

I got this Issue: Items in the DetailTable are not in Editmode if I collapse a ParentItem Serverside.
If the ParentItem is expanded on the Server, all DetailTable-Items stays in Editmode.

Description:
- Grid with 2 Categories
- Each Categories hold 3 Items in DetailTable
- All DetailTable-Items are set to Editmode (Serverside)

Scenario 1:
- 6 of the DetailTable Items are listed as editedItems.
- After Grid_Prerender() I collapse 1 Category. Only 3 of the DetailTable Items are listed as editedItems.

Scenario 2:
- 6 of the DetailTable Items are listed as editedItems.
- After Grid_Prerender() I collapse both Categories. None of the DetailTable Items are listed as editedItems.

Scenario 3:
- 6 of the DetailTable Items are listed as editedItems.
- After Grid_Prerender() I expand all Categories. All 6 of the DetailTable Items are listed as editedItems.


I noticed, the same moment a category is collapsed, all his DetailTable-Items are no longer listed as editedItems. Expanding the Category just afterwards doesn't bring the Items back in the editedItems.

Is there something I miss? How can I let all DetailTable-Items staying in Editmode even if I collapse a Parent Serverside?


TIA
Markus

[Eyup]

Hello Markus,

You can use the following property to achieve the requested functionality:

<telerik:RadGrid ... RetainExpandStateOnRebind="true">

Hope this helps. Please give it a try and let me know if it works for you.

Regards,
Eyup
Telerik

[Markus]

Hello Eyup

Thank you for your answer.

Unfortunatly, that didn't solve the problem ... or I have to change something in my code.
If I use RetainExpandStateOnRebind , the program loops until StackOverflow.
It happens when I set "GridDataItem.Edit = true" in the Grid_DataItemBound() Event.
That calls the Grid_DetailTableDataBind() Event. And that  Event calls sooner or later Grid_DataItemBound() again => Loop forever.

I'm not sure, even if this would work, that this would solve my Issue.
What I get so far from this solution: That the collapsed/expanded item would preserve during Postbacks. Would it also let all Items in "Editmode"?

My issue is: I want to sent collapsed Categories (Grid ParentItems) to the client. The client can expand them and do some changes.
The bad thing is: the Items are no longer in "EditMode" (as soon as I collapse them on the Server, prior to sending it to the client) and I don't get the changes with the next Postback.

FYI: the Grid-Definition:

<telerik:RadGrid
                  ID="grdList"
                  runat="server"
                  AutoGenerateColumns="false"
                  AllowFilteringByColumn="false"
                  AllowMultiRowEdit="True"
                  AllowPaging="false"
                  ShowGroupPanel="false">
                  <ClientSettings
                    Resizing-AllowColumnResize="false"
                    AllowColumnsReorder="false"
                    AllowExpandCollapse="true">
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="300" />
                  </ClientSettings>
                  <HeaderContextMenu EnableTheming="True">
                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                  </HeaderContextMenu>
                  <MasterTableView
                    EditMode="InPlace"
                    DataMember="gridViewFEDetailMASA"
                    DataKeyNames="MASA_Id"
                    CommandItemDisplay="Bottom"
                    RetrieveAllDataFields="true"
                    HierarchyLoadMode="Client"
                    HierarchyDefaultExpanded="true" >
                    <CommandItemTemplate><cn:agPanel ID="PanelButtonsGrid" runat="server" CssClass="PanelButton" ScrollBars="None" Height="34px" Width="99%">
                          <table id="Table1" runat="server" border="0" cellpadding="0" cellspacing="0" width="99%">
                            <tr>
                              <td align="left" valign="bottom"><img src="images/spacer.gif" alt="" width="10" height="29" /></td>
                              <td align="left" valign="bottom"><cn:agButton ID="btnSaveGrid" runat="server" CommandName="UpdateAll" Text="_Speichern" Width="180px" /></td>
                              <td align="left" valign="bottom"><img src="images/spacer.gif" alt="" width="10" height="1" /></td>
                              <td align="left" valign="bottom"><cn:agButton ID="btnSaveGridAndBack" runat="server" CommandName="UpdateAllBack" Text="_SpeichernUndZurueck" Width="180px" /></td>
                              <td align="left" valign="bottom"><img src="images/spacer.gif" alt="" width="10" height="1" /></td>
                              <td align="left" valign="bottom"><cn:agButton ID="btnReset" runat="server" CommandName="Reset" Text="_Zuruecksetzen" Width="180px" /></td>
                              <td align="left" valign="bottom" style="width: 60%;"><img src="images/spacer.gif" alt="" width="20" height="1" /></td>
                              <td align="right" valign="bottom"><cn:agButton ID="btnDruck" runat="server" CommandName="ExportFE" Text="_Druck" Width="180px" /></td>
                              <td align="right" valign="bottom" ><img src="images/spacer.gif" alt="" width="10" height="1" /></td>
                            </tr>
                          </table>
                        </cn:agPanel></CommandItemTemplate>
                    <Columns>
                      <telerik:GridBoundColumn UniqueName="MASA_Bez" DataField="MASA_Bez" DataType="System.String" HeaderText="_Bez" ItemStyle-Wrap="false" HeaderStyle-Wrap="false" ReadOnly="true" SortExpression="MASA_Bez" Display="true" HeaderStyle-Width="200" AllowFiltering="false"></telerik:GridBoundColumn>
                      <telerik:GridBoundColumn UniqueName="MASA_Id" DataField="MASA_Id" DataType="System.Int32" HeaderText="_MASA_Id" ReadOnly="True" SortExpression="MASA_Id" Display="false" HeaderStyle-Width="0" AllowFiltering="false"></telerik:GridBoundColumn>
                      <telerik:GridCheckBoxColumn DataField="MASA_Aktiv" DataType="System.Boolean" HeaderText="_Aktiv" ReadOnly="true" SortExpression="MASA_Aktiv" UniqueName="MASA_Aktiv" Display="false" HeaderStyle-Width="0" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" AllowFiltering="false"></telerik:GridCheckBoxColumn>
                    </Columns>
                    <DetailTables>
                      <telerik:GridTableView EditMode="InPlace" DataMember="gridViewFEDetailFEKatalog" Name="Massnahme" AutoGenerateColumns="false" DataKeyNames="FEK_Id" ShowHeader="true" ShowFooter="false">
                        <Columns>
                          <telerik:GridTemplateColumn UniqueName="FEK_Aktiv" HeaderText="_Aktiv" ReadOnly="false" Display="true" HeaderStyle-Width="40" SortExpression="FEK_Aktiv" AllowFiltering="false">
                            <ItemTemplate>
                              <cn:agCheckBox ID="FEKAktiv" runat="server" Checked="false" />
                            </ItemTemplate>
                          </telerik:GridTemplateColumn>
                          <telerik:GridTemplateColumn UniqueName="MAS_Id" HeaderText="_Mas_Id" ReadOnly="true" Display="false" HeaderStyle-Width="5" SortExpression="MAS_Id" AllowFiltering="false">
                            <ItemTemplate>
                              <asp:HiddenField ID="MASId" runat="server" Value="0" />
                            </ItemTemplate>
                          </telerik:GridTemplateColumn>
                          <telerik:GridBoundColumn UniqueName="FEK_Id" DataField="FEK_Id" DataType="System.Int32" HeaderText="_Id" ItemStyle-Wrap="false" HeaderStyle-Wrap="false" ReadOnly="true" SortExpression="FEK_Id" Display="false" HeaderStyle-Width="0" AllowFiltering="false"></telerik:GridBoundColumn>
                          <telerik:GridBoundColumn UniqueName="FEK_MASA_Id" DataField="FEK_MASA_Id" DataType="System.Int32" HeaderText="_Id" ItemStyle-Wrap="false" HeaderStyle-Wrap="false" ReadOnly="true" SortExpression="FEK_MASA_Id" Display="false" HeaderStyle-Width="0" AllowFiltering="false"></telerik:GridBoundColumn>
                          <telerik:GridBoundColumn UniqueName="MAS_Bez" DataField="MAS_Bez" DataType="System.String" HeaderText="_Bez" ItemStyle-Wrap="false" HeaderStyle-Wrap="false" ReadOnly="true" SortExpression="MAS_Bez" Display="true" HeaderStyle-Width="120" AllowFiltering="false"></telerik:GridBoundColumn>
                          <telerik:GridCheckBoxColumn DataField="MAS_Aktiv" DataType="System.Boolean" HeaderText="_Aktiv" ReadOnly="true" SortExpression="MAS_Aktiv" UniqueName="MAS_Aktiv" Display="false" HeaderStyle-Width="0" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" AllowFiltering="false"></telerik:GridCheckBoxColumn>
                          <telerik:GridTemplateColumn UniqueName="FEK_Obligatorisch" HeaderText="_Obligatorisch" ReadOnly="false" Display="true" HeaderStyle-Width="50" SortExpression="FEK_Obligatorisch" AllowFiltering="false">
                            <ItemTemplate>
                              <cn:agCheckBox ID="FEKObligatorisch" runat="server" Checked="false" />
                            </ItemTemplate>
                          </telerik:GridTemplateColumn>
                          <telerik:GridTemplateColumn UniqueName="FEK_DateGeplant" HeaderText="_Geplant" ReadOnly="false" SortExpression="FEK_DateGeplant" Display="true" HeaderStyle-Width="95" AllowFiltering="false">
                            <ItemTemplate>
                              <cn:agPickerDate ID="FEKDateGeplant" runat="server" Text="" Width="96" DateInput-DateFormat="dd.MM.yyyy" AutoPostBack="false"></cn:agPickerDate>
                            </ItemTemplate>
                          </telerik:GridTemplateColumn>
                          <telerik:GridTemplateColumn UniqueName="FEK_DauerGeplant" HeaderText="_Geplant" ReadOnly="false" SortExpression="FEK_DauerGeplant" Display="true" HeaderStyle-Width="60" AllowFiltering="false">
                            <ItemTemplate>
                              <cn:agTextBoxNumeric ID="FEKDauerGeplant" runat="server" Width="50" AutoPostBack="false" DataType="System.Int32" NumberFormat-DecimalDigits="0" MinValue="0" ShowSpinButtons="true" ></cn:agTextBoxNumeric>
                            </ItemTemplate>
                          </telerik:GridTemplateColumn>
                          <telerik:GridTemplateColumn UniqueName="FEK_PreisGeplant" HeaderText="_Geplant" ReadOnly="false" SortExpression="FEK_DauerGeplant" Display="true" HeaderStyle-Width="80" AllowFiltering="false">
                            <ItemTemplate>
                              <cn:agTextBoxNumeric ID="FEKPreisGeplant" runat="server" Width="70" AutoPostBack="false" DataType="System.Decimal" NumberFormat-DecimalDigits="0" MinValue="0" ></cn:agTextBoxNumeric>
                            </ItemTemplate>
                          </telerik:GridTemplateColumn>
                          <telerik:GridTemplateColumn UniqueName="FEK_Feedback" HeaderText="_Feedback" ReadOnly="false" SortExpression="FEK_Feedback" Display="true" HeaderStyle-Width="60" AllowFiltering="false" >
                            <ItemTemplate>
                              <asp:Image ID="FEKFeedback" runat="server" ToolTip="_" />
                            </ItemTemplate>
                          </telerik:GridTemplateColumn>
                        </Columns>
                      </telerik:GridTableView>
                    </DetailTables>
                  </MasterTableView>
                </telerik:RadGrid>

Thanks for your help!
Markus

[Eyup]

Hi Markus,

I have created a sample RadGrid web site to test the described behavior. On my side the user-entered values are preserved on expand/collapse action because the hierarchy is loaded on client-side. Can you please run the attached application and instruct me the exact steps I need to follow to reproduce the issue?

Regards,
Eyup
Telerik

[Markus]

Hello Eyup

Thanks for your reply and the files.

I have modified the files as followed, so you can reproduce the issue:
(The targetFramework is .NET 3.5. Telerik AJAX Version: 2013.3.1114.35.)

.aspx

OnItemDataBound="grdList_ItemDataBound"
OnPreRender="grdList_PreRender"

.aspx.cs

protected void grdList_ItemDataBound(object sender, GridItemEventArgs e)
{
  if (e.Item is GridDataItem)
  {
    GridDataItem gdi = e.Item as GridDataItem;
    gdi.Edit = true;
  }
}

protected void grdList_PreRender(object sender, EventArgs e)
{
  string strFoo = "";

  if (!Page.IsPostBack)
  {
    grdList.Rebind();
  }

  strFoo += String.Format("Before collapse: <b>{0}</b>{1}", grdList.EditItems.Count, "<br />");

  foreach (GridDataItem gdi in grdList.MasterTableView.Items)
  {
    gdi.Expanded = false;
  }

  strFoo += String.Format("After collapse: <b><span style=\"color: Red;\">{0}</span></b>{1}", grdList.EditItems.Count, "<br />");
  Response.Write(strFoo);

As you can see the DetailGrid-Items are no longer in the grdList.EditItems after collapsing the parents.
And with the next Postback, I don't get the changed Items-values, because they are not in the EditItems-List.

Any suggestions?

Regards
Markus

[Konstantin Dikov]

Hi Markus,

The behavior that you are observing is rather expected. This is due to the fact that when a parent item is initially collapsed, no edit items in the detail tables will be available and vise verse - when you set the Edit property of an item within the detail tables to true, the parent item will be expanded internally.

There is no workaround that will allow you to cover all scenarios, but one thing that I could suggest in order to collapse all items on each postback is to handle the client-side OnGridCreated event, traverse through all items and manually collapse them:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function OnGridCreated(sender, args) {
                var sender = $find("<%=grdList.ClientID%>");
            var dataItems = sender.get_masterTableView().get_dataItems();
                for (var i = 0; i < dataItems.length; i++) {
                    dataItems[i].set_expanded(false);
                }
        }
    </script>
</telerik:RadCodeBlock>

Please note that the above will break the RetainExpandStateOnRebind functionality and even a paging in the detail tables will lead to collapsing the expanded items.


Regards,
Konstantin Dikov
Telerik

[Markus]

Hi Konstantin

Thank you for your information!

Based on that, I changed my code like this:

Sending the grid with every node expanded to the client.
On the client i collapse the desired parent. (I set a javascript array with the Key-Ids of the nodes I want collapse and process this array in the OnGridCreated() event)

The user then begins to modify the datas.
Expands some nodes, collapses some nodes, change some values... and so on.
If the user finishes editing, he presses the Save-button (it's in the CommandItemTemplate of the grid), the postback occures.

On the server-side, when I look now into the grd.EditItems ... There are just the Items listed, which are in Detailtables that were not collapsed by the user, just before hitting the Save-button. I can't, and wont, force the user to let the node open when he's changed something.

My next guess will be: Expanding all nodes before postback ... How to do this? Does this really work?
Or is there a whole other approach to this whole thing?

Thanks for your next ideas!

Regards
Markus

EDIT:
Hello

After expanding all nodes prior to send the postback, all Edititems remains Edititems. Now the changed values can be stored server-side.

What i do:
After the initial handling of collapsed/expanded server-side (by sending an array with the Key-Ids of the Nodes which has to collapse), the client-side handles all following expanding/collapsing stuff itself. (Prior to postback (Save-Button) and onGridCreated() Event)
I have to rebind() the grid on every postback to remain the Save-Button working. If I don't rebind it, the next click on the Save-Button does nothing.
Anyway ... this works for me now. Thx!
(I think, removing the Edititems when a node is collapsed server-side is not the best thing to do. You may considering to change that in a following-up release?)

[Konstantin Dikov]

Hi Markus,

I am really glad to see that you have found a way around the new issue you were facing.

As for changing the grid behavior for keeping the edit items placed within collapsed nodes, this could prove to be a breaking change for many users and should be well considered by our developers. What I could suggest is that you create a new item in our Ideas & Feedback Portal and if it gets enough votes, our developers team will consider implementing the idea in one of our future releases.


Regards,
Konstantin Dikov
Telerik