Introduction
In webapplications, one the most widely task is showing a table of information to clients. In Asp.net, we make utilization of the Datagrid, Datalist and Repeater controls. Every day, the need of showing the information will be diverse. Now, we will explain to you about "How to Create Dynamic GridView Control in C#/ASP.Net". Please read the steps carefully.
Implementing Dynamic GridView Control
Utilizing the gridview to show the articles will show the article a little in diverse layout when compared with Datalist. Appoint the below figure, Dynamic Gridview.
Constructing Dynamic GridView
Showing the articles in gridview will be different from showing in datalist. For that, i have made two Template classes :
- DynamicGridViewTextTemplate
- DynamicGridViewURLTemplate
Dynamicgridviewtexttemplate class is utilized to include a layout column with label while Dynamicgridviewurltemplate class is utilized to include URL of the article.
TemplateClass for GridView
public class DynamicGridViewTextTemplate : ITemplate
{
string _ColName;
DataControlRowType _rowType;
int _Count;
public DynamicGridViewTextTemplate(string ColName, DataControlRowType RowType)
{
_ColName = ColName;
_rowType = RowType;
}
public DynamicGridViewTextTemplate(DataControlRowType RowType, int ArticleCount)
{
_rowType = RowType;
_Count = ArticleCount;
}
public void InstantiateIn(System.Web.UI.Control container)
{
switch (_rowType)
{
case DataControlRowType.Header:
Literal lc = new Literal();
lc.Text = "<b>" + _ColName + "</b>";
container.Controls.Add(lc);
break;
case DataControlRowType.DataRow:
Label lbl = new Label();
lbl.DataBinding += new EventHandler(this.lbl_DataBind);
container.Controls.Add(lbl);
break;
case DataControlRowType.Footer:
Literal flc = new Literal();
flc.Text = "<b>Total No of Articles:" + _Count + "</b>";
container.Controls.Add(flc);
break;
default:
break;
}
}
private void lbl_DataBind(Object sender, EventArgs e)
{
Label lbl = (Label)sender;
GridViewRow row = (GridViewRow)lbl.NamingContainer;
lbl.Text =DataBinder.Eval(row.DataItem, _ColName).ToString();
}
}
public class DynamicGridViewURLTemplate : ITemplate
{
string _ColNameText;
string _ColNameURL;
DataControlRowType _rowType;
public DynamicGridViewURLTemplate(string ColNameText, string ColNameURL, DataControlRowType RowType)
{
_ColNameText = ColNameText;
_rowType = RowType;
_ColNameURL = ColNameURL;
}
public void InstantiateIn(System.Web.UI.Control container)
{
switch (_rowType)
{
case DataControlRowType.Header:
Literal lc = new Literal();
lc.Text = "<b>" + _ColNameURL + "</b>";
container.Controls.Add(lc);
break;
case DataControlRowType.DataRow:
HyperLink hpl = new HyperLink();
hpl.Target = "_blank";
hpl.DataBinding += new EventHandler(this.hpl_DataBind);
container.Controls.Add(hpl);
break;
default:
break;
}
}
private void hpl_DataBind(Object sender, EventArgs e)
{
HyperLink hpl = (HyperLink)sender;
GridViewRow row = (GridViewRow)hpl.NamingContainer;
hpl.NavigateUrl = DataBinder.Eval(row.DataItem, _ColNameURL).ToString();
hpl.Text = "<div class=\"Post\"><div class=\"PostTitle\">" + DataBinder.Eval(row.DataItem, _ColNameText).ToString() + "</div></div>";
}
}
Using the Template Class in GridView
Utilizing dynamic template in gridview is not the same as datalist i.e. we will make the dynamic gridview in column wise with header layout, item template and footer layout from the first column till the last.
Steps:
- Create a Gridview Object.
- Create an instance of TemplateField object.
- Instantiate the Dynamic template class with proper ListItemType and assign it to corresponding template property of TemplateField object and finally add this object to the column collection of GridView. Refer the below code for better understanding.
Templates of GridView
TemplateField tf = new TemplateField();
tf.HeaderTemplate = new DynamicGridViewTextTemplate("ArticleID", DataControlRowType.Header);
tf.ItemTemplate = new DynamicGridViewTextTemplate("ArticleID", DataControlRowType.DataRow);
tf.FooterTemplate = new DynamicGridViewTextTemplate(DataControlRowType.Footer, ds.Tables[i].Rows.Count);
In the event that you analyze the usage of Datalist, in Gridview we won't make dynamic template for the grid within we make it for the grid's column (Templatefield). Appoint the below code (Using Template class) for clear understanding.
Using Template class
for (int i = 0; i < ds.Tables.Count; i++)
{
if (ds.Tables[i].Rows.Count > 0)
{
GridView gvDynamicArticle = new GridView();
gvDynamicArticle.Width = Unit.Pixel(700);
gvDynamicArticle.BorderWidth = Unit.Pixel(0);
gvDynamicArticle.Caption = "<div id=\"nifty\" class=\"PostCategory\"> + ds.Tables[i].Rows[0]["Category"].ToString() + " Articles</div>";
gvDynamicArticle.AutoGenerateColumns = false;
gvDynamicArticle.ShowFooter = true;
TemplateField tf = null;
tf = new TemplateField();
tf.HeaderTemplate = new DynamicGridViewTextTemplate("ArticleID", DataControlRowType.Header);
tf.ItemTemplate = new DynamicGridViewTextTemplate("ArticleID", DataControlRowType.DataRow);
tf.FooterTemplate = new DynamicGridViewTextTemplate(DataControlRowType.Footer, ds.Tables[i].Rows.Count);
gvDynamicArticle.Columns.Add(tf);
tf = new TemplateField();
tf.HeaderTemplate = new DynamicGridViewTextTemplate("Title", DataControlRowType.Header);
tf.ItemTemplate = new DynamicGridViewTextTemplate("Title", DataControlRowType.DataRow);
gvDynamicArticle.Columns.Add(tf);
tf = new TemplateField();
tf.HeaderTemplate = new DynamicGridViewTextTemplate("Description", DataControlRowType.Header);
tf.ItemTemplate = new DynamicGridViewTextTemplate("Description", DataControlRowType.DataRow);
gvDynamicArticle.Columns.Add(tf);
tf = new TemplateField();
tf.HeaderTemplate = new DynamicGridViewURLTemplate("Title", "URL", DataControlRowType.Header);
tf.ItemTemplate = new DynamicGridViewURLTemplate("Title", "URL", DataControlRowType.DataRow);
gvDynamicArticle.Columns.Add(tf);
tf = new TemplateField();
tf.HeaderTemplate = new DynamicGridViewTextTemplate("Author", DataControlRowType.Header);
tf.ItemTemplate = new DynamicGridViewTextTemplate("CreatedBy", DataControlRowType.DataRow);
gvDynamicArticle.Columns.Add(tf);
gvDynamicArticle.RowDataBound += new GridViewRowEventHandler(this.DynamicGrid_RowDataBound);
gvDynamicArticle.DataSource = ds.Tables[i];
gvDynamicArticle.DataBind();
phDynamicGridHolder.Controls.Add(gvDynamicArticle);
}
}
In the above code (Using Template class), we can unmistakably comprehend that we are making the dynamic template for the gridview's column instead of Datalist where we made the template for the grid itself. To throw more light on this it implies that we are making the first column's header, item and footer and adding it to the gridview's column list through Templatefield article till the last column as I said before.