Creating Customized Multiple Dynamic Grid Views in a tabs structure

In this article I'll explain how to create Grid View programmatically in SharePoint custom web parts using in C#.NET / ASP.NET using C#.NET Code behind.

I got a requirement that I have to create GridView programmatically. In my scenario I have used Easy Responsive Tabs and Created tab structure by dynamically adding List Item to an Unordered List Item in Responsive tabs UI structure to create tabs and container div's to create content place holder. In the Responsive tab content each tab is having a Grid view, so I have to generate and display Grid View programmatically in each tab.

My requirement output will looks like below.

To Create Grid View Programmatically with ASP.Net using C#.NET we have to write the following code in code behind

  //Loading the Place holder div control
  //which is Created in ASP.Net Control File
  HtmlGenericControl parentdivcontrol =
    (HtmlGenericControl)feedbackContainer;

  HtmlGenericControl divChildControl =
    (HtmlGenericControl)parentdivcontrol.FindControl("container" + position);

  if (divChildControl != null)
  {
   //Create GridView Dynamically with Properties
   GridView grid = new GridView();
   grid.ID = "grid" + Convert.ToString(position);
   grid.AutoGenerateColumns = false;
   grid.EmptyDataText = "No data found";
   grid.BorderWidth = 0;
   grid.GridLines = GridLines.None;
   grid.BorderStyle = BorderStyle.None;
   grid.Attributes.Add("class", "table table-hover myClass");

   //adding row data bound event
   grid.RowDataBound += new GridViewRowEventHandler(gvFeedback_RowDataBound);

   //adding Image Column using ImageField and setting its Properties
   ImageField imgfldUserImage = new ImageField();
   imgfldUserImage.HeaderText = "";
   imgfldUserImage.DataImageUrlField = "UserImage";
   grid.Columns.Add(imgfldUserImage);

   //adding Data Field Column using BoundField and setting its Properties
   BoundField boundfldMentorName = new BoundField();
   boundfldMentorName.DataField = "Name";
   boundfldMentorName.HeaderText = "Mentor Name";
   boundfldMentorName.HeaderStyle.CssClass = "User-Header-css";
   boundfldMentorName.ItemStyle.CssClass = "User-Item-css";
   grid.Columns.Add(boundfldMentorName);

   //adding Button Column using ButtonField and setting its Properties
   ButtonField btnfldStatus = new ButtonField();
   btnfldStatus.DataTextField = "Status";
   btnfldStatus.HeaderText = "Status";
   btnfldStatus.ButtonType = ButtonType.Button;
   btnfldStatus.ShowHeader = false;
   btnfldStatus.ControlStyle.CssClass = "ms-button-emphasize";
   grid.Columns.Add(btnfldStatus);

   //adding control to Place holder
   divChildControl.Controls.Add(grid);

   //Loading the grid view data and binding to it
   BindGrid(web, grid.ID, strSkillType);
  }
  else
  {
   divChildControl.InnerHtml = "<span> No Data found for Feedback </span>";
  }

click here to know about How to Bind ASP.NET Grid View Using C#

  //Bind Gridview data to the grid
  private void BindGrid(SPWeb web, string gridName, string strSkill)
  {
    GridView grid = (GridView)divTitle.FindControl(gridName);
    //your code to bind grid.
  }

  //Row data bound event
  protected void gvInternFeedback_RowDataBound(object sender,
                   System.Web.UI.WebControls.GridViewRowEventArgs e)
  {
    //your code for RowDataBound event
  }

Hope this information is useful for you.