Creating an ASP.net GridView board (without server connection) - asp.net

I'm going to create a 4-column, 10-line gridview board. I want to make it using a loop. I do not know what to do with the cs code. I am a beginner and I am practicing as an example. Help please.
.aspx
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true"
AllowSorting="True"
AllowPaging="True" PageSize="10" onrowdatabound="GridView1_RowDataBound"
ondatabound="GridView1_DataBound" EmptyDataText="NO">
<EmptyDataTemplate>No Data</EmptyDataTemplate>
</asp:GridView>
.aspx.cs
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
{
e.Row.Cells[0].Text = "Complete";
}
}
protected void GridView1_DataBound(object sender, EventArgs e)
{
for (int i = 0; i < GridView1.Rows.Count; i++)
{
GridViewRow row = GridView1.Rows[i];
var str = GridView1.DataKeys[row.RowIndex]["SomeColumnName"];
}

Quick Example:
.aspx code:
<asp:GridView ID="GridView1" runat="server"></asp:GridView>
.cs code:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Create a datatable as a DataSource of your GridView
DataTable dt = new DataTable();
// Add columns
if (dt.Columns.Count == 0)
{
for (int i = 1; i <= 4; i++)
{
dt.Columns.Add("Column" + i);
}
}
// Add rows
for (int i = 1; i <= 10; i++)
{
dt.Rows.Add("Data" + i, "Data" + i, "Data" + i, "Data" + i);
}
// Bind datatable to gridview
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
Output:

Related

Duplicate columns get created while clicking "Edit" in asp:GridView

I have asp:GridView where I am using AutoGenerateEditButton="True" property to edit the grid row. Now the issue is whenever I click Edit button, the columns are populating again. For example If there 4 columns and if I click Edit than same 4 columns will reappear.
.ASPX Code:
<asp:GridView ID="grdEmpDetail" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None"
OnRowEditing="grdEmpDetail_RowEditing"
OnRowCancelingEdit="grdEmpDetail_RowCancelingEdit"
OnRowUpdated="grdEmpDetail_RowUpdated"
AutoGenerateEditButton="True">
</asp:GridView>
Code Behind: To Dynamically bind data on grid
protected void Page_Load(object sender, EventArgs e)
{
WorkSampleBusiness.BusinessObject objBL = new WorkSampleBusiness.BusinessObject();
this.grdEmpDetail.AutoGenerateColumns = false;
try
{
DataTable dt = new DataTable();
dt = objBL.OrderDetail();
foreach (var col in dt.Columns)
{
if (col.ToString() == "ID" || col.ToString() == "First Name" || col.ToString() == "Last Name" || col.ToString() == "Business Phone" || col.ToString() == "Job Title")
{
BoundField objBoundField = new BoundField();
objBoundField.DataField = col.ToString();
objBoundField.HeaderText = col.ToString();
this.grdEmpDetail.Columns.Add(objBoundField);
}
}
this.grdEmpDetail.DataSource = dt;
this.grdEmpDetail.DataBind();
}
catch
{
throw;
}
}
Handle Edit Mode:
protected void grdEmpDetail_RowEditing(object sender, GridViewEditEventArgs e)
{
this.grdEmpDetail.EditIndex = e.NewEditIndex;
this.grdEmpDetail.DataBind();
}
protected void grdEmpDetail_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
this.grdEmpDetail.EditIndex = -1;
this.grdEmpDetail.DataBind();
}
OUTPUT: This is fine
ISSUE : This is where I am getting issue.
What am I missing here?
You are not checking for IsPostBack in your databinding code. As a result, each time you post to the page that code is being executed again and again. So each time you will add more columns.
Modify your handler like so:
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack) {
// All of your existing code goes here
}
}
Edit
It's a little more complicated than that. You DO actually need to re-bind your DataGrid to the data source when you click edit, but you just don't want to add the columns again. This requires that you break up your code some so that the code for data-binding can be re-used without being tied to the column addition.
First, let's create a method specifically for adding columns that appear on an input DataTable:
private void AddColumnsToDataGrid(DataTable dt) {
foreach (var col in dt.Columns) {
if (col.ToString() == "ID"
|| col.ToString() == "First Name"
|| col.ToString() == "Last Name"
|| col.ToString() == "Business Phone"
|| col.ToString() == "Job Title")
{
BoundField objBoundField = new BoundField();
objBoundField.DataField = col.ToString();
objBoundField.HeaderText = col.ToString();
this.grdEmpDetail.Columns.Add(objBoundField);
}
}
}
Next Create a Method for Databinding a DataTable to your grid:
private void DataBindGrid(DataTable dt) {
this.grdEmpDetail.DataSource = dt;
this.grdEmpDetail.DataBind();
}
Now that you've extracted some of that code out, you can re-use these methods where appropriate, and only add columns one time:
Page Load Handler
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack) {
WorkSampleBusiness.BusinessObject objBL = new WorkSampleBusiness.BusinessObject();
this.grdEmpDetail.AutoGenerateColumns = false;
try {
DataTable dt = objBL.OrderDetail();
AddColumnsToDataGrid(dt);
DataBindGrid(dt);
} catch {
// Side Note: If you're just re-throwing the exception
// then the try/catch block is completely useless.
throw;
}
}
}
Editing Handlers
protected void grdEmpDetail_RowEditing(object sender, GridViewEditEventArgs e)
{
this.grdEmpDetail.EditIndex = e.NewEditIndex;
WorkSampleBusiness.BusinessObject objBL = new WorkSampleBusiness.BusinessObject();
DataBindGrid(objBL.OrderDetail());
}
protected void grdEmpDetail_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
this.grdEmpDetail.EditIndex = -1;
WorkSampleBusiness.BusinessObject objBL = new WorkSampleBusiness.BusinessObject();
DataBindGrid(objBL.OrderDetail());
}
Try:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Fill_Grid();
}
}
protected Void Fill_Grid()
{
if (grdEmpDetail.Columns.Count > 0)
{
for (int n = 0; n < grdEmpDetail.Columns.Count; n++)
{
grdEmpDetail.Columns.RemoveAt(n);
}
grdEmpDetail.DataBind();
}
this.grdEmpDetail.AutoGenerateColumns = false;
WorkSampleBusiness.BusinessObject objBL = new WorkSampleBusiness.BusinessObject();
try
{
DataTable dt = new DataTable();
dt = objBL.OrderDetail();
foreach (var col in dt.Columns)
{
if (col.ToString() == "ID" || col.ToString() == "First Name" || col.ToString() == "Last Name" || col.ToString() == "Business Phone" || col.ToString() == "Job Title")
{
BoundField objBoundField = new BoundField();
objBoundField.DataField = col.ToString();
objBoundField.HeaderText = col.ToString();
this.grdEmpDetail.Columns.Add(objBoundField);
}
}
this.grdEmpDetail.DataSource = dt;
this.grdEmpDetail.DataBind();
}
catch (exception e1)
{
}
}
protected void grdEmpDetail_RowEditing(object sender, GridViewEditEventArgs e)
{
this.grdEmpDetail.EditIndex = e.NewEditIndex;
Fill_Grid();
}
protected void grdEmpDetail_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
this.grdEmpDetail.EditIndex = -1;
Fill_Grid();
}

