How to populate itemTemplates of TemplateField in gridview from datatable? - c#

The table I am querying from has 3 fields, all varchar, but 2 of them are base64String from image and video files. I have added a gridview such:-
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img id="image" runat="server" />
</ItemTemplate>
<ItemTemplate>
<a id="downloadLink" runat="server"></a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I searched a lot but have no clue on how to populate the Template field column from a dataTable. I need to set the src attribute of the from database query and also need to set innerHTML for the link.

<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img src='<%#Eval("image_source")%>' runat="server" />
<a id="downloadLink" runat="server"><%#Eval("anchor_content")%></a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Where image_source and anchor_content are assumed to be the columns returned by your SQL query.

Related

Accessing Header Text property of GridView TemplateField in the Code Behind when it is set from Header Template

I have a GridView in an asp .net application, where the Header Text of a template field is set in the Header Template of the field, as a label (where it will come from the resource file). Below is the code
<asp:GridView ID="gridView" ClientIDMode="Static" runat="server" AutoGenerateColumns="False" meta:resourcekey="grdViewResource">
<Columns>
<asp:TemplateField meta:resourcekey="TemplateFieldResource1">
<HeaderTemplate>
<asp:Label ID="lblNameHeader" Text="Name" runat="server" meta:resourcekey="lblNameHeaderResource1"/>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblNameValue" Text='<%# Eval("Name") %>'/>
</ItemTemplate>
</Columns>
</asp:GridView>
In code behind I am trying to access the HeaderText set on the column like this
var headerText = gridView.Columns[0].HeaderText;
But the value is coming Empty and I am not able to retrieve it from the gridView.Columns' HeaderTemplate property as well.
Please help me.
You have several problems with your code.
You are missing a closing </asp:TemplateField>. Your asp:Label is missing a runat="server" attribute.
If you want to use the .HeaderText property, this should be your markup:
<asp:GridView ID="gridView" ClientIDMode="Static" runat="server" AutoGenerateColumns="False" meta:resourcekey="grdViewResource">
<Columns>
<asp:TemplateField meta:resourcekey="TemplateFieldResource1" HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblNameValue" Text='<%# Eval("Name") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
If you want to use a HeaderTemplate with custom markup in it, then you need to cast the column to a TemplateField, then access the controls within it.

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

Bind only value from KeyValuePair to GridView

In ASPX File
<asp:GridView ID="gvSavedAddresses" runat="server">
<Columns>
<asp:TemplateField SortExpression="AddressType" ItemStyle-Width="9%" HeaderText="Type"
HeaderStyle-ForeColor="Black">
<ItemTemplate>
<asp:Label runat="server" ID="lblAddressType" Text='<%#Eval("AddressType")%>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
In CS File
objAddr.AddressType = new KeyValuePair<string, string>(dr["AddressTypeLookupID"].ToString(), dr["AddressType"].ToString());
I want to display only Value in the grid. But in my code it is showing both key and value in grid cell. how to avoid this?
Cast the field to its actual type, and retrieve Value:
<%# ((KeyValuePair<string, string>)Eval("AddressType")).Value %>

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.
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>

Categories

Resources