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.

Answer 1

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>

Answer 2

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.

Answer 3

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>