Hello,

Thank you for the question regarding WebGrid.

Basically, WebGrid doesn’t provide method to collapse the Self Reference WebGrid from server side.
However, WebGrid has provided a method to expand & collapse the Self Reference WebGrid from client side.
There is a method to expand the Self Reference WebGrid from server side.

To show you how to implement those method, I tried to modify one of WebGrid Samples, SelfReferencingGrid.aspx page.
In this modified sample/page, I will expand and collapse the first row. I added a couple of buttons to implement those method.

Here’s the snippet code about expand row from client side:

function Button1_Click(){
    var WebGrid1 = ISGetObject("WebGrid1");
    var row = WebGrid1.RootTable.GetRowByKeyValue("2");
    row.ExpandSelfRefRow();
    return true;
}

Here’s the snippet code about collapse row from client side:

function Button2_Click()
{
    var WebGrid1 = ISGetObject("WebGrid1");
    var row = WebGrid1.RootTable.GetRowByKeyValue("2");
    row.CollapseSelfRefRow();
    return true;
}

Here’s the snippet code about expand row from server side:

protected void Button3_Click(object sender, EventArgs e)
{
    WebGrid1.RootTable.Rows.GetRowByKeyValue("2").ExpandSelfRefRow();
}

I attached the modified sample as well, so that you can have review on the sample. You just simply add the sample to the WebGrid Samples Solution.

In this sample, by default, the row state of the Self Reference WebGrid is Collapse. The expanded row will be collapse after post back. So I don’t need the collapse method in server side to collapse the row.

If you don’t mind, could you inform me more information regarding your current scenario? So that I can help you to find the suitable solution for your current scenario.

Hope this helps.

Regards,
Hans K.

thank you for your reply, i use js code like this:

    // 一键折叠或一键展开        function doCollapseExpand(ctl) {
            var grid = ISGetObject("wg_cwbt");

            if (ctl.value == "一键折叠") {
                document.getElementById("hid_expand_flag").value = "0";
                ctl.value = "一键展开"

                // select the all row
                var rowCount = grid.RootTable.GetRowsCount();

                for (var i = 0; i < rowCount; i++) {
                    var row = grid.RootTable.GetRow(i);

                    // only expand the first row if :
                    // 1) It's a SelfReference row type
                    // 2) It has been expanded
                    if(row.IsSelfRefRow != null)
                    {
                        if (row.IsSelfRefRow) { // && SelfRefExpanded
                            row.CollapseSelfRefRow();
                        }
                    }
                }
            }
            else {
                document.getElementById("hid_expand_flag").value = "1";
                ctl.value = "一键折叠"

                grid.Refresh();
            }
            return;
        }

 but only first row collapsed, see attachment file.

Regards,

RogerChen

I can solution this issue, js code like this:

        // 一键折叠或一键展开        function doCollapseExpand(ctl) {
            var grid = ISGetObject("wg_cwbt");

            if (ctl.value == "一键折叠") {
                document.getElementById("hid_expand_flag").value = "0";
                ctl.value = "一键展开"

                // select the first row
                var rowCount = grid.RootTable.GetRowsCount();

                for (var i = 0; i < rowCount; i++) {
                    var row = grid.RootTable.GetRow(i);
                    if(row != null)
                    {
                        if (row.IsSelfRefRow) { // && SelfRefExpanded
                            row.CollapseSelfRefRow();
                        }
                    }
                }
            }
            else {
                document.getElementById("hid_expand_flag").value = "1";
                ctl.value = "一键折叠"

                grid.Refresh();
            }
            return;
        }

Regards,

RogerChen