How to wrap all the columns in the GridView to the screenSize in ASP.NET

Question

I have a Gridview, I am trying to wrap all the columns of my Gridview to the screen size(Width= 100%). I tried to set the RowStyle Wrap="true" in the Gridview properties and set the ItemStyle Wrap="true" .I even tried applying the CSS Properties. But it didn't work. Can anybody help me out?

Aspx page Code:

        <asp:GridView ID="SalesRepresentativeGridView" runat="server" AutoGenerateColumns="false" Width="98%" Style="margin: 0% 1% 0% 1%"
                    OnRowEditing="SalesRepresentative_RowEditing" OnRowCancelingEdit="SalesRepresentative_RowCancelingEdit" OnRowDataBound="SalesRepresentative_RowDataBound"
                    OnRowUpdating="SalesRepresentative_RowUpdating" AllowPaging="true" PageSize="10" AllowSorting="true" OnPageIndexChanging="SalesRepresentative_PageIndexChanging"
                    CssClass="SegmentGV" OnSorting="SalesRepresentative_SortData" DataKeyNames="SalesRepContactID" >

                    <Columns>
                        <asp:CommandField ShowEditButton="true" ItemStyle-Width="50" />
                        <asp:BoundField DataField="SalesRepContactID" HeaderText="SalesRep ID" Visible="false" ReadOnly="true">
                            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle"></ItemStyle>
                        </asp:BoundField>


                        <asp:TemplateField HeaderText="First Name">
                            <ItemTemplate>
                                <asp:Label runat="server" ID="SalesRepFirstName" Text='<%# Eval("SalesRepFirstName")%>'></asp:Label>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:TextBox ID="SalesRepFirstName" runat="server" Text='<%# Eval("SalesRepFirstName")%>'></asp:TextBox>
                            </EditItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Last Name">
                            <ItemTemplate>
                                <asp:Label runat="server" ID="SalesRepLastName" Text='<%# Eval("SalesRepLastName")%>'></asp:Label>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:TextBox ID="SalesRepLastName" runat="server" Text='<%# Eval("SalesRepLastName")%>'></asp:TextBox>
                            </EditItemTemplate>
                        </asp:TemplateField>


                        <asp:TemplateField HeaderText="Title">
                            <ItemTemplate>
                                <asp:Label runat="server" ID="Title" Text='<%# Eval("Title")%>'></asp:Label>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:TextBox ID="Title" runat="server" Text='<%# Eval("Title")%>'></asp:TextBox>
                            </EditItemTemplate>
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="Hire Date">
                            <ItemTemplate>
                                <asp:Label runat="server" ID="HireDate" Text='<%#DataBinder.Eval(Container.DataItem, "HireDate").ToString()%>'></asp:Label>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:TextBox ID="HireDate" runat="server" ReadOnly="true" Text='<%#Bind("HireDate") %>'></asp:TextBox>
                            </EditItemTemplate>
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="Termination Date">
                            <ItemTemplate>
                                <asp:Label runat="server" ID="TerminationDate" Text='<%#DataBinder.Eval(Container.DataItem, "TerminationDate").ToString()%>'></asp:Label>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:TextBox ID="TerminationDate" runat="server" ReadOnly="true" Text='<%#Bind("TerminationDate") %>'></asp:TextBox>
                            </EditItemTemplate>
                        </asp:TemplateField>



                        <asp:TemplateField HeaderText="Notes">
                            <ItemTemplate>
                                <asp:Label runat="server" ID="Notes" Text='<%# Eval("Notes")%>'></asp:Label>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:TextBox ID="Notes" runat="server" Text='<%# Eval("Notes")%>'></asp:TextBox>
                            </EditItemTemplate>
                        </asp:TemplateField>


                        <asp:TemplateField HeaderText="Inventory Notes">
                            <ItemTemplate>
                                <asp:Label runat="server" ID="InventoryNotes" Text='<%# Eval("InventoryNotes")%>'></asp:Label>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:TextBox ID="InventoryNotes" runat="server" Text='<%# Eval("InventoryNotes")%>'></asp:TextBox>
                            </EditItemTemplate>
                        </asp:TemplateField>



                        <asp:TemplateField HeaderText="Sales Rep Company">
                            <ItemTemplate>
                                <asp:Label runat="server" ID="SalesRepCompanyName" Text='<%# Eval("SalesRepCompanyName")%>'></asp:Label>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:TextBox ID="SalesRepCompanyName" runat="server" Text='<%# Eval("SalesRepCompanyName")%>'></asp:TextBox>
                            </EditItemTemplate>
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="Demo Signed">
                            <ItemTemplate>
                                <asp:Label runat="server" ID="DemoSigned" Text='<%#DataBinder.Eval(Container.DataItem, "DemoSigned").ToString()%>'></asp:Label>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:TextBox ID="DemoSigned" runat="server" ReadOnly="true" Text='<%#Bind("DemoSigned") %>'></asp:TextBox>
                            </EditItemTemplate>
                        </asp:TemplateField>


                        <asp:TemplateField HeaderText="Sales Rep Type">
                            <ItemTemplate>
                                <asp:Label runat="server" ID="SalesRepTypeName" Text='<%# Eval("SalesRepTypeName")%>'></asp:Label>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:Label ID="lblSalesRepTypeName" runat="server" Text='<%# Eval("SalesRepTypeName")%>' Visible="false"></asp:Label>
                                <asp:DropDownList ID="SalesRepTypeName" runat="server">
                                </asp:DropDownList>
                            </EditItemTemplate>
                        </asp:TemplateField>
</Columns>
 <PagerStyle CssClass="gridPager" />
                </asp:GridView>

score 0 · Answer 1 · answered Nov 29 '17 at 22:12

0

I have not played with asp.net in a while. However if your using Visual studios, you can set anchor point for left and right which upon maximization will auto resize row width, or anchor top and bottom to expand view height.

If your not using visual studios you will have to get into a little java script to return users screen height and width. here is a link to that

How to get browser width using JavaScript code?.

answered Nov 29 '17 at 22:12

Michael Smith

77
1
10

yes that wraps the width to the screen automatically. And will do the same for height if Anchored top and bottom. meaning if gridview in the design is fit to window. if the window is not maximized it will keep the current view of the grid the fit to the window automatically. if the grid is only the size of a column in the design then when maximized it will expand a little but not fully. anchor keeps current aspect ratio to the window with the grid. If your grid is only the size of Column you will need to expand the width in the properties window in visual studios, By Changing Width size. – Michael Smith Nov 29 '17 at 23:01
in the properties window. – Michael Smith Nov 29 '17 at 23:01
I tried applying the anchor tag and but nothing changed Could be able to provide me with any example. Thanks. – Roshan Dec 01 '17 at 14:16

How to wrap all the columns in the GridView to the screenSize in ASP.NET

1 Answers1