GridView Column Width Altering

Question

Can someone please help me with my problem?

I have a gridview in a webpage, whose datasource is an oracle database. I would like to know if it is possible to change the column widths while you are on the web page?

string select = "SELECT * FROM TABLE"

OracleCommand cmd = new OracleCommand(select, connectionstring);
cmd.Connection.Open();

GridView.DataSource = cmd.ExecuteReader();
GridView.DataBind();

This outputs the table in the gridview. Is there a way to change gridview properties while in the browser? perhaps some javascript?

Thank you in advance,

Answer 1

You can specify these attributes through the styles in the columns of the gridview itself. You can set the AutoGenerateColumns attribute to false, and specify the columns you want, and specify the sizes within each column. Furthermore, following good web-design practices, you can use css to style each column. If you would like to change it on the fly, I would suggest using ItemTemplates, and adding components you can modify in the field.

Ex:

<asp:GridView runat="server" AutoGenerateColumns="false" ID="Grid" DataSourceID='MyObjectDataSource' CssClass="grid_table">
                <AlternatingRowStyle CssClass="even" />
                <Columns>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <div id="NameColumn" runat="server">Name Center</div>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <%# Eval("LastName") %>, <%# Eval("FirstName") %>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <div id="AgeColumn" runat="server">Age</div>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <%# Eval("Age") %>
                        </ItemTemplate>
                    </asp:TemplateField>
                <EmptyDataTemplate>There are no Users</EmptyDataTemplate>
            </asp:GridView>

With this code you can access the column widths:

NameColumn.Width = 100;
AgeColumn.Width = 2;

However, there are many ways you can accomplish this, including getting the columns directly:

Grid.Columns[0].HeaderStyle.Width = 100;
Grid.Columns[0].ItemStyle.Width = 100;
Grid.Columns[1].HeaderStyle.Width = 2;
Grid.Columns[1].ItemStyle.Width = 2;

Or again using css:

Grid.Columns[0].HeaderStyle.CssClass = "name_column_header";
Grid.Columns[0].ItemStyle.CssClass = "name_column_data";
Grid.Columns[1].HeaderStyle.CssClass = "age_column_header";
Grid.Columns[1].ItemStyle.Width = "age_column_data";

Anyways, the world's your oyster, these are just some starting points.