CODEWITHSUNDEEP
c#cssasp.netgridview
AhabLives
AhabLives

Reputation: 1468

How to set GridView EditItemTemplate Textbox to take maximum cell Width?

I have one Gridview with 5 columns including the edit column. When I click Edit I would like the last column EditItemTemplate Textbox 'The_Title' to take up the maximum width of the cell. It never does! (I can shrink the tbTitle with the Width attribute but not increase) I have tried many things including 'GridView1_RowDataBound'. What am I missing. 

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    for (int i = 0; i < e.Row.Cells.Count - 1; i++)
    {
        if (i == 4)
        {
            e.Row.Cells[i].Attributes.Add("style", "white-space:nowrap;padding:0px;margin:0px;width:500px");

        }
    }
}

GridView .aspx - only thing on the page no update panel (1 GV and 1 SqlDataSouce).

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" Width="1000px" OnRowEditing="GridView1_RowEditing" OnPreRender="GridView1_PreRender" OnRowDataBound="GridView1_RowDataBound" OnRowUpdated="GridView1_RowUpdated" OnRowUpdating="GridView1_RowUpdating">
        <EditRowStyle BackColor="Red" Width="100%"  />        
        <Columns>
            <asp:TemplateField ShowHeader="False">
                <EditItemTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update" Text="Update"></asp:LinkButton>
                    &nbsp;<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel"></asp:LinkButton>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit"></asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="id" InsertVisible="False" SortExpression="id">
                <EditItemTemplate>
                    <asp:Label ID="lblID1" runat="server" Text='<%# Eval("id") %>'></asp:Label>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="lblID2" runat="server" Text='<%# Bind("id") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="The_Source" SortExpression="The_Source">
                <EditItemTemplate>
                    <asp:TextBox ID="tbSrc" runat="server" Text='<%# Bind("The_Source") %>' Width="50px" ></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="lblSrc" runat="server" Text='<%# Bind("The_Source") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Section" SortExpression="Section">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("Section") %>' Width="50px"></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label5" runat="server" Text='<%# Bind("Section") %>' Width="50px"></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="The_Title" SortExpression="The_Title" HeaderStyle-Width="500px" HeaderStyle-BackColor="Red">
                <EditItemTemplate>
                                <div style="white-space:nowrap;background-color:blue;text-align:center;padding:0px;margin:0px;">
                              <asp:TextBox ID="tbTitle" runat="server" Text='<%# Bind("The_Title") %>' Width="500px" style="white-space:nowrap;"></asp:TextBox>
                                </div>
                </EditItemTemplate>
                <ItemTemplate >
                    <asp:Label ID="lblTitle" runat="server" Text='<%# Bind("The_Title") %>' Width="500px"></asp:Label>
                </ItemTemplate>                
                <ControlStyle BackColor="#3399FF" />                
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

// Result image Result GridView1

Any clues would be appreciated. Thank You.

Upvotes: 0

Views: 3170

Answers (2)

DaniDev
DaniDev

Reputation: 2631

Using Browser developer tools, you should be able to inspect the resulting mark-up (HTML) for your text box and tinker with it to see what is causing the size restriction.

IE developer tools (F12) will show you the hierarchical (cascading) order where the width setting is being defined.

Upvotes: 1

VDWWD
VDWWD

Reputation: 35524

Tested your GridView. The TextBox tbTitle is 500 px wide, just as expected. There is probably some bootstrap or other css overwriting the width.

What happens if you add a class for it?

<EditItemTemplate>
    <asp:TextBox ID="tbTitle" runat="server" CssClass="fullWidth" Text='<%# Bind("The_Title") %>'></asp:TextBox>
</EditItemTemplate>

.fullWidth {
    width: 100% !important;
}

Or set it inline as !important. If that does not work then there is probably something else going on.

<asp:TextBox ID="tbTitle" runat="server" style="width: 100% !important" Text='<%# Bind("The_Title") %>'></asp:TextBox>

Upvotes: 1

Related Questions