obout Grid referesh Master Grid after update DetailGrid and keep expand DetailGrid

Question

am using Obout Grid with asp.net c# we have a nested Obout Grid am editing Details Grid after perform the update we want refresh the Master Grid and after refresh we want keep the expand which is updated my Grid is

<obout:Grid ID="GrdVendor" runat="server" AutoGenerateColumns="false" AutoPostBackOnSelect="false"
                    AllowSorting="false" ShowFooter="false" AllowPaging="false" Width="100%" Height="370px"
                    PageSize="0" AllowAddingRecords="false" AllowPageSizeSelection="false">
                    <ScrollingSettings ScrollHeight="500" />
                    <Columns>
                        <obout:Column DataField="ORG_ID" Visible="false" HeaderText="Org ID">
                        </obout:Column>
                        <obout:Column DataField="VENDOR_ID" Visible="false" HeaderText="VENDOR ID">
                        </obout:Column>
                        <obout:Column DataField="ORGANIZATION_NAME" Visible="true" HeaderText="Organization Name"
                            Width="33%">
                        </obout:Column>
                        <obout:Column DataField="outstanding_amt" Visible="true" HeaderText="Outstanding Amt"
                            Width="33%" HeaderAlign="right" Align="right">
                        </obout:Column>
                        <obout:Column DataField="OUTSTANDING_REQ_AMT" Visible="true" HeaderText="Outstanding Req Amt"
                            Width="33%" HeaderAlign="right" Align="right">
                        </obout:Column>
                    </Columns>
                    <MasterDetailSettings LoadingMode="OnCallback" />
                    <DetailGrids>
                        <obout:DetailGrid runat="server" ID="GrdCategoryDetails" ForeignKeys="VENDOR_TYPE_LOOKUP_CODE,VENDOR_ID,ORG_ID"
                            AllowSorting="false" DataSourceID="vendor_Details" PageSize="10" AllowPaging="true"
                            Width="98%" AllowAddingRecords="false" AllowPageSizeSelection="true" AutoGenerateColumns="false"
                            ShowCollapsedGroups="false" ShowFooter="true" AllowDataAccessOnServer="true"
                            OnUpdateCommand="GrdCategoryDetails_UpdateCommand">
                            <ScrollingSettings ScrollHeight="250" />
                            <ClientSideEvents OnClientUpdate="onCommand" ExposeSender="true" />
                            <Columns>
                                <obout:Column DataField="ORG_ID" Visible="false" HeaderText="Org ID" ReadOnly="true">
                                </obout:Column>
                                <obout:Column DataField="VENDOR_ID" Visible="false" HeaderText="Vendor ID" ReadOnly="true">
                                </obout:Column>
                                <obout:Column DataField="VENDOR_TYPE_LOOKUP_CODE" Visible="true" HeaderText="Broker Type"
                                    ReadOnly="true" Width="33%">
                                </obout:Column>
                                <obout:Column DataField="OUTSTANDING_AMT" Visible="true" HeaderText="Outstanding Amt"
                                    HeaderAlign="right" Align="right" ReadOnly="true" Width="33%">
                                </obout:Column>
                                <obout:Column DataField="OUTSTANDING_REQ_AMT" Visible="true" HeaderText="Outstanding Req Amt"
                                    HeaderAlign="right" Align="right" Width="33%">
                                </obout:Column>
                                <obout:Column ID="Column1" AllowEdit="true" HeaderText="Edit" Width="100" runat="server">
                                </obout:Column>
                            </Columns>
                            <DetailGrids>
                                <obout:DetailGrid runat="server" ID="GrdvendorDetailsGrid" ForeignKeys="VENDOR_TYPE_LOOKUP_CODE,VENDOR_ID,ORG_ID"
                                    AutoGenerateColumns="false" AllowSorting="false" DataSourceID="Vendor_Details1"
                                    PageSize="10" AllowPaging="true" Width="98%" AllowAddingRecords="false">
                                    <Columns>
                                        <obout:Column DataField="ORG_ID" Visible="false" HeaderText="Org ID" ReadOnly="true">
                                        </obout:Column>
                                        <obout:Column DataField="VENDOR_ID" Visible="false" HeaderText="Vendor ID" ReadOnly="true">
                                        </obout:Column>
                                        <%--<obout:Column DataField="VENDOR_TYPE_LOOKUP_CODE" Visible="true" HeaderText="Broker Type"
                                    ReadOnly="true" Width="25%">
                                </obout:Column>--%>
                                        <obout:Column DataField="VENDOR_NAME" Visible="true" HeaderText="Vendor Name" ReadOnly="true"
                                            Width="33%">
                                        </obout:Column>
                                        <obout:Column DataField="OUTSTANDING_AMT" Visible="true" HeaderText="Outstanding Amt"
                                            HeaderAlign="right" Align="right" ReadOnly="true" Width="33%">
                                        </obout:Column>
                                        <obout:Column DataField="OUTSTANDING_REQ_AMT" Visible="true" HeaderText="Outstanding Req Amt"
                                            HeaderAlign="right" Align="right" Width="33%">
                                        </obout:Column>
                                    </Columns>
                                    <DetailGrids>
                                        <obout:DetailGrid runat="server" ID="GrdInvoiceDetailsGrid" AutoGenerateColumns="false"
                                            AllowAddingRecords="false" AllowSorting="false" AllowPaging="true" PageSize="10"
                                            ForeignKeys="VENDOR_TYPE_LOOKUP_CODE,VENDOR_ID,ORG_ID" Width="98%" DataSourceID="SqlDataSource_InvoiceDetails">
                                            <Columns>
                                                <obout:Column DataField="INVOICE_ID" HeaderText="Invoice ID" ReadOnly="true" Visible="false">
                                                </obout:Column>
                                                <obout:Column DataField="ORG_ID" HeaderText="ORG_ID" ReadOnly="true" Visible="false">
                                                </obout:Column>
                                                <obout:Column DataField="ORGANIZATION_NAME" HeaderText="Organization Name" Wrap="true"
                                                    ReadOnly="true" Width="18%">
                                                </obout:Column>
                                                <obout:Column DataField="PROJECT_DESCRIPTIONS" HeaderText="Project" Wrap="true" Width="12%"
                                                    ReadOnly="true">
                                                </obout:Column>
                                                <obout:Column DataField="INVOICE_NUM" HeaderText="Invoice Num" Wrap="true" ReadOnly="true"
                                                    Width="12%">
                                                </obout:Column>
                                                <obout:Column DataField="INVOICE_DATE" HeaderText="Invoice Date" Wrap="true" ReadOnly="true"
                                                    Width="13%" DataFormatString="{0:MM/dd/yyyy}">
                                                </obout:Column>
                                                <obout:Column DataField="INVOICE_AMT" HeaderText="Invoice Amt" Wrap="true" ReadOnly="true"
                                                    HeaderAlign="right" Align="right" Width="13%">
                                                </obout:Column>
                                                <obout:Column DataField="OUTSTANDING_AMT" HeaderText="Outstanding Amt" Wrap="true"
                                                    HeaderAlign="right" Align="right" Width="15%" ReadOnly="true">
                                                </obout:Column>
                                                <obout:Column DataField="OUTSTANDING_REQ_AMT" HeaderText="Outstanding Req Amt" Wrap="true"
                                                    HeaderAlign="right" Width="15%" Align="right">
                                                </obout:Column>
                                            </Columns>
                                        </obout:DetailGrid>
                                    </DetailGrids>
                                </obout:DetailGrid>
                            </DetailGrids>
                        </obout:DetailGrid>
                    </DetailGrids>
                </obout:Grid>


