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

时间:2015-04-08 13:43:52

标签: c# css asp.net

我有一个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; 
    }

问题的列是&#39;地址&#39;柱。当只有文本框显示宽度设置为&#39; 90%&#39;编程。显示文本框和标签时,文本框设置为“50%”。标签是40%&#39;。它们是并排的,这就是我想要的。我需要扩展Address列以容纳两个控件,以便标签不会延伸到下一列。

有没有办法将Address列设置为容纳两个控件的宽度?

感谢。

1 个答案:

答案 0 :(得分:0)

尝试将<EditRowStyle>元素用于GridView ::

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