Question

I have a gridivew with auto-generated fields, whenever there is a new set of data coming in, i will append the grid with data. Is there a way to set a limited columns (e.g 6) so as to force user to navigate to the next page? instead of kept appending till it is super ugly?

Example:

thus, there could be Grade(12 July 2012), Grade(4 April 2013) and so on….

though i can find pagesize, but i cannt find columnsize!

Edited:

I manage to add a scrollbar at the bottom of the gridview. However the grid with auto-generated columns tends to be a little clustered. (if you notice the name column from second pic). Can any one help?

Code:

 <asp:Panel ID="ScrollPanel" style="Width:1300px;" runat="server" ScrollBars="Horizontal"> 
                    <asp:GridView ID="ViewAllHistory" runat="server" BorderWidth="1px" 
                        CellPadding="2" CellSpacing="2" AllowPaging="True" BackColor="Black" 
                        onpageindexchanging="ViewAllHistory_PageIndexChanging" PageSize="10">
                        <RowStyle BackColor="White"/>
                        <FooterStyle BackColor="#CCCCCC" />
                        <PagerSettings Position="TopAndBottom" />
                        <PagerStyle HorizontalAlign="Center" BackColor="White" />
                        <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
                        <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
                    </asp:GridView>
                    </asp:Panel>

it is only when i fix my gridview width then the design looks better. But i wouldnt want to fix my grid’s width considering new set of data coming in. (long-term)

Answer 1

Modify the columns collection
One way to do this is would be to have all of the columns you’re going to need already in your datasource, and then just modify the Columns collection of your GridView. So, for instance, you have a button that adds a column, and you do this in it’s click event:

protected void Button1_Click(object sender, EventArgs e)
{
    BoundField newCol = new BoundField();
    // This string needs to be the name of the column in your datasource
    newCol.DataField = "Grade12July2012";
    // Whatever you want the column header to say
    newCol.HeaderText = "Grade(12 July 2012)";
    GridView1.Columns.Add(newCol);
    GridView1.DataBind();
}

Use a scrollable <div>
As alex said in the comments, another way of doing this would be to just put a scrollable container around your GridView. This way you can have all the columns there without taking up too much screen real estate:

<div id="gridContainer" style="width:200px; overflow:scroll; height:auto;">
    <asp:GridView ID="GridView1" runat="server">

    </asp:GridView>
</div>