Adjust Width of DataGrid to fit the page

Posted on 2007-08-08
Last Modified: 2012-05-05
I have placed  a datagrid on page which is bound to a DataReader. I have 20 fields to be displayed on form. Currently it has 2 fields + 1 hyperlink only. What is the property which has to be given to adjust the width of the DataGrid on the webpage
Here is the current code

<asp:DataGrid id="DataGrid1" runat="server" AutoGenerateColumns="False" CellPadding="1" HeaderStyle-HorizontalAlign="Center"
                  HeaderStyle-BackColor="Red" HeaderStyle-ForeColor="White" HeaderStyle-Font-Bold="True" HeaderStyle-Font-Name="Verdana"
                  AlternatingItemStyle-BackColor="#dddddd" ItemStyle-Font-Name="Verdana" BackColor="White" BorderWidth="1px"
                  BorderStyle="None" BorderColor="#CC9966">
                  <FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
                  <SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
                  <ItemStyle Font-Names="Verdana" ForeColor="#330099" BackColor="White"></ItemStyle>
                  <HeaderStyle Font-Names="Verdana" Font-Bold="True" HorizontalAlign="Center" ForeColor="#FFFFCC"
                        <asp:HyperLinkColumn Text="View FAQ" DataNavigateUrlField="project_id" DataNavigateUrlFormatString="{0}"
                              HeaderText="View FAQ">
                              <ItemStyle HorizontalAlign="Center" Width="10%"></ItemStyle>
                        <asp:BoundColumn DataField="project_id" HeaderText="Project ID">
                              <ItemStyle Wrap="False"></ItemStyle>
                        <asp:BoundColumn DataField="project_name" HeaderText="Project Name"></asp:BoundColumn>
                  <PagerStyle HorizontalAlign="Center" ForeColor="#330099" BackColor="#FFFFCC"></PagerStyle>
Question by:dotnet0824
    LVL 37

    Expert Comment

    you can set the width property...
    <asp:DataGrid ... Width="100%"
    LVL 8

    Expert Comment

    write a css class for word wrap and break the word which is longer and give persentage wise division of all of the column and sum of each column with persentage should be 100%

    STYLE="word-wrap: break-word">word

    Author Comment

    can that CSS be shown
    LVL 8

    Accepted Solution



    aspx file

     <asp:GridView id="gridResourceItems" .......................

    <asp:TemplateField HeaderText="Res">
                                            <asp:TextBox ID="txtRIL" TextMode="multiLine" Wrap="true" runat="server" Text='<%# Bind("ResourceLanguageDesc") %>' Width="100%"></asp:TextBox>
                                        <ItemStyle CssClass="word" HorizontalAlign="Left" VerticalAlign="Top" Width="22%" />
    <FooterStyle Width="22%" VerticalAlign="Top" />
                                        <HeaderStyle Width="22%" HorizontalAlign="Center" />
                                            <asp:Label ID="Label3" CssClass="word" runat="server"  Text='<%# Bind("Res") %>'></asp:Label>

    Author Comment

    Thanks a lot

    Featured Post

    Courses: Start Training Online With Pros, Today

    Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

    Join & Write a Comment

    IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
    Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
    In this sixth video of the Xpdf series, we discuss and demonstrate the PDFtoPNG utility, which converts a multi-page PDF file to separate color, grayscale, or monochrome PNG files, creating one PNG file for each page in the PDF. It does this via a c…
    Internet Business Fax to Email Made Easy - With eFax Corporate (, you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now