在編輯模式下動態更改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％」。他們並排，這是我想要的。我需要擴大地址欄來容納兩個控件，以便標籤不會延伸到下一列。

有沒有辦法將地址列設置爲可容納兩個控件的寬度？

謝謝。

Answer 1

嘗試使用<EditRowStyle>元到GridView ::

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