How to arrange datatable columns inside gridview? - c#

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.

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>

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.

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>

Related

Unable to maintain data inside gridview across postback when used inside an user control

I've a textbox that is present inside a GridView that itself is a part of user control and I'm dynamically loading this user control on page_Init.
The controls in my user control are a DropDown, a TextBox and a GridView.
Now DropDown and TextBox are able to retain values across postback but textboxes inside the GridView are not retaining the values.
Adding User Control on page init:
if (postBackCntrl.Contains("AddUserControlButton"))
{
UserControl newGrid = (UserControl)LoadControl("~/UserControl.ascx");
newGrid.ID = "test" + gridList.Count;
gridList.Add(newGrid);
}
GridView Code: TextBoxes inside GridView ItemTemplate not able to retain values across postback:
<asp:GridView runat="server" ID="grdUser" CssClass="GridTable" Width="90%" AutoGenerateColumns="false"
ShowFooter="true" OnDataBound="MergeGridViewFooter">
<Columns>
<asp:TemplateField HeaderText="ContactUs">
<ItemTemplate>
<asp:TextBox ID="txtContactUs" runat="server" CssClass="textbox" Height="60px" TextMode="MultiLine"></asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<asp:Button ID="btnaddrow" runat="server" Text="Add Row" CssClass="ui-button jquery-ui" Style="font-size: 12px" OnClick="btnaddrow_Click" />
<asp:Button ID="btnDelRowAddress" runat="server" Text="Delete Row" CssClass="ui-button jquery-ui" Style="font-size: 12px" OnClick="btnDelRowAddress_Click" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Definition">
<ItemTemplate>
<asp:TextBox ID="txtDefinition" runat="server" TextMode="MultiLine" Height="60px" CssClass="textbox"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address">
<ItemTemplate>
<asp:TextBox ID="txtAddress" runat="server" TextMode="MultiLine" Height="60px" CssClass="textbox"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

assign a value to checkbox in a grid header

I have following grid
<asp:GridView ID="grdDWlocations" CssClass="table table-hover table-striped" runat="server" GridLines="None" ShowHeaderWhenEmpty="True"
EmptyDataText="No data found..." AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="" Visible="true">
<HeaderTemplate>
<asp:CheckBox ID="allDWlocchk" runat="server" Checked="true" Width="10px" onclick="CheckAllgrdReqDW(this)"></asp:CheckBox>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chk_DWlocReq" runat="server" Checked="true" Width="5px" OnCheckedChanged="chk_Req_CheckedChangedDW_Click" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Code">
<ItemTemplate>
<asp:Label ID="lbl_DWCode" runat="server" Text='<%# Bind("Ml_loc_cd") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:Label ID="lbl_DWDescription" runat="server" Text='<%# Bind("Ml_loc_desc") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I want to assign a value for 'allDWlocchk' which is header check,
how can I do this in code behind
I tried this none of the thing worked
Attempt 1 :
((CheckBox)(grdDWlocations).FindControl("allDWlocchk")).Checked = false;
Attempt 2 :
((CheckBox).FindControl("allDWlocchk")).Checked = false;
You are on the right track, FindControl is the way to go here. But the problem is that it only works with direct children. So instead of searching on the Page or on the GridView you need to be searching in the header row. Which is available as the GridView property. So:
GridViewRow headerRow = grdDWlocations.HeaderRow;
((CheckBox)headerRow.FindControl("allDWlocchk")).Checked = false;

Setting the textarea in a GridView after DataBind

How can I set the textarea of the gridview which has a Datatable:
<asp:GridView ID="gvTemplateFields" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Risk">
<ItemTemplate>
<textarea id="Risk"
cols="20" rows="2"
runat="server"
style="width: 99%">
</textarea>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>No off-site links found.</EmptyDataTemplate>
</asp:GridView>
The data binding:
DataTable templateFields = SWMSField.GetTemplateFields(TemplateId);
gvTemplateFields.DataSource = templateFields;
gvTemplateFields.DataBind();
You can use an ASP.NET server control instead:-
<asp:TemplateField HeaderText="Risk">
<ItemTemplate>
<asp:TextBox id="Risk" TextMode="MultiLine" Columns="20" Rows="2" runat="server"
Text='<%# Eval("RiskColumn")%>' />
</ItemTemplate>
</asp:TemplateField>
Here, RiskColumn is the column name which holds the data you want to bind in textarea.

Bind checkbox with Images and Dropdownlist in Grid view

I have a gridview which contains images (populated dynamically from database) and dropdownlist which contains two values. First column contains checkbox. I want to insert selected checkbox's images and dropdown values to a new table on button click. What may be the suitable way?
Here is the grid view:
<asp:GridView ID="gvDetails" runat="server" AutoGenerateColumns="false" AllowPaging="true"
EmptyDataText="No images found" OnPageIndexChanging="gvDetails_PageIndexChanging" PageSize="5">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="CheckUncheckAll"/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID ="CheckBox2" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="imgPreview" ImageUrl='<%#
"ImageHandler.ashx?imgID="+ Eval("ID") %>' runat="server"
Height="80px" Width="80px" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Dropdown" ItemStyle-Width="50px">
<ItemTemplate>
<asp:DropDownList ID="dpdListEstatus" runat="server" OnSelectedIndexChanged="dpdListEstatus_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem>A</asp:ListItem>
<asp:ListItem>B</asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
Loop with gridview rows
Find for the checkbox control
Check if its Checked property is true
If yes, call insert statement
Set the values you want to get from image and dropdownlist. Of course you need to use findcontrol on it too.
Dim cbSelect As CheckBox, imgToInsert As Image, ddlStatus As DropDownList
For Each r As GridViewRow In gvDetails.Rows
cbSelect = r.Cells(0).FindControl("CheckBox2")
If cbSelect.Checked Then
imgToInsert = r.Cells(1).FindControl("imgPreview")
ddlStatus = r.Cells(2).FindControl("dpdListEstatus")
'Insert statement goes here...
End If
Next r

How to add EditForm for editing row

How can I add edit form row in Asp.NET GridView control like this RadGrid!
When I click on the Edit button, I want to add an edit form row under the edit button row.
Here my Grid
<asp:GridView ID="gvEG" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField>
<EditItemTemplate>
<asp:DropDownList runat="server" ID="ddlPersonnel" />
</EditItemTemplate>
<ItemTemplate>
//..
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<EditItemTemplate>
//..
</EditItemTemplate>
<ItemTemplate>
//..
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<EditItemTemplate>
<asp:LinkButton ID="lnkUpdate" runat="server" CommandName="Update" />
<asp:LinkButton ID="lnkCancel" runat="server" CommandName="Cancel" />
</EditItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="lnkEdit" runat="server" CommandName="Edit" />
<asp:LinkButton ID="lnkDel" runat="server" CommandName="Delete" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle></EditRowStyle>
</asp:GridView>
In your GridView attributes add AutoGenerateEditButton and a custom event handler for OnRowEditing like this:
<asp:GridView ID="gvEG" runat="server" AutoGenerateColumns="False" AutoGenerateEditButton="True" OnRowEditing="gvEG_RowEditing">
Then in your code-behind make a new event handler method called "gvEG_RowEditing". Have your method add a panel under the row that is being edited. Add the necessary fields to the panel as well as an update button. Create a click event handler for the update button and have it save all the fields to the database and then rebind the GridView.

Categories

Resources