ASP.net gridview paging index disappear when i change the page index

this is my code : when i change the index of pager i get the right data but the pager footer disapear :
<asp:GridView ID="GridView1" runat="server" PageSize="4" AllowPaging="true" AllowSorting="true" AutoGenerateColumns="false" OnRowEditing="GridView1_RowEditing" DataKeyNames="id" OnRowCancelingEdit="GridView1_RowCancelingEdit" AlternatingRowStyle-CssClass="eventRowStyle" OnPageIndexChanging="GridView1_PageIndexChanging" OnPageIndexChanged="GridView1_PageIndexChanged">
Codebehind :
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GridViewDBEntities model = new GridViewDBEntities();
var query = from p in model.userTbls select p;
GridView1.DataSource = query;
GridView1.DataBind();
}
}
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridViewDBEntities model = new GridViewDBEntities();
var query = (from p in model.userTbls orderby p.id ascending select p).Skip((e.NewPageIndex) * GridView1.PageSize).Take(GridView1.PageSize);
GridView1.PageIndex = e.NewPageIndex;
GridView1.DataSource = query;
GridView1.DataBind();
}
You can force your Pager to remain visible !
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
GridView1.BottomPagerRow.visible = True
BTW you have already defined pageSize and set Paging to true so i think this will do
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGrid();
}
}
private void BindGrid()
{
GridViewDBEntities model = new GridViewDBEntities();
var query = from p in model.userTbls select p;
GridView1.DataSource = query;
GridView1.DataBind();
}
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
// GridViewDBEntities model = new GridViewDBEntities();
// var query = (from p in model.userTbls orderby p.id ascending select //p).Skip((e.NewPageIndex) * GridView1.PageSize).Take(GridView1.PageSize);
GridView1.PageIndex = e.NewPageIndex;
// GridView1.DataSource = query;
//GridView1.DataBind();
BindGrid();
}
Removing !IsPostback will cause problems later if you have to implement some functionality where you have to edit grid or insert records , Either way better will be to create a Bind method and use it according to requirements .

