How to collapse and expand devexpress master/detail asp.net gridview

asp.netdevexpressgridview

I have two asp.net devexpress gridviews in master/detail configuration. I expand a master row to display the child rows and do manipulations on the child rows such as edit, add new and delete rows. After that I want the parent gridview to collapse and both the gridviews to refresh with new data. Please let me know how could I do it. On devexpress site I see the mention of CollapseRow and ExpandRow javascript clientside methods. But couldn't find any sample code describing how to call those.

Thanks

Best Answer

First assign clientInstanceName to grid as: 

<dx:ASPxGridView ID="ASPxGridView1" runat="server" KeyFieldName="ID" 
            ClientInstanceName="grid">

When you complete update or delete as you said call grid.CollapseAllDetailRows(); after the operation that you have completed. or on ASPxClientGridView.DetailRowExpanding Event set the expanded detail row visibleindex. check the following code snippet and code as per your requirement.

<html>
     <head runat="server">
    <title></title>
    <script language ="javascript" type ="text/javascript">
        var focusedIndex;
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxGridView ID="ASPxGridView1" runat="server" KeyFieldName="ID" ClientInstanceName="grid">
            <ClientSideEvents DetailRowExpanding="function(s, e) {
    focusedIndex = e.visibleIndex;
}" />
            <SettingsBehavior AllowFocusedRow="True" AllowSelectByRowClick = "true" />
            <SettingsDetail ShowDetailRow="True" />
        </dx:ASPxGridView>
        <dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" Text="ASPxButton">
            <ClientSideEvents Click="function(s, e) {
            //var visibleindex =    grid.GetFocusedRowIndex();
            //grid.CollapseAllDetailRows();
            if( focusedIndex  != 'undefined')
            {
            grid.CollapseDetailRow(focusedIndex );
            }
            }"/>
        </dx:ASPxButton>
    </div>
    </form>
</body>
</html>
Related Topic