We Keep Coding

Double columns in GridView, building from code behind in C#

I'm trying to fill a GridView with a RadioButton and data from a CreditCardList. However, it's doubling the columns for each field... one full set of columns then another complete set (sans the RadioButton) I've checked creditCardList.items.Count and made sure it's just 1 (which it is). What am I doing wrong?
aspx:
<asp:GridView ID="gvCards" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">
<Columns>
<asp:TemplateField HeaderText="Sel">
<ItemTemplate>
<asp:RadioButton ID="Sel" runat="server" GroupName="rad" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Customer ID" />
<asp:BoundField DataField="Card ID" HeaderText="Card ID" />
<asp:BoundField DataField="Card Number" HeaderText="Card Number" />
<asp:BoundField DataField="Expiration" HeaderText="Expiration" />
<asp:BoundField DataField="State" HeaderText="State" />
</Columns>
</asp:GridView>
Code behind:
DataTable dt = new DataTable();
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("Customer ID", typeof(string));
dt.Columns.Add("Card ID", typeof(string));
dt.Columns.Add("Card Number", typeof(string));
dt.Columns.Add("Expiration", typeof(string));
dt.Columns.Add("State", typeof(string));
for (var i = 0; i < creditCardList.items.Count; i++)
{
DataRow row1 = dt.NewRow();
row1["Name"] = creditCardList.items[i].first_name + " " + creditCardList.items[i].last_name;
row1["Customer ID"] = creditCardList.items[i].external_customer_id;
row1["Card ID"] = creditCardList.items[i].id;
row1["Card Number"] = creditCardList.items[i].number;
row1["Expiration"] = creditCardList.items[i].expire_month + "/" + creditCardList.items[i].expire_year;
row1["State"] = creditCardList.items[i].state;
dt.Rows.Add(row1);
}
gvCards.DataSource = dt;
gvCards.DataBind();
Output:
Sel Name Card ID Card Number Expiration State Name Customer ID Card ID Card Number Expiration State
Steve Ricketts %40LDN CON CARD-3F3 xxxxxxxxxxx1000 3/2020 ok Steve Ricketts %40LDN CON CARD-3F3 xxxxxxxxxxx1000 3/2020 ok

set AutoGenerateColumns="false" .
<asp:GridView ID="MyGrid" runat="server" AutoGenerateColumns="false">
<Columns>
</Columns>
</asp:GridView>
Remarks
When the AutoGenerateColumns property is set to true, an AutoGeneratedField object is automatically created for each field in the data source. Each field is then displayed as a column in the GridView control in the order that the fields appear in the data source. This option provides a convenient way to display every field in the data source; however, you have limited control of how an automatically generated column field is displayed or behaves.
Instead of letting the GridView control automatically generate the column fields, you can manually define the column fields by setting the AutoGenerateColumns property to false and then creating a custom Columns collection. In addition to bound column fields, you can also display a button column field, a check box column field, a command field, a hyperlink column field, an image field, or a column field based on your own custom-defined template.

Set User Controls Objects Properties inside a GridView ASP.NET

I insert three template columns in my gridview. In every column I insert a user control. For example in first column there is a user control containing an image and three labels.
In my page load, I need to get list of images in a folder and create a row for each of them. Then I need to update those user controls' images in gridview columns.
Here is the sample code which gets the list of images and will be the data source of GridView:
string[] filePaths = Directory.GetFiles(Server.MapPath("~/Resources/Pictures"));
GridView1.DataSource = filePaths;
GridView1.DataBind();
In this step I can see 4 rows which have filled with RAW user controls (Empty images in image control,default text for labels etc.) Now I need to update each of them with my own properties.
Here is a picture Of my output:
As you can see in first column there are some controls (Image and Labels) which is for user control that I used them in column template of my gridview. But they are RAW and I need to update them. For example I need to update the image with the link you see in the third column.
and Here is a part of my GridView Code:
<asp:GridView ID="GridView1" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" Caption="Image List" CellPadding="2" ForeColor="Black" GridLines="None" Height="222px" Width="409px">
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<Columns>
<asp:TemplateField HeaderText="Old Picture">
<ItemTemplate>
<uc1:ImageColumn ID="ImageColumn1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="New Picture">
<ItemTemplate>
<uc2:ReplaceColumn ID="ReplaceColumn1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Allow Access">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
Hope it is clear enough. can any one help please?

