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

hierarchical client side grid. Losing child selections from viewstate if parent row collapsed

1 Answer 74 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 12 Feb 2013, 06:36 PM
I have a simple 2 level hierarchical grid with parent and child table joined on country id.  HierarchyLoadMode is set to  "Client".  Ive enabled AllowRowSelect="True" in clientsettings.  Its also set to have all parent rows collapsed by default (HierarchyDefaultExpanded="true")

So far so good and it works fine.

Ive put a simple button on the page that posts back  - nothing more.  In future that will loop through all the rows using foreach (GridDataItem item in myRadGrid.Items) and then send the selected output to a datatable etc etc.

What Ive noticed is the following:
 - I expand a country -> I select a region -> I collapse the same country - I click the button -> the page refreshes and all is well - the selected region is showing and the country is expanded - good.  This backs up what I had read, in that local settings such as whether a parent row is collapsed or expanded, and/or a child row is selected our passed back to the server. However,  I then collapse the region and then click the button again. This time the country is collapsed and when I expand it, the region is no longer selected.  I was expecting it to behave exactly as it did first time round.  When I loop through the items in code behind the child rows is not selected either.

I think what is happening here is that the first time round the parent row (country) starts off collapsed and is posted back collapsed.  And it is then able to remember the child rows selected. The second time round it starts off expanded, but is posted back collapsed which I am guessing makes it think no child rows are selected - or something like that. 

I guess there are two solutions:
 1. When a child row is selected then don't allow the user to then collapse the parent row (I imagine this is not too hard to do in javascript)
2. Fix the problem so that it remembers the selected child rows in the second stage described above.

Any help or advice greatly appreciated.  Ive pasted below extract of the mark up  - its pretty simple.

 <asp:Button ID="Button1" runat="server" Text="Button"   />
  <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
     <telerik:RadGrid ID="RadGrid1" DataSourceID="dsCountries" runat="server" AutoGenerateColumns="False"
        AllowMultiRowSelection="False" >

        <ClientSettings>
            <ClientEvents />
            <Selecting AllowRowSelect="True" />
        </ClientSettings>
        <MasterTableView ClientDataKeyNames="CountryID" DataSourceID="dsCountries" DataKeyNames="CountryID"
             HierarchyLoadMode="Client" Width="100%">
                <DetailTables>
                <telerik:GridTableView  HierarchyLoadMode="Client"
                    DataSourceID="dsRegions" Width="100%" GridLines="Horizontal" CssClass="RadGrid2">
                    <ParentTableRelation>
                        <telerik:GridRelationFields DetailKeyField="CountryID" MasterKeyField="CountryID">
                        </telerik:GridRelationFields>
                    </ParentTableRelation>
                    <Columns>
                        <telerik:GridBoundColumn  HeaderText="State" HeaderButtonType="TextButton"
                            DataField="State">
                        </telerik:GridBoundColumn>
                       
                    </Columns>
                </telerik:GridTableView>
            </DetailTables>
             <Columns>
                 <telerik:GridBoundColumn  HeaderText="Country" HeaderButtonType="TextButton"
                    DataField="CountryName">
                </telerik:GridBoundColumn>
               
            </Columns>
            
        </MasterTableView>
    </telerik:RadGrid>

1 Answer, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 14 Feb 2013, 01:17 PM
Hi,

Please try the following Javascript to prevent the Collapsing of the row if any of the Child row is selected.

ASPX:
<ClientSettings>
    <ClientEvents OnHierarchyCollapsing="OnHierarchyCollapsing" />
</ClientSettings>

Javascript:
<script type="text/javascript">
    function OnHierarchyCollapsing(sender, eventArgs) {
        var grid = $find('<%=RadGrid1.ClientID %>');
        var masterTable = grid.get_masterTableView();
        var dataItems = masterTable.get_dataItems();
        for (var i = 0; i < dataItems.length; i++) {
            if (dataItems[i].get_nestedViews().length > 0) {
                var nestedView = dataItems[i].get_nestedViews()[0];
 
                var items = nestedView.get_dataItems();
                for (var j = 0; j < items.length; j++) {
                    if (items[j]._selected == true) {
                        if (eventArgs._itemIndexHierarchical == i) {
                            eventArgs.set_cancel(true);
                        }
                    }
                }
 
            }
        }
    }
</script>

Thanks,
Shinu.
Tags
Grid
Asked by
Mark
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Share this question
or