How to arrange datatable columns inside gridview?

Question

My gridview is having a template field bound from the aspx designer. I'm binding a data table to it. Now my template field, which is having few action buttons, is coming as the first column. Is there any way to arrange the datatable columns before the template field?

Code from Designer for the GridView:

<asp:GridView ID="JobListGrid" runat="server" AutoGenerateColumns="false" >
<Columns>
   <asp:TemplateField HeaderText="Actions">
    <ItemTemplate>
      <div>
       <asp:ImageButton ID="View" CssClass="imgbutton" ToolTip="View Pdf" runat="server"
            CommandArgument='<%# DataBinder.Eval(Container, "RowIndex") %>' ImageUrl="~/Content/pdf.PNG"  CommandName="View" Width="36" Height="36" OnClientClick='<%# Eval("JobID", "OpenInNewWindow(\"{0}\").ToString()") %>' />
        </div>
     </ItemTemplate>
   </asp:TemplateField>
</Columns>
</asp:GridView>

CS Code:

JobListGrid.DataSource = dataTableObj;
JobListGrid.DataBind();

The above code shows the grid view headers like :

TemplateField | Col1 | Col2 | Col3

I need the Templatefield to come last. The col1, col, col3 are getting from the datatable.

What do you mean by "prepend the datatable to it"? Can you give us an example, or show us some code you've tried? — Melanie, Mar 29 '13 at 14:27

Kambiz Shahim · Answer 1 · 2013-03-29T15:54:00.757

Change your GridView like this, for controlling columns you AutoGenerateColumns must be disable.

<asp:GridView ID="JobListGrid" runat="server" AutoGenerateColumns="False"> 
                <Columns>
                    <asp:BoundField DataField="JobID" HeaderText="JobID" />
                    <asp:BoundField DataField="JobName" HeaderText="Name" />
                    <asp:TemplateField HeaderText="Actions">
                        <ItemTemplate>
                        <div>
                            <asp:ImageButton ID="View" CssClass="imgbutton" ToolTip="View Pdf" runat="server" CommandArgument='<%# DataBinder.Eval(Container, "RowIndex") %>' ImageUrl="~/Content/pdf.PNG"  CommandName="View" Width="36" Height="36" OnClientClick='<%# Eval("JobID", "OpenInNewWindow(\"{0}\").ToString()") %>' />
                       </div>
                       </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
</asp:GridView>

With `AutoGenerateColumns="True"` the columns are generated runtime but, when you disable columns auto generating by setting `AutoGenerateColumns="False"` just the columns that declared by BoundField will be displayed. — Kambiz Shahim, Mar 29 '13 at 16:34

score 1 · Accepted Answer · answered Apr 02 '13 at 10:05

var columns = JobListGrid.Columns.CloneFields(); //Will get all the columns bound dynamically to the gridview.
var columnToMove = JobListGrid.Columns[0]; //My first column is Action Column
JobListGrid.Columns.RemoveAt(0);           // Remove it
JobListGrid.Columns.Insert(columns.Count - 1, columnToMove); // Moved to last
JobListGrid.DataBind();                    // Bind the grid .

This thing worked for me.

Zo Has · Answer 3 · 2013-03-29T17:29:21.987

You have to use a template field for each column that you want from your datatable. Use a label inside your template field for displaying text using <%#Bind("yourColumnName")%> for text property. That way, you can arrangecolumns in any order you wish for. Also set autogenerate columns to false in gridview. Something like

<asp:GridView ID="JobListGrid" runat="server" AutoGenerateColumns="false" >
    <Columns>
 <asp:TemplateField HeaderText="myDataTableColumn1">
        <ItemTemplate>        
           <asp:Label ID="lblTest" runat="server"
             Text='<%# Bind("yourDataTableColumnName") %>'></asp:Label>
       <ItemTemplate>
  </asp:TemplateField>
  <asp:TemplateField HeaderText="Actions">
   <Columns>
           <asp:ImageButton ID="View" CssClass="imgbutton" ToolTip="View Pdf" runat="server"
                CommandArgument='<%# DataBinder.Eval(Container, "RowIndex") %>' ImageUrl="~/Content/pdf.PNG"  CommandName="View" Width="36" Height="36" OnClientClick='<%# Eval("JobID", "OpenInNewWindow(\"{0}\").ToString()") %>' />
            </div>
         </ItemTemplate>
       </asp:TemplateField>
    </Columns>
    </asp:GridView>

How to bind the columns as it is done from the code behind? In this case i may need to bind the templatefield also from the code behind, right? — NewBie, Mar 30 '13 at 04:46
Nope, you just create the datatable & bind your gridview to the datatable as you are doing now. On your gridview, you set autogenerate columns to false & define template fields for each column to want. Inside each column, you drop a label control & use the Bind property as I said in my post to bind with desired column in your datatable. — Zo Has, Mar 30 '13 at 14:29
My Column fields are dynamic. It cannot be defined directly to the template. I found another work around. It worked. I'll paste it here — NewBie, Apr 02 '13 at 10:01

How to arrange datatable columns inside gridview?

3 Answers3