You have to add public properties to your user controls which you then set using "normal" data-binding expressions. E.g:
user control:
public class MyUserControl : UserControl
{
public string ImageName {get; set;}
}
grid's template column:
<asp:TemplateField ...>
<ItemTemplate>
<uc1:MyUserControl runat="server" ImageName='<%# Eval("ImageUrl")%>' ... />
code-behind:
public class ImageVM { // view-model for data-binding
public string ImageUrl { get; set; }
}
...
var images = LoadImages(); // returns a list of ImageVM instances
grid.DataSource = images;
grid.DataBind();

Checkbox field not visible in gridview

I am working in asp.net. Trying to display data in gridview retrieved from a web service. I want five fields in gridview, one checkbox field and other four are values from service i.e.
CheckboxField,FirstName,LastName,OffenseName,FineAmount
1 ) Following is gridview code, that i just dragged and dropped into page
<asp:GridView ID="GridView1" runat="server">
<HeaderStyle BackColor="#CCFF33" />
</asp:GridView>
2 ) Following is my method that i call, to create fields in a DataTable, which i will bind to gridview later.
DataTable table = new DataTable();
table.Columns.Add("Select", typeof(CheckBox)); // i think problem is here
table.Columns.Add("FirstName", typeof(string));
table.Columns.Add("LastName", typeof(string));
table.Columns.Add("OffenseName", typeof(string));
table.Columns.Add("FineAmount", typeof(string));
3) Following is code to that populates the data table, with data
for (int i = 0; i < noOfContacts; i++)
{
object[] rowVals = new object[5];
rowVals[0] = giveCheckBox(i); // this method is declared below, which gives me a checkbox with unique id
rowVals[1] = listOfContacts[i].FirstName;
rowVals[2] = listOfContacts[i].LastName;
rowVals[3] = listOfCharges[j].GHQOffenseId;
rowVals[4] = listOfCharges[j].GHQFineAmount;
table.Rows.Add(rowVals);
}
GridView1.DataSource = table;
GridView1.DataBind();
4) This is method that gives me a checkbox, with unique id
public CheckBox giveCheckBox(int i)
{
CheckBox chk = new CheckBox();
chk.ID = "chk_" + i;
chk.Text = "Pay";
return chk;
}
Problem is that when i run the program, it only display four fields but not first checkbox field. I want to dispay that must.
But if i add checkbox field in designing view, (click arrow on gridview, click Add New Fields), then it throws exception at binding line i.e.
GridView1.DataBind();
Please guide me how to make checkbox field visible.

You can insert all your fields in design like code below :
<asp:GridView ID="GridView1" runat="server">
<HeaderStyle BackColor="#CCFF33" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox runat="server" ID="chk_box" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="OffenseName" HeaderText="OffenseName" />
<asp:BoundField DataField="FineAmount" HeaderText="FineAmount" />
</Columns>
</asp:GridView>
and for the code behind:
DataTable table = new DataTable();
for (int i = 0; i < 2; i++)
{
DataRow dr = table.NewRow();
dr["FirstName"] = "Ahmed";
dr["LastName"] = "Ahmed";
dr["OffenseName"] = "Ahmed";
dr["FineAmount"] = "Ahmed";
table.Rows.Add(dr);
}
GridView1.DataSource = table;
GridView1.DataBind();