Asp.net GridView Enabling row selection

I am using GridView in asp.net. I want to select a single data row. I looked for MultiSelect and SelectionMode in property panel, but I can't find it.
So how to enable selecting rows in GridView?
Thanks.
Code Behind
public partial class SearchCourse : System.Web.UI.Page
{
Connection dbCon;
DataTable tbl;
protected void Page_Load(object sender, EventArgs e)
{
dbCon = new Connection();
}
protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
{
if (RadioButton1.Checked) {
txtSubName.Enabled = true;
comboSemester.Enabled = false;
comboYear.Enabled = false;
comboProgram.Enabled =false;
txtSubName.Text = "";
}
}
protected void RadioButton2_CheckedChanged(object sender, EventArgs e)
{
if (RadioButton2.Checked) {
comboProgram.Enabled = true;
if (comboProgram.SelectedItem.ToString() == "Foundation Course")
{
comboSemester.Enabled = false;
comboYear.Enabled = false;
}
else {
comboSemester.Enabled = true;
comboYear.Enabled = true;
}
txtSubName.Text = "";
txtSubName.Enabled = false;
}
}
protected void imgBtnSearch_Click(object sender, ImageClickEventArgs e)
{
if (RadioButton1.Checked) {
String name = txtSubName.Text;
tbl = dbCon.getResultsBySubjectName(name);
GridView1.DataSource = tbl;
GridView1.DataBind();
}
else if (RadioButton2.Checked)
{
String program = comboProgram.SelectedItem.ToString();
String year = comboYear.SelectedItem.ToString();
String sem= comboSemester.SelectedItem.ToString();
tbl = dbCon.getResultsByProgram(program,year,sem);
GridView1.DataSource = tbl;
GridView1.DataBind();
}
else if (RadioButton3.Checked)
{
String name = txtSubName.Text;
tbl = dbCon.getResultsBySubjectNo(name);
GridView1.DataSource = tbl;
GridView1.DataBind();
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
String program = comboProgram.SelectedItem.ToString();
String year, sem;
if (program == "Foundation Course")
{
comboYear.Enabled = false;
comboSemester.Enabled = false;
year = null;
sem = null;
}
else {
comboYear.Enabled = true;
comboSemester.Enabled = true;
year = comboYear.SelectedItem.ToString();
sem = comboSemester.SelectedItem.ToString();
}
tbl = dbCon.getResultsByProgram(program, year, sem);
GridView1.DataSource = tbl;
GridView1.DataBind();
}
protected void comboYear_SelectedIndexChanged(object sender, EventArgs e)
{
String program = comboProgram.SelectedItem.ToString();
String year = comboYear.SelectedItem.ToString();
String sem = comboSemester.SelectedItem.ToString();
tbl = dbCon.getResultsByProgram(program, year, sem);
GridView1.DataSource = tbl;
GridView1.DataBind();
}
protected void comboSemester_SelectedIndexChanged(object sender, EventArgs e)
{
String program = comboProgram.SelectedItem.ToString();
String year = comboYear.SelectedItem.ToString();
String sem = comboSemester.SelectedItem.ToString();
tbl = dbCon.getResultsByProgram(program, year, sem);
GridView1.DataSource = tbl;
GridView1.DataBind();
}
protected void RadioButton3_CheckedChanged(object sender, EventArgs e)
{
if (RadioButton3.Checked)
{
txtSubName.Enabled = true;
comboSemester.Enabled = false;
comboYear.Enabled = false;
comboProgram.Enabled = false;
txtSubName.Text = "";
}
}
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
}
}
GridView Code
<asp:GridView ID="GridView1" CssClass="grid" runat="server" AllowPaging="True"
BorderColor="Black" BorderStyle="Solid" BorderWidth="2px"
GridLines="Horizontal" EnableViewState="False"
PageSize="5" onselectedindexchanged="GridView1_SelectedIndexChanged" >
<RowStyle CssClass="gridRow" Width="800px" />
<SelectedRowStyle BackColor="#FF0066" ForeColor="White" />
</asp:GridView>
I think the MultiSelect and SelectionMode properties are only available with the VB.NET grid, not in ASP.NET. Bear in mind that all controls in ASP.NET are HTML-in-disguise, so they may be more limited. There is no reason why you can't have a multi-select table, but you have to do the plumbing yourself. So you need to enable row selection, either by handling the RowDataBound event as in
http://forums.asp.net/t/992062.aspx?How+to+select+row+in+gridview+on+click
or else using the MS-provided option as in
http://msdn.microsoft.com/en-us/library/wbk82279(v=vs.100).aspx
Then you need to handle the SelectedIndexChanging event, figure out which row the user clicked on, and handle the row-colouring yourself.
This problem is still actual for me 9 years later.
In As?x code I added SelectedRowStyle and asp:CommandField blocks:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<SelectedRowStyle BackColor="#337ab7" ForeColor="White" />
<Columns>
<asp:CommandField SelectText="Select" ShowSelectButton="True">
<HeaderStyle Width="50px" />
</asp:CommandField>
Code behind:
protected void GridView1_OnSelectedIndexChanged(object sender, EventArgs e)
{
GridViewRow row = GridView1.SelectedRow;
}
In gridview you have to define an event onselectedindexchanged and onrowdatabound as below:
onselectedindexchanged="GridView1_SelectedIndexChanged" onrowdatabound="GridView1_RowDataBound"
to show the selected row you can use following style in your grid view:
<SelectedRowStyle BackColor="Red" />
in code behind:
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// Set the hand mouse cursor for the selected row.
e.Row.Attributes.Add("OnMouseOver", "this.style.cursor = 'hand';");
// The seelctButton exists for ensuring the selection functionality
// and bind it with the appropriate event hanlder.
LinkButton selectButton = new LinkButton()
{
CommandName = "Select",
Text = e.Row.Cells[0].Text
};
selectButton.Font.Underline = false;
selectButton.ForeColor = Color.Black;
e.Row.Cells[0].Controls.Add(selectButton);
//e.Row.Attributes["OnClick"] =
// Page.ClientScript.GetPostBackClientHyperlink(selectButton, "");
e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.GridView1, "Select$" + e.Row.RowIndex);
}
}
note: you can find the event in event window.

