c# - 在编辑模式下动态更改 Gridview 列宽

Question

我有一个 gridview，当处于编辑模式时，它可以在 1 列中显示 1 或 2 个控件，具体取决于在另一列中选择的下拉列表。一个控件是文本框，另一个是标签。我首先有文本框，然后是文本框旁边的标签。我的问题是当显示文本框和标签时，标签的文本延伸到下一列。我希望列宽与显示的控件一样宽。我该怎么做？

这是我对网格的标记:

<div id="DeviceGridWrapper">        
    <asp:TextBox ID="RecipientID" runat="server" Visible="false"> </asp:TextBox>
    <asp:GridView ID="DeviceInfoGridView" runat="server" 
        AutoGenerateColumns="False" Caption="Device Information" 
        CaptionAlign="Top" CssClass="grid" RowStyle-Wrap="true" 
        HorizontalAlign="Left" ShowFooter="True" PageSize="5" 
        ShowHeaderWhenEmpty="False" 
        OnRowCancelingEdit="DeviceInfoGridView_RowCancelingEdit" 
        OnRowDataBound="DeviceInfoGridView_RowDataBound"
        OnRowDeleting="DeviceInfoGridView_RowDeleting" 
        OnRowEditing="DeviceInfoGridView_RowEditing" 
        OnRowUpdating="DeviceInfoGridView_RowUpdating" AllowPaging="True" 
        ondatabound="DeviceInfoGridView_DataBound" 
        onrowcommand="DeviceInfoGridView_RowCommand">      
        <Columns>
            <asp:TemplateField HeaderText="Device ID">
                <ItemTemplate>
                    <asp:Label ID="digvLblDeviceID" runat="server" Text='<%# Bind("DeviceID") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="Device"  ItemStyle-Wrap="false">
                 <ItemTemplate>
                    <asp:Label ID="digvLblDeviceName" runat="server" Text='<%# Bind("DeviceName") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:Label ID="digvEditDeviceName" runat="server" Visible="false" Text='<%# Bind("DeviceName") %>'></asp:Label>
                    <asp:DropDownList ID="digvDDListDeviceName" runat="server" ClientIDMode="Static"
                            data-placeholder="Choose device…" class="chosen-single"></asp:DropDownList>
                    <asp:RequiredFieldValidator ID="ReqValueDDLDeviceNameEdit" runat="server"  
                            ControlToValidate="digvDDListDeviceName" ValidationGroup="EditDeviceValidation" 
                            ErrorMessage="Selection required." CssClass="message-error-dropdown">
                    </asp:RequiredFieldValidator>
                </EditItemTemplate>
                <FooterTemplate>
                    <asp:DropDownList ID="digvDDListDeviceNameInsert" runat="server" ClientIDMode="Static"
                             data-placeholder="Choose device…" class="chosen-single">
                    </asp:DropDownList>
                    <asp:RequiredFieldValidator ID="ReqValueDDLDeviceNameInsert" runat="server" InitialValue="0" 
                            ControlToValidate="digvDDListDeviceNameInsert" ValidationGroup="InsertDeviceValidation" 
                            ErrorMessage="Selection required." CssClass="message-error-dropdown">
                    </asp:RequiredFieldValidator>
                </FooterTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="Service Provider">                  
                <ItemTemplate>
                    <asp:Label ID="digvLblServiceName" runat="server" Text='<%# Bind("ServiceName") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:Label ID="digvEditServiceName" runat="server" Visible="false" Text='<%# Bind("ServiceName") %>'></asp:Label>
                    <asp:DropDownList ID="digvDDListServiceName" runat="server" ClientIDMode="Static" 
                            OnSelectedIndexChanged="DeviceInfoGridView_SelectedIndexChanged_EditServiceName" AutoPostBack="true" EnableViewState="true" 
                            data-placeholder="Choose service…" class="chosen-single"></asp:DropDownList>
                     <asp:RequiredFieldValidator ID="ReqValueDDLServiceNameEdit" runat="server" 
                            ControlToValidate="digvDDListServiceName" ValidationGroup="EditDeviceValidation" 
                            ErrorMessage="Selection required." CssClass="message-error-dropdown">
                    </asp:RequiredFieldValidator>
                </EditItemTemplate>
                <FooterTemplate>
                    <asp:DropDownList ID="digvDDListServiceNameInsert" runat="server" ClientIDMode="Static" Enabled="false"
                             data-placeholder="Choose service…" class="chosen-single">
                    </asp:DropDownList>
                    <asp:RequiredFieldValidator ID="ReqValueDDLServiceNameInsert" runat="server" InitialValue="0" 
                            ControlToValidate="digvDDListServiceNameInsert" ValidationGroup="InsertDeviceValidation" 
                            ErrorMessage="Selection required." CssClass="message-error-dropdown">
                    </asp:RequiredFieldValidator>
                </FooterTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="Address">                 
                <ItemTemplate>
                    <asp:Label ID="digvLblAddress" runat="server" Text='<%# Bind("Address") %>'></asp:Label>
                </ItemTemplate>
                 <EditItemTemplate>                       
                    <asp:TextBox ID="digvTxtBoxAddress" runat="server" Text='<%# Bind("Address") %>' Width="50%" ClientIDMode="Static"></asp:TextBox>
                    <asp:Label ID="digvEditAddressExt" runat="server" Visible="false" Text='<%# Bind("ServiceExtension") %>' Width="40%" 
                        ClientIDMode="Static"></asp:Label>
                    <asp:RequiredFieldValidator ID="ReqValueAddressEdit" runat="server" 
                            ControlToValidate="digvTxtBoxAddress" ValidationGroup="EditDeviceValidation" 
                            ErrorMessage="Required field." CssClass="message-error">
                    </asp:RequiredFieldValidator>
                    <asp:CustomValidator ID="CustomValAddressEdit" runat="server" ControlToValidate="digvTxtBoxAddress" CssClass="message-error" 
                        ErrorMessage="*" ClientValidationFunction="ValidateAddressEdit" EnableClientScript="true" 
                        ValidationGroup="EditDeviceValidation"  ></asp:CustomValidator>
                </EditItemTemplate>
                <FooterTemplate>
                    <asp:TextBox ID="digvTxtBoxAddressInsert" runat="server" ClientIDMode="Static"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="ReqValueAddressInsert" runat="server" 
                            ControlToValidate="digvTxtBoxAddressInsert" ValidationGroup="InsertDeviceValidation" 
                            ErrorMessage="Required field." CssClass="message-error">
                    </asp:RequiredFieldValidator>
                </FooterTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="Active">                   
                <ItemTemplate>
                    <asp:Label ID="digvLblActive" runat="server" Text='<%# (Boolean.Parse(Eval("Active").ToString())) ? "Yes" : "No" %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:DropDownList ID="digvDDListActive" runat="server"  Text='<%# (Boolean.Parse(Eval("Active").ToString())) ? "Yes" : "No" %>'>
                        <asp:ListItem>Yes</asp:ListItem>
                        <asp:ListItem>No</asp:ListItem>
                    </asp:DropDownList>
                </EditItemTemplate>
                <FooterTemplate>
                     <asp:DropDownList ID="digvDDListActiveInsert" runat="server">
                        <asp:ListItem Selected="True">Yes</asp:ListItem>
                        <asp:ListItem>No</asp:ListItem>
                    </asp:DropDownList>
                </FooterTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="Action" ShowHeader="False" ItemStyle-Wrap="false" ItemStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    <asp:Button ID="digvEditButton" runat="server" CausesValidation="True" CommandName="Edit" 
                                Text="Edit" CssClass="gridActionbutton" ValidationGroup="EditDeviceValidation">
                    </asp:Button>
                    &nbsp;<asp:Button ID="digvDeleteButton" runat="server" CausesValidation="False" CommandName="Delete" 
                                Text="Delete" CssClass="gridActionbutton"  OnClientClick="return confirm('Are you sure you want to delete this Device Information?')" >
                    </asp:Button>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:Button ID="digvUpdateButton" runat="server" CausesValidation="True" ValidationGroup="EditDeviceValidation" CommandName="Update" 
                                    Text="Update" CssClass="gridActionbutton"></asp:Button>
                    &nbsp;<asp:Button ID="uigvCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" 
                                    Text="Cancel" CssClass="gridActionbutton"></asp:Button>
                </EditItemTemplate> 
                <FooterTemplate>
                    <asp:Button ID="digvAddButton" runat="server" CommandName="Add" Text="Add Device" Width="90%" CausesValidation="true" 
                                CssClass="gridActionbutton" ValidationGroup="InsertDeviceValidation">
                    </asp:Button>
                </FooterTemplate>                   
            </asp:TemplateField>
        </Columns>
        <EmptyDataTemplate>
            <tr>
                <th>Device ID</th>
                <th>Device</th>
                <th>Service Provider</th>
                <th>Address</th>
                <th>Active</th>
                <th>Action</th>
            </tr>
            <tr>
                <td colspan="7" style="text-align:center;">
                    No Devices were found for you. Devices can be added by clicking the 'Add Device' Button.
                </td> 
            </tr>
            <tr>
                <td></td>
                <td>
                    <asp:DropDownList ID="digvDDListDeviceNameInsert" runat="server" ClientIDMode="Static"
                             data-placeholder="Choose device…" class="chosen-single">
                    </asp:DropDownList>    
                     <asp:RequiredFieldValidator ID="ReqValueDDLDeviceNameEmpty" runat="server" InitialValue="0" 
                            ControlToValidate="digvDDListDeviceNameInsert" ValidationGroup="InsertDeviceValidationEmpty" 
                            ErrorMessage="Selection required." CssClass="message-error-dropdown">
                    </asp:RequiredFieldValidator>   
                </td>
                <td>
                     <asp:DropDownList ID="digvDDListServiceNameInsert" runat="server" ClientIDMode="Static" Enabled="false"
                             data-placeholder="Choose service…" class="chosen-single">
                    </asp:DropDownList>
                     <asp:RequiredFieldValidator ID="ReqValueDDLServiceNameEmpty" runat="server" InitialValue="0" 
                            ControlToValidate="digvDDListServiceNameInsert" ValidationGroup="InsertDeviceValidationEmpty" 
                            ErrorMessage="Selection required." CssClass="message-error-dropdown">
                    </asp:RequiredFieldValidator>    
                </td>
                <td>
                    <asp:TextBox ID="digvTxtBoxAddressInsert" runat="server" ClientIDMode="Static"></asp:TextBox> 
                    <asp:RequiredFieldValidator ID="ReqValueAddressEmpty" runat="server" 
                            ControlToValidate="digvTxtBoxAddressInsert" ValidationGroup="InsertDeviceValidationEmpty" 
                            ErrorMessage="Required field." CssClass="message-error">
                    </asp:RequiredFieldValidator>   
                </td>
                <td>
                    <asp:DropDownList ID="digvDDListActiveInsert" runat="server">
                        <asp:ListItem Selected="True">Yes</asp:ListItem>
                        <asp:ListItem>No</asp:ListItem>
                    </asp:DropDownList>
                </td>
                <td>
                    <asp:Button ID="digvAddButtonEmpty" runat="server" CommandName="Add" Text="Add Device" Width="90%" CausesValidation="true" 
                        CssClass="gridActionbutton" ValidationGroup="InsertDeviceValidationEmpty">
                    </asp:Button>
                </td>
            </tr>
        </EmptyDataTemplate>   
     </asp:GridView>