Instead adding the checkbox to your table(which is wrong anyway) add a template field to the gridview as below. Also specify AutoGenerateColumns=true. Then remove all the code in your codebehind which tries to add checkbox column to the table and gridview.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="True">
<Columns>
<asp:TemplateField ShowHeader="False" >
<ItemTemplate>
<asp:CheckBox ID="checkBoxSelect" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<HeaderStyle BackColor="#CCFF33" />
</Columns>
</asp:GridView>

Yes, you're right the problem lies exactly in that code snippet. Replace the following line
table.Columns.Add("Select", typeof(CheckBox));
with this one
table.Columns.Add("Select", typeof(bool));

find Countrol inside itemTemplate of Gridview without Gridview Events

i have a Textbox inside ItemTemplate of a Gridview.. i need to find that textbox without using RowDatabound or any other event of Gridview
aspx
<asp:GridView ID="gv_Others" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField >
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<ItemTemplate >
<asp:TextBox ID="txtEmp" runat="server" Width=100% Height=22px CssClass="input"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
aspx.cs
protected void Insert_OtherServices()
{
dsJobCardTableAdapters.Select_OtherServiceTableAdapter dsother = new dsJobCardTableAdapters.Select_OtherServiceTableAdapter();
int count = 0;
foreach (GridViewRow row in gv_Others.Rows)
{
//string b = (row.Cells[0].Controls[0] as DataBoundLiteralControl).Text;
//TextBox a = gv_Others.Rows[count].Cells[0].FindControl("txtEmp") as TextBox;
// string test = a.Text;
//TextBox other = (TextBox)gv_Others.Rows[count].FindControl("txtEmp");
TextBox other = (TextBox)gv_Others.TemplateControl.FindControl("txtEmp");
dsother.Insert_OtherService(other.Text);
count++;
}
}
is there any alternative to get the value from textbox which is inside the item template of Gridview

Do you mean that you want to find text box values without looping through GridView rows? If is is the case, jQuery/javascript can be used to achieve this.
Read all text box values on the client-side. You can find more information on how to do this here
Pass these values along with the postback request using a hidden field. Read and use the hidden field value inside your method.

How to add dynamic Texbox in GridView at RunTime?

I would like to add controls like textBox in GridView from code on the fly.
In my project i have one Grid in that i can't decide how many rows and columns are there. so that i just give it DataSource. This working fine.
GridView G = new GridView();
G.DataSourse = dt;
G.DataBind();
now i want to do such thing that in Gridview all the controls are Textbox control so that i can write in that textbox.
TextBox t= new TextBox();
G.Contorls.Add(t);
This will throw exception...
do anyone have any idea about this???
Thanks in advance..
Regards
Amit Vyas

Why not do it in design time with ItemTemplate
<asp:GridView ID="GrdDynamic" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox runat="server" ID="Name" Text='<%#Eval("Name") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
EDIT
Here is an interesting CodeProject post on dynamically adding template columns

Please check this http://www.devasp.net/net/articles/display/708.html link and use below code:
DropDownList ddl = new DropDownList();
ddl.Visible = true;
ddl.ID = "ddl1";
ddl.Items.Add("Item1");
TableCell cell = new TableCell();
gv.Rows[0].Cells.Add(cell);
gv.Rows[0].Cells[0].Controls.Add(ddl);

If you are looking a way to add TextBox dynamically in the existing GridView, then using RowDataBound event of the GridView would be best solution.
Add a PlaceHolder control in the ItemTemplate field.
<asp:GridView ID="GrdDynamic" runat="server" OnRowDataBound="GridView_RowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:PlaceHolder runat='server' ID="PlaceHolder1"></asp:PlaceHolder>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
public void GridView_RowDataBound(Object sender, GridViewRowEventArgs e)
{
//find placeholder control
PlaceHolder placeHolder = e.Row.FindControl("PlaceHolder1") as PlaceHolder;
TextBox TextBox1 = new TextBox();
placeHolder.Controls.Add(TextBox1);
}