modify datarow value for a specific gridview column

how would i change the value IBM to something arbitrary like Cisco in one of the gridview events listed?
there can be varying columns in the dynamic gridview so would be nice to address the column by name.
namespace WebApplication1
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable("TestTable");
dt.Columns.AddRange(new DataColumn[] { new DataColumn("id"), new DataColumn("customername") });
DataRow dr = dt.NewRow();
dr[0] = "1";
dr[1] = "Microsoft";
dt.Rows.Add(dr);
DataRow dr2 = dt.NewRow();
dr2[0] = "2";
dr2[1] = "IBM";
dt.Rows.Add(dr2);
GridView1.DataSource = dt;
GridView1.DataBind();
}
protected void GridView1_DataBinding(object sender, EventArgs e)
{
}
protected void GridView1_DataBound(object sender, EventArgs e)
{
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
}
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
}
}
}
This won't work when AutogenerateColumns is set to true(default). You need to add the columns programmatically or declaratively(in aspx markup). Then you can use a TemplateField with a Control like Label that you can reference in codebehind:
For example:
<asp:GridView ID="GridView1" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound" runat="server">
<Columns>
<asp:TemplateField HeaderText="Customer">
<ItemTemplate>
<asp:Label ID="LblCustomer" runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
RowDataBound is perfect(for almost everything):
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if(e.Row.RowType == DataControlRowType.DataRow) {
var row = ((DataRowView)e.Row.DataItem).Row;
var lblCustomer = (Label)e.Row.FindControl("LblCustomer");
var customerName = row.Field<String>( "customername" );
if(customerName == "Microsoft") {
customerName = "Cisco";
}
lblCustomer.Text = customerName;
}
}
Edit: Ok, never needed to do such. But actually you can change the Microsoft values to Cisco even with AutoGenerateColumns set to true.
DataBinding event is triggered before the GridView is databound. If you change the datasource before it's bound to grid, you'll be able to modify it:
protected void GridView1_DataBinding(object sender, EventArgs e)
{
var tbl = (DataTable)((GridView)sender).DataSource;
var msRows = tbl.AsEnumerable()
.Where(r => r.Field<String>("customername") == "Microsoft")
.Select(r => r);
foreach(DataRow msRow in msRows) {
msRow[ "customername" ] = "Cisco";
}
}
Note: of course you can also use a simple loop instead of LINQ