</div>

这是我当前的网格样式:

 .grid 
    {background-color: #fff; 
    border: solid 2px #000; 
    border-collapse:collapse; 
    color: #FFF; overflow:auto
    }

    .grid td {
        padding-left: 5px;    
        color: #000; 
        font-size: medium;
    }

    .grid th  {    
          color: #000;
          background: #99C3BB; 
          font-size: medium;
          font-weight: bold;
    }

    .grid caption {
            color: #000;
            text-align:center;
            font-weight:bold;
            font-size:1.2em;
            padding: 2px;
            background-color: #99C3BB; 
            border: 2px solid black; 
        }

    .grid table tr td { 
          color: #000;   
          font-size: small;
          padding: 5px;
    }

    #DeviceGridWrapper
    {
       height: 250px;  
       width: 100%;
       padding-bottom: 10px; 
    }

出现问题的列是“地址”列。当仅文本框显示时，宽度以编程方式设置为“90%”。当显示文本框和标签时，文本框设置为“50%”，标签为“40%”。它们是并排的，这就是我想要的。我需要加宽 Address 列以容纳两个控件，这样标签就不会延伸到下一列。

有没有办法将 Address 列设置为适合两个控件的宽度？

谢谢。

Answer 1

尝试使用 <EditRowStyle> 元素到 GridView::

<asp:GridView ID="GridView1" runat="server">
    <EditRowStyle BackColor="Red" Width="100%" />
</asp:GridView>