CODEWITHSUNDEEP
c#asp.netgridviewaspxgridview
NewBie
NewBie

Reputation: 1844

How to arrange datatable columns inside gridview?

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.

Upvotes: 2

Views: 1716

Answers (3)

NewBie
NewBie

Reputation: 1844

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.

Upvotes: 1

Zo Has
Zo Has

Reputation: 13018

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>

Upvotes: 0

Kambiz Shahim
Kambiz Shahim

Reputation: 2590

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>

Upvotes: 1

Related Questions