asp.net gridview editindex

Please take a look at this:
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
int index = Convert.ToInt32(e.CommandArgument);
if (e.CommandName == "Edit")
{
GridView1.EditIndex = index;
}
}
This code-snippet puts an entire gridview-row into the edit mode.
But I need to put only the 3rd and 5th cell (suppose) of a row into edit mode.
How can I do so?
Some may suggest not using edit template. But I am only using code behind to manipulate my data in the gridview like the following:
aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GridView___Test._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" Font-Names="Verdana" Font-Size="Small" AutoGenerateColumns="False" OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowCommand="GridView1_RowCommand" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating">
</asp:GridView>
</div>
</form>
</body>
</html>
code behind:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
CreateGridView();
}
}
private void CreateGridView()
{
GridView1.Columns.Clear();
DataTable dataTable = Book.GetBooksDataSet().Tables[0];
CommandField cf = new CommandField();
cf.ShowEditButton = true;
GridView1.Columns.Add(cf);
foreach (DataColumn c in dataTable.Columns)
{
BoundField boundField = new BoundField();
boundField.DataField = c.ColumnName;
boundField.HeaderText = c.ColumnName;
GridView1.Columns.Add(boundField);
}
GridView1.DataSource = dataTable;
GridView1.DataBind();
}
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
int index = Convert.ToInt32(e.CommandArgument);
if (e.CommandName == "Edit")
{
GridView1.EditIndex = index;
GridViewRow selectedRow = ((GridView)e.CommandSource).Rows[index];
string id = selectedRow.Cells[1].Text;
string isbn = selectedRow.Cells[2].Text;
CreateGridView();
}
else if (e.CommandName == "Update")
{
LinkButton updateButton = (LinkButton)e.CommandSource;
DataControlFieldCell dcfc = (DataControlFieldCell)updateButton.Parent;
GridViewRow gvr = (GridViewRow)dcfc.Parent;
ControlCollection cc = gvr.Cells[1].Controls;
TextBox tb = (TextBox)cc[0];
GridView1.EditIndex = -1;
CreateGridView();
}
}
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
}
protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
}
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
}
}
And my view is to avoid asp.net scripting as much as possible.
And also what is possible using scripts, must be possible by only code.
see if following helps. i.e. put non editable columns propery InsertVisible to false. Further you can put the following code in GridView1_DataBinding event. remove line GridView1.DataBind(); and just call again GridView1.DataBind(); where you call this method.
private void CreateGridView()
{
GridView GridView1 = new GridView();
GridView1.Columns.Clear();
DataTable dataTable = Book.GetBooksDataSet().Tables[0];
CommandField cf = new CommandField();
cf.ShowEditButton = true;
GridView1.Columns.Add(cf);
int colCount = 1;
foreach (DataColumn c in dataTable.Columns)
{
BoundField boundField = new BoundField();
boundField.DataField = c.ColumnName;
boundField.HeaderText = c.ColumnName;
if (colCount == 3 | colCount == 5)
{
boundField.InsertVisible = true;
}
else
{
boundField.InsertVisible = false;
}
colCount++;
GridView1.Columns.Add(boundField);
}
GridView1.DataSource = dataTable;
GridView1.DataBind();
}

Resources