<script type="text/javascript">
    function onCommand(sender, record) {
        var masterGrid = getMasterGrid(sender.ID, null);
        window.setTimeout(masterGrid.ID + '.refresh();', 250);
    }

    function getMasterGrid(detailGridId, currentGrid) {
        if (!currentGrid) {
            currentGrid = GrdVendor;
        }

        if (currentGrid.DetailGrids) {
            for (var i = 0; i < currentGrid.DetailGrids.length; i++) {
                if (currentGrid.DetailGrids[i].ID == detailGridId) {
                    return currentGrid;
                } else {
                    var masterGrid = getMasterGrid(detailGridId, currentGrid.DetailGrids[i]);
                    if (masterGrid != null) {
                        return masterGrid;
                    }
                }
            }
        }

        return null;
    }
</script>

Lesmian · Accepted Answer · 2016-04-14T10:19:46.817

I've recreated your example and here is my answer:

<script type="text/javascript">
    var expandedDetailsIndexes = '';

    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function () {
                if (oldonload) {
                    oldonload();
                }
                func();
            }
        }
    }

    function AttachEvents() {
        oboutGrid.prototype.manageDetailGridsExpandedState_old = oboutGrid.prototype.manageDetailGridsExpandedState;
        oboutGrid.prototype.manageDetailGridsExpandedState = function (obj) {
            var currentRow = obj.parentNode.parentNode.parentNode.parentNode;
            this.manageDetailGridsExpandedState_old(obj);
            storeExpandedDetails(this.ID, this.getElementIndex(currentRow));
        }
    }

    function storeExpandedDetails(gridId, rowIndex) {
        var expandedDetails = expandedDetailsIndexes;

        var existingElement = false;
        if (expandedDetails != '') {
            var arrExpandedDetails = expandedDetails.split(',');

            var gridBaseId = gridId;

            if (gridBaseId.indexOf('_') != -1) {
                gridBaseId = gridId.substr(0, gridId.indexOf('_'));
            }
            for (var i = 0; i < arrExpandedDetails.length; i += 2) {
                if (arrExpandedDetails[i].indexOf(gridBaseId) == 0) {
                    arrExpandedDetails[i] = gridId;
                    arrExpandedDetails[i + 1] = rowIndex;

                    existingElement = true;
                }
            }
        } else {
            var arrExpandedDetails = new Array();
        }

        if (!existingElement) {
            arrExpandedDetails.push(gridId);
            arrExpandedDetails.push(rowIndex);
        }

        expandedDetailsIndexes = arrExpandedDetails.join(',');
    }

    function restoreExpandedDetails(tempExpandedDetails) {
        if (tempExpandedDetails != '') {
            var arrExpandedDetails = tempExpandedDetails.split(',');

            var gridId = arrExpandedDetails.shift();
            var rowIndex = arrExpandedDetails.shift();

            try {
                var grid = eval(gridId);
                grid.getExpandCollapseDetailsButtonForRow(grid.GridBodyContainer.firstChild.firstChild.childNodes[1].childNodes[rowIndex]).onclick();
                tempExpandedDetails = arrExpandedDetails.join(',');
            } catch (ex) {
            }

            window.setTimeout(function () { restoreExpandedDetails(tempExpandedDetails); }, 500);
        }
    }


    function onCommand(sender, record) {
        var masterGrid = getMasterGrid(sender.ID, null);
        eval(masterGrid.ID + '.refresh();');
        window.setTimeout(function () {             
            restoreExpandedDetails(expandedDetailsIndexes);
        }, 250);
    }

    function getMasterGrid(detailGridId, currentGrid) {
        if (!currentGrid) {
            currentGrid = GrdVendor;
        }

        if (currentGrid.DetailGrids) {
            for (var i = 0; i < currentGrid.DetailGrids.length; i++) {
                if (currentGrid.DetailGrids[i].ID == detailGridId) {
                    return currentGrid;
                } else {
                    var masterGrid = getMasterGrid(detailGridId, currentGrid.DetailGrids[i]);
                    if (masterGrid != null) {
                        return masterGrid;
                    }
                }
            }
        }

        return null;
    }

    addLoadEvent(function () {
        AttachEvents();
    });
</script>

First Thanks for the rply, we want Refresh the Parent Grid after perform the Update on child Grid that is not working on your Code — ash060, Apr 14 '16 at 09:13
@AT How is not refreshing when I call masterGrid.ID + '.refresh();';? — Lesmian, Apr 14 '16 at 09:27
its throw the Error Uncaught TypeError: Cannot read property 'split' of undefined — ash060, Apr 14 '16 at 09:42
Give the syntax :-var arrExpandedDetails = expandedDetails.split(','); — ash060, Apr 14 '16 at 09:51
can u explain me this syntax var expandedDetails = expandedDetailsIndexes; — ash060, Apr 14 '16 at 10:04
@AT Ok, I've updated my answer because it had a minor issue. In my code I just bind to obout events to store indexes or expanded rows and then restore them after grid refresh. — Lesmian, Apr 14 '16 at 10:21

obout Grid referesh Master Grid after update DetailGrid and keep expand DetailGrid

1 Answers1