0

私は大まかにこのリンクのコンセプトに従っています。入れ子になった GridView をシミュレートするには。次のようになります。

詳細を表示するボタンRow

基本的に、display:noneJavaScript を使用して切り替えたい 2 番目の行を作成しています。

JavaScript と aspx コード:

<script type="text/javascript" language="JavaScript">
    function detailsToggle(Company_ID) {
        try {
            detail_row = document.getElementById('detailsRow_' + Company_ID);
            parent_row = document.getElementById('parentRow_' + Company_ID);
            img = parent_row.cells[0].firstChild;

            if (detail_row.className !== 'hidden') {
                detail_row.className = detail_row.className + ' hidden';
                img.src = '../Images/icons/+.gif';
            }
            else {
                detail_row.className = detail_row.className.replace(/\bhidden\b/, '');
                img.src = '../Images/icons/-.gif';
            }
        }
        catch(ex) { alert(ex); }
    }
</script>
<style type="text/css">
    .hidden 
    {
        display: none;
    }
</style>
<asp:GridView ID="gvLegalEntityBrowser" DataKeyNames="Company_ID" AutoGenerateColumns="False"
    runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" 
    OnRowDataBound="gvLegalEntityBrowser_RowDataBound" OnPageIndexChanging="pagingIndexChanged"
    AllowPaging="True" PageSize="25" AllowSorting="false">
    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
               <%--Placeholder --%>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="CompanyCode" HeaderText="CompanyCode" SortExpression="CompanyCode" />
        <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
    </Columns>
    <EmptyDataTemplate>No data</EmptyDataTemplate>
    <EditRowStyle BackColor="#999999" />
    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
    <SortedAscendingCellStyle BackColor="#E9E7E2" />
    <SortedAscendingHeaderStyle BackColor="#506C8C" />
    <SortedDescendingCellStyle BackColor="#FFFDF8" />
    <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>

...そして私の apsx.cs RowDataBound メソッド:

//Idea from : http://www.codeproject.com/Articles/160773/Expandable-Rows-in-GridView
protected void gvLegalEntityBrowser_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        GridViewRow gvRow = e.Row as GridViewRow;
        Int64 iCompanyID = 0;   //Get Company_ID for Legal Entity Row
        iCompanyID = System.Convert.ToInt64(gvLegalEntityBrowser.DataKeys[gvRow.RowIndex]["Company_ID"]);
        GridView gvLegalEntityRelation = new GridView();
        gvRow.ID = "parentRow_" + iCompanyID;
        gvRow.ClientIDMode = ClientIDMode.Static;   //Set HTML ID element = control.ID

        //Add javascript toggle button to each row
        System.Web.UI.WebControls.ImageButton toggleButton = new System.Web.UI.WebControls.ImageButton();
        toggleButton.ID = "btnToggle_" + iCompanyID;
        toggleButton.ImageUrl = "../Images/icons/+.gif";
        toggleButton.OnClientClick = "detailsToggle(" + (iCompanyID) + ")";
        gvRow.Cells[0].Controls.Add(toggleButton);
        toggleButton.Attributes.Add("onmouseover","this.style.cursor='hand'");
        toggleButton.Attributes.Add("onmouseout", "this.style.cursor='default'");

        using (dsLegalEntitiesTableAdapters.View_LegalEntityRelationCountTableAdapter daLERelCount = new dsLegalEntitiesTableAdapters.View_LegalEntityRelationCountTableAdapter())
        {
            //Set Details Data Source
            gvLegalEntityRelation.DataSource = daLERelCount.GetRelationsDataByCompanyID(iCompanyID);
            gvLegalEntityRelation.AutoGenerateColumns = true;

            GridViewRow detailsgvRow = new GridViewRow(gvRow.RowIndex + 1, -1, DataControlRowType.EmptyDataRow, DataControlRowState.Normal);
            detailsgvRow.CssClass = "hidden";
            detailsgvRow.ID = "detailsRow_" + iCompanyID;
            detailsgvRow.ClientIDMode = ClientIDMode.Static;    //Set HTML ID element = control.ID
            TableCell cell = new TableCell();
            cell.ColumnSpan = 4;
            cell.BorderStyle = BorderStyle.None;
            cell.Controls.Add(gvLegalEntityRelation);
            detailsgvRow.Cells.Add(cell);
            ((GridView)sender).Controls[0].Controls.Add(detailsgvRow);

            gvLegalEntityRelation.DataBind();
        }
    }
}

JavaScript は正常に動作し、正しい Result が一瞬だけ表示されます。

ここに画像の説明を入力

...しかし、親 GridView は次のように再構築されます。

JavaScript の実行後

Q: GridView の再構築の原因を考えている人はいますか?

4

1 に答える 1