Width of whole page extends when 'Edit' is selected - UpdateMethod

Question

User341213469 posted

Hi guys!

My web forms's UpdateMethod in GridView controller which when I click on the 'Edit' button, it automatically extends the width of my whole page resulting in having the user to horizontally scroll it.

What I mean is the Fields boxes actually are too long which causes the problem for me.

Does anyone have a solution to this problem?

<asp:GridView runat="server" ID="productsGrid"
        ItemType="ProjectOne.Models.Product" DataKeyNames="ProductID"
        SelectMethod="productsGrid_GetData"
        UpdateMethod="productsGrid_UpdateItem" DeleteMethod="productsGrid_DeleteItem"
        AllowSorting="true" AllowPaging="true" PageSize="4"
        AutoGenerateEditButton="true" AutoGenerateDeleteButton="true"
        AutoGenerateColumns="false">
        <Columns>
            <asp:DynamicField DataField="ProductID" />
            <asp:DynamicField DataField="ProductName" />
            <asp:DynamicField DataField="ProductDescription" />
            <asp:DynamicField DataField="Quantity" />
            <asp:DynamicField DataField="PriceEach" />
            <asp:DynamicField DataField="TransactDate" />
            <asp:DynamicField DataField="SoP" />
            <asp:DynamicField DataField="ProductCode" />
        </Columns>
    </asp:GridView>

Thanks in advance!

Answer 1

User1563932795 posted

You can set the ControlStyle-Width. Something like this:

        <Columns>
            <asp:DynamicField DataField="ProductID" ControlStyle-Width="10" />
            <asp:DynamicField DataField="ProductName" ControlStyle-Width="10" />
            <asp:DynamicField DataField="ProductDescription" ControlStyle-Width="10" />
            <asp:DynamicField DataField="Quantity" ControlStyle-Width="10" />
            <asp:DynamicField DataField="PriceEach" ControlStyle-Width="10" />
            <asp:DynamicField DataField="TransactDate" ControlStyle-Width="10" />
            <asp:DynamicField DataField="SoP" ControlStyle-Width="10" />
            <asp:DynamicField DataField="ProductCode" ControlStyle-Width="10" />
        </Columns>

Answer 2

User-933407369 posted

hi alan_ogz83,

you had posted the similar thread(http://forums.asp.net/t/1952824.aspx?UpdateMethod+extends+the+width+of+the+whole+page+in+GridView+I+need+to+set+it+smaller+Help+) before, had you tried it out ?

Wordwrap have problem when the text is too long (without space in text), my solution is using css: hidden text if it's too long.

This is sample code:

     <Columns>
                    <asp:TemplateField HeaderText="Parameter path">
                        <ItemTemplate>
                            <div class="paraGraphtext">
                                <asp:Label ID="lblId" runat="server" Text='<%# Eval("tableField") %>'></asp:Label>
                            </div>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>

Css:

.paraGraphtext
        {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width:150px;
        }

Please refer to the link below:

http://jsfiddle.net/happyu0223/ddEPB/12/

Hope it helps you.