ADO.NET

Dynamically Adding TextBox Control to ASPNET Table: Part 2

Vincent Maverick Durano — Tue, 25 Jan 2011 09:24:05 GMT

Few months ago I wrote an example about Dynamically Adding TextBox Control to ASPNET Table. As a recap that example demonstrate how to generate rows of TextBoxes in a Table control based on the number of rows and number of columns provided and as well as print the values entered by the user using the Request.Forms collections.. Recently,one of the user is asking if how are we going to accomplish the same thing by generating the TextBox in the Table based on the data from the database. So in this post I'm going to demonstrate an example on how to do it.

Okay to get started lets go a head and set up our WebForm. I have used master page in this example so the mark up would look something like this:

   1:  <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

   2:  </asp:Content>

   3:  <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

   4:      <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

   5:  </asp:Content>

As you can see there's nothing fancy in the mark up above. It just contain a PlaceHolder control in which we will add the dynamic table on it. Now lets flip to code behind page.

Here are the full code blocks below:

   1:          private DataTable FillData() {

2:

   3:              DataTable dt = new DataTable();

   4:              DataRow dr = null;

5:

   6:              //Create DataTable columns

   7:              dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));

   8:              dt.Columns.Add(new DataColumn("Col1", typeof(string)));

   9:              dt.Columns.Add(new DataColumn("Col2", typeof(string)));

  10:              dt.Columns.Add(new DataColumn("Col3", typeof(string)));

  11:              dt.Columns.Add(new DataColumn("Col4", typeof(string)));

12:

  13:              //Create Row for each columns

  14:              dr = dt.NewRow();

  15:              dr["RowNumber"] = 1;

  16:              dr["Col1"] = "A";

  17:              dr["Col2"] = "B";

  18:              dr["Col3"] = "C";

  19:              dr["Col4"] = "D";

  20:              dt.Rows.Add(dr);

21:

  22:              dr = dt.NewRow();

  23:              dr["RowNumber"] = 2;

  24:              dr["Col1"] = "AA";

  25:              dr["Col2"] = "BB";

  26:              dr["Col3"] = "CC";

  27:              dr["Col4"] = "DD";

  28:              dt.Rows.Add(dr);

29:

  30:              dr = dt.NewRow();

  31:              dr["RowNumber"] = 3;

  32:              dr["Col1"] = "A";

  33:              dr["Col2"] = "B";

  34:              dr["Col3"] = "CC";

  35:              dr["Col4"] = "DD";

  36:              dt.Rows.Add(dr);

37:

  38:              dr = dt.NewRow();

  39:              dr["RowNumber"] = 4;

  40:              dr["Col1"] = "A";

  41:              dr["Col2"] = "B";

  42:              dr["Col3"] = "CC";

  43:              dr["Col4"] = "DD";

  44:              dt.Rows.Add(dr);

45:

  46:              dr = dt.NewRow();

  47:              dr["RowNumber"] = 5;

  48:              dr["Col1"] = "A";

  49:              dr["Col2"] = "B";

  50:              dr["Col3"] = "CC";

  51:              dr["Col4"] = "DD";

  52:              dt.Rows.Add(dr);

53:

  54:              return dt;

  55:          }

56:

  57:          private void GenerateTable(DataTable dtSource) {

  58:              int rowsCount = dtSource.Rows.Count;

  59:              int colsCount = dtSource.Columns.Count;

60:

  61:              //Creat the Table and Add it to the Page

  62:              Table table = new Table();

  63:              table.ID = "Table1";

64:

  65:              // Add the dynamic table to the PlaceHolder control

  66:              PlaceHolder1.Controls.Add(table);

67:

  68:              // Now iterate through the datatable and add the controls

  69:              for (int rowIndex = 0; rowIndex < rowsCount; rowIndex++) {

70:

  71:                  TableRow row = new TableRow();

72:

  73:                  for (int colIndex = 0; colIndex < colsCount; colIndex++) {

  74:                      TableCell cell = new TableCell();

  75:                      TextBox tb = new TextBox();

  76:                      // Set a unique ID for each TextBox added

  77:                      tb.ID = "TextBoxRow_" + rowIndex + "Col_" + colIndex;

  78:                      // Assign value for each TextBox added

  79:                      tb.Text = dtSource.Rows[rowIndex][colIndex].ToString();

  80:                      // Add the control to the TableCell

  81:                      cell.Controls.Add(tb);

  82:                      // Add the TableCell to the TableRow

  83:                      row.Cells.Add(cell);

  84:                  }

  85:                  // After the columns iteration, add the TableRow to the Table

  86:                  table.Rows.Add(row);

  87:              }

  88:          }

  89:          protected void Page_Load(object sender, EventArgs e) {

  90:              if (!IsPostBack) {

  91:                  GenerateTable(FillData());

  92:              }

  93:          }

The code above have two main Methods which are the FillData() and GenerateTable(). The FillData() method is a method that returns a DataTable. If you notice I just fill the DataTable with a dummy data just for the purpose of this demo. In case you want to grab the data from the Database then you can replace the implementation of the FillData() method. You can use DataTable and SqlDataAdapter. Assign a select command to your SqlDataAdapter and then callSqlDataAdapter .Fill method. This would populate the desired data into yourDataTable . Here's a quick example below for your reference:

   1:         private DataTable FillData() {

   2:              DataTable dt = new DataTable();

   3:              using (SqlConnection connection = new SqlConnection("Your Connection String")) {

   4:                  try {

   5:                      connection.Open();

   6:                      string spName = "YOURStoredProcudureName";

   7:                      SqlCommand sqlCmd = new SqlCommand(spName, connection);

   8:                      SqlDataAdapter sqlDa = new SqlDataAdapter(sqlCmd);

   9:                      sqlCmd.CommandType = CommandType.StoredProcedure;

10:

  11:                      sqlDa.Fill(dt);

  12:                      if (dt.Rows.Count > 0) {

  13:                          return dt;

  14:                      }

  15:                  }

  16:                  finally {

  17:                      connection.Close();

  18:                  }

  19:                  return dt;

  20:              }

  21:          }

That simple. Now, the GenerateTable() method handles the generation of dynamic texboxes in the Table control. This method will generate rows of TextBoxes based on the row count and column count of the DataTable source. I have included some comments on that method to help you undertand the code. Here's the output below when viewed in the browser:

That's it! I hope someone find this post useful!

Technorati Tags: ASP.NET,Dynamic Controls,ADO.NET,C#

Inserting and Deleting Sub Rows in GridView

Vincent Maverick Durano — Tue, 04 Jan 2011 09:52:42 GMT

A user in the forums (http://forums.asp.net) is asking how to insert sub rows in GridView and also add delete functionality for the inserted sub rows. In this post I'm going to demonstrate how to this in ASP.NET WebForms. The basic idea to achieve this is we just need to insert row data in the DataSource that is being used in GridView since the GridView rows will be generated based on the DataSource data.

To make it more clear then let's build up a sample application. To start fire up Visual Studio and create a WebSite or Web Application project and then add a new WebForm. In the WebForm ASPX page add this GridView markup below:

   1:  <asp:gridview ID="GridView1" runat="server" AutoGenerateColumns="false" onrowdatabound="GridView1_RowDataBound">

   2:          <Columns>

   3:          <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />

   4:          <asp:TemplateField HeaderText="Header 1">

   5:              <ItemTemplate>

   6:                  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

   7:              </ItemTemplate>

   8:          </asp:TemplateField>

   9:          <asp:TemplateField HeaderText="Header 2">

  10:              <ItemTemplate>

  11:                  <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

  12:              </ItemTemplate>

  13:          </asp:TemplateField>

  14:          <asp:TemplateField HeaderText="Header 3">

  15:              <ItemTemplate>

  16:                   <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

  17:              </ItemTemplate>

  18:          </asp:TemplateField>

  19:          <asp:TemplateField HeaderText="Action">

  20:              <ItemTemplate>

  21:                  <asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click" Text="Insert"></asp:LinkButton>

  22:              </ItemTemplate>

  23:          </asp:TemplateField>

  24:          </Columns>

  25:  </asp:gridview>

Then at the code behind source of ASPX page you can add this codes below:

   1:  private DataTable FillData() {

2:

   3:              DataTable dt = new DataTable();

   4:              DataRow dr = null;

5:

   6:              //Create DataTable columns

   7:              dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));

8:

   9:              //Create Row for each columns

  10:              dr = dt.NewRow();

  11:              dr["RowNumber"] = 1;

  12:              dt.Rows.Add(dr);

13:

  14:              dr = dt.NewRow();

  15:              dr["RowNumber"] = 2;

  16:              dt.Rows.Add(dr);

17:

  18:              dr = dt.NewRow();

  19:              dr["RowNumber"] = 3;

  20:              dt.Rows.Add(dr);

21:

  22:              dr = dt.NewRow();

  23:              dr["RowNumber"] = 4;

  24:              dt.Rows.Add(dr);

25:

  26:              dr = dt.NewRow();

  27:              dr["RowNumber"] = 5;

  28:              dt.Rows.Add(dr);

29:

  30:              //Store the DataTable in ViewState for future reference

  31:              ViewState["CurrentTable"] = dt;

32:

  33:              return dt;

34:

  35:          }

36:

  37:          private void BindGridView(DataTable dtSource) {

  38:              GridView1.DataSource = dtSource;

  39:              GridView1.DataBind();

  40:          }

41:

  42:          private DataRow InsertRow(DataTable dtSource, string value) {

  43:              DataRow dr = dtSource.NewRow();

  44:              dr["RowNumber"] = value;

  45:              return dr;

  46:          }

  47:          //private DataRow DeleteRow(DataTable dtSource,

48:

  49:          protected void Page_Load(object sender, EventArgs e) {

  50:              if (!IsPostBack) {

  51:                  BindGridView(FillData());

  52:              }

  53:          }

54:

  55:          protected void LinkButton1_Click(object sender, EventArgs e) {

  56:              LinkButton lb = (LinkButton)sender;

  57:              GridViewRow row = (GridViewRow)lb.NamingContainer;

  58:              DataTable dtCurrentData = (DataTable)ViewState["CurrentTable"];

  59:              if (lb.Text == "Insert") {

  60:                  //Insert new row below the selected row

  61:                  dtCurrentData.Rows.InsertAt(InsertRow(dtCurrentData, row.Cells[0].Text + "-sub"), row.RowIndex + 1);

62:

  63:              }

  64:              else {

  65:                  //Delete selected sub row

  66:                  dtCurrentData.Rows.RemoveAt(row.RowIndex);

  67:              }

68:

  69:              BindGridView(dtCurrentData);

  70:              ViewState["CurrentTable"] = dtCurrentData;

  71:          }

72:

  73:          protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {

  74:              if (e.Row.RowType == DataControlRowType.DataRow) {

  75:                  if (e.Row.Cells[0].Text.Contains("-sub")) {

  76:                      ((LinkButton)e.Row.FindControl("LinkButton1")).Text = "Delete";

  77:                  }

  78:              }

  79:          }

As you can see the code above is pretty straight forward and self explanatory but just to give you a short explanation the code above is composed of three (3) private methods which are the FillData(), BindGridView and InsertRow(). The FillData() method is a method that returns a DataTable and basically creates a dummy data in the DataTable to be used as the GridView DataSource. You can replace the code in that method if you want to use actual data from database but for the purpose of this example I just fill the DataTable with a dummy data on it. The BindGridVew is a method that handles the actual binding of GridVew. The InsertRow() is a method that returns a DataRow. This method handles the insertion of the sub row.

Now in the LinkButton OnClick event, we casted the sender to a LinkButton to determine the specific object that fires up the event and get the row values. We then reference the Data from ViewState to get the current data that is being used in the GridView. If the LinkButton text is "Insert" then we will insert new row to the DataSource ( in this case the DataTable) based on the rowIndex if not then Delete the sub row that was added.

Here are some screen shots of the output below:

On initial load:

After inserting a sub row:

That's it! I hope someone find this post useful!

Technorati Tags: ASP.NET,C#,GridView

Uploading and Importing CSV file to SQL Server in ASP.NET WebForms

Vincent Maverick Durano — Mon, 03 Jan 2011 09:03:55 GMT

Few weeks ago I was working with a small internal project that involves importing CSV file to Sql Server database and thought I'd share the simple implementation that I did on the project.

In this post I will demonstrate how to upload and import CSV file to SQL Server database. As some may have already know, importing CSV file to SQL Server is easy and simple but difficulties arise when the CSV file contains, many columns with different data types. Basically, the provider cannot differentiate data types between the columns or the rows, blindly it will consider them as a data type based on first few rows and leave all the data which does not match the data type. To overcome this problem, I used schema.ini file to define the data type of the CSV file and allow the provider to read that and recognize the exact data types of each column.

Now what is schema.ini?

Taken from the documentation: The Schema.ini is a information file, used to define the data structure and format of each column that contains data in the CSV file. If schema.ini file exists in the directory, Microsoft.Jet.OLEDB provider automatically reads it and recognizes the data type information of each column in the CSV file. Thus, the provider intelligently avoids the misinterpretation of data types before inserting the data into the database. For more information see: http://msdn.microsoft.com/en-us/library/ms709353%28VS.85%29.aspx

Points to remember before creating schema.ini:

1. The schema information file, must always named as 'schema.ini'.
2. The schema.ini file must be kept in the same directory where the CSV file exists.
3. The schema.ini file must be created before reading the CSV file.
4. The first line of the schema.ini, must the name of the CSV file, followed by the properties of the CSV file, and then the properties of the each column in the CSV file.

Here's an example of how the schema looked like:

[Employee.csv]
ColNameHeader=False
Format=CSVDelimited
DateTimeFormat=dd-MMM-yyyy
Col1=EmployeeID Long
Col2=EmployeeFirstName Text Width 100
Col3=EmployeeLastName Text Width 50
Col4=EmployeeEmailAddress Text Width 50

To get started lets's go a head and create a simple blank database. Just for the purpose of this demo I created a database called TestDB.

After creating the database then lets go a head and fire up Visual Studio and then create a new WebApplication project.

Under the root application create a folder called UploadedCSVFiles and then place the schema.ini on that folder. The uploaded CSV files will be stored in this folder after the user imports the file.

Now add a WebForm in the project and set up the HTML mark up and add one (1) FileUpload control one(1)Button and three (3) Label controls.

After that we can now proceed with the codes for uploading and importing the CSV file to SQL Server database. Here are the full code blocks below:

   1:  using System;

   2:  using System.Data;

   3:  using System.Data.SqlClient;

   4:  using System.Data.OleDb;

   5:  using System.IO;

   6:  using System.Text;

7:

   8:  namespace WebApplication1

   9:  {

  10:      public partial class CSVToSQLImporting : System.Web.UI.Page

  11:      {

  12:          private string GetConnectionString()

  13:          {

  14:              return System.Configuration.ConfigurationManager.ConnectionStrings["DBConnectionString"].ConnectionString;

  15:          }

  16:          private void CreateDatabaseTable(DataTable dt, string tableName)

  17:          {

18:

  19:              string sqlQuery = string.Empty;

  20:              string sqlDBType = string.Empty;

  21:              string dataType = string.Empty;

  22:              int maxLength = 0;

  23:              StringBuilder sb = new StringBuilder();

24:

  25:              sb.AppendFormat(string.Format("CREATE TABLE {0} (", tableName));

26:

  27:              for (int i = 0; i < dt.Columns.Count; i++)

  28:              {

  29:                  dataType = dt.Columns[i].DataType.ToString();

  30:                  if (dataType == "System.Int32")

  31:                  {

  32:                      sqlDBType = "INT";

  33:                  }

  34:                  else if (dataType == "System.String")

  35:                  {

  36:                      sqlDBType = "NVARCHAR";

  37:                      maxLength = dt.Columns[i].MaxLength;

  38:                  }

39:

  40:                  if (maxLength > 0)

  41:                  {

  42:                      sb.AppendFormat(string.Format(" {0} {1} ({2}), ", dt.Columns[i].ColumnName, sqlDBType, maxLength));

  43:                  }

  44:                  else

  45:                  {

  46:                      sb.AppendFormat(string.Format(" {0} {1}, ", dt.Columns[i].ColumnName, sqlDBType));

  47:                  }

  48:              }

49:

  50:              sqlQuery = sb.ToString();

  51:              sqlQuery = sqlQuery.Trim().TrimEnd(',');

  52:              sqlQuery = sqlQuery + " )";

53:

  54:              using (SqlConnection sqlConn = new SqlConnection(GetConnectionString()))

  55:              {

  56:                  sqlConn.Open();

  57:                  SqlCommand sqlCmd = new SqlCommand(sqlQuery, sqlConn);

  58:                  sqlCmd.ExecuteNonQuery();

  59:                  sqlConn.Close();

  60:              }

61:

  62:          }

  63:          private void LoadDataToDatabase(string tableName, string fileFullPath, string delimeter)

  64:          {

  65:              string sqlQuery = string.Empty;

  66:              StringBuilder sb = new StringBuilder();

67:

  68:              sb.AppendFormat(string.Format("BULK INSERT {0} ", tableName));

  69:              sb.AppendFormat(string.Format(" FROM '{0}'", fileFullPath));

  70:              sb.AppendFormat(string.Format(" WITH ( FIELDTERMINATOR = '{0}' , ROWTERMINATOR = '\n' )", delimeter));

71:

  72:              sqlQuery = sb.ToString();

73:

  74:              using (SqlConnection sqlConn = new SqlConnection(GetConnectionString()))

  75:              {

  76:                  sqlConn.Open();

  77:                  SqlCommand sqlCmd = new SqlCommand(sqlQuery, sqlConn);

  78:                  sqlCmd.ExecuteNonQuery();

  79:                  sqlConn.Close();

  80:              }

  81:          }

  82:          protected void Page_Load(object sender, EventArgs e)

  83:          {

84:

  85:          }

  86:          protected void BTNImport_Click(object sender, EventArgs e)

  87:          {

  88:              if (FileUpload1.HasFile)

  89:              {

  90:                  FileInfo fileInfo = new FileInfo(FileUpload1.PostedFile.FileName);

  91:                  if (fileInfo.Name.Contains(".csv"))

  92:                  {

93:

  94:                      string fileName = fileInfo.Name.Replace(".csv", "").ToString();

  95:                      string csvFilePath = Server.MapPath("UploadedCSVFiles") + "\\" + fileInfo.Name;

96:

  97:                      //Save the CSV file in the Server inside 'MyCSVFolder'

  98:                      FileUpload1.SaveAs(csvFilePath);

99:

 100:                      //Fetch the location of CSV file

 101:                      string filePath = Server.MapPath("UploadedCSVFiles") + "\\";

 102:                      string strSql = "SELECT * FROM [" + fileInfo.Name + "]";

 103:                      string strCSVConnString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + filePath + ";" + "Extended Properties='text;HDR=YES;'";

 104:

 105:                      // load the data from CSV to DataTable

 106:

 107:                      OleDbDataAdapter adapter = new OleDbDataAdapter(strSql, strCSVConnString);

 108:                      DataTable dtCSV = new DataTable();

 109:                      DataTable dtSchema = new DataTable();

 110:

 111:                      adapter.FillSchema(dtCSV, SchemaType.Mapped);

 112:                      adapter.Fill(dtCSV);

 113:

 114:                      if (dtCSV.Rows.Count > 0)

 115:                      {

 116:                          CreateDatabaseTable(dtCSV, fileName);

 117:                          Label2.Text = string.Format("The table ({0}) has been successfully created to the database.", fileName);

 118:

 119:                          string fileFullPath = filePath + fileInfo.Name;

 120:                          LoadDataToDatabase(fileName, fileFullPath, ",");

 121:

 122:                          Label1.Text = string.Format("({0}) records has been loaded to the table {1}.", dtCSV.Rows.Count, fileName);

 123:                      }

 124:                      else

 125:                      {

 126:                          LBLError.Text = "File is empty.";

 127:                      }

 128:                  }

 129:                  else

 130:                  {

 131:                      LBLError.Text = "Unable to recognize file.";

 132:                  }

 133:

 134:              }

 135:          }

 136:      }

 137:  }

The code above consists of three (3) private methods which are the GetConnectionString(), CreateDatabaseTable() and LoadDataToDatabase(). The GetConnectionString() is a method that returns a string. This method basically gets the connection string that is configured in the web.config file. The CreateDatabaseTable() is method that accepts two (2) parameters which are the DataTable and the filename. As the method name already suggested, this method automatically create a Table to the database based on the source DataTable and the filename of the CSV file. The LoadDataToDatabase() is a method that accepts three (3) parameters which are the tableName, fileFullPath and delimeter value. This method is where the actual saving or importing of data from CSV to SQL server happend.

The codes at BTNImport_Click event handles the uploading of CSV file to the specified location and at the same time this is where the CreateDatabaseTable() and LoadDataToDatabase() are being called. If you notice I also added some basic trappings and validations within that event.

Now to test the importing utility then let's create a simple data in a CSV format. Just for the simplicity of this demo let's create a CSV file and name it as "Employee" and add some data on it. Here's an example below:

1,VMS,Durano,email1@email.com
2,Jennifer,Cortes,email2@email.com
3,Xhaiden,Durano,email3@email.com
4,Angel,Santos,emai4@email.com
5,Kier,Binks,emai5@email.com
6,Erika,Bird,emai6@email.com
7,Vianne,Durano,emai7@email.com
8,Lilibeth,Tree,emai8@email.com
9,Bon,Bolger,email9@email.com
10,Brian,Jones,email10@email.com

Now save the newly created CSV file in some location in your hard drive.

Okay let's run the application and browse the CSV file that we have just created. Take a look at the sample screen shots below:

After browsing the CSV file.

After clicking the Import Button

Now if we look at the database that we have created earlier you'll notice that the Employee table is created with the imported data on it. See below screen shot.

That's it! I hope someone find this post useful!

Technorati Tags: ASP.NET,CSV,SQL,C#,ADO.NET

FAQ: GridView Calculation with JavaScript

Vincent Maverick Durano — Wed, 08 Dec 2010 14:29:10 GMT

In my previous post I wrote a simple demo on how to Calculate Totals in GridView and Display it in the Footer. Basically what it does is it calculates the total amount by typing into the TextBox and display the grand total in the footer of the GridView and basically it was a server side implemenation. Many users in the forums are asking how to do the same thing without postbacks and how to calculate both amount and total amount together.

In this post I will demonstrate how to do this using JavaScript. To get started let's go ahead and set up the form. Just for the simplicity of this demo I just set up the form like this:

<asp:gridview ID="GridView1"  runat="server"  ShowFooter="true" AutoGenerateColumns="false">
        <Columns>
        <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
        <asp:BoundField DataField="Description" HeaderText="Item Description" />
        <asp:TemplateField HeaderText="Item Price">
            <ItemTemplate>
                <asp:Label ID="LBLPrice" runat="server" Text='<%# Eval("Price") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="TXTQty" runat="server"></asp:TextBox>
            </ItemTemplate>
            <FooterTemplate>
                <b>Total Amount:</b>
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Sub-Total">
            <ItemTemplate>
                <asp:Label ID="LBLSubTotal" runat="server"></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="LBLTotal" runat="server" ForeColor="Green"></asp:Label>
            </FooterTemplate>
        </asp:TemplateField>
        </Columns>
    </asp:gridview>

As you can see there's no fancy about the mark up above. It just a standard GridView with BoundFields and TemplateFields on it. Now just for the purpose of this demo I just use a dummy data for populating the GridView. Here's the code below:

    public partial class GridCalculation : System.Web.UI.Page
    {
        private void BindDummyDataToGrid() {

            DataTable dt = new DataTable();
            DataRow dr = null;

            dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
            dt.Columns.Add(new DataColumn("Description", typeof(string)));
            dt.Columns.Add(new DataColumn("Price", typeof(string)));

            dr = dt.NewRow();
            dr["RowNumber"] = 1;
            dr["Description"] = "Nike";
            dr["Price"] = "1000";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["RowNumber"] = 2;
            dr["Description"] = "Converse";
            dr["Price"] = "800";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["RowNumber"] = 3;
            dr["Description"] = "Adidas";
            dr["Price"] = "500";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["RowNumber"] = 4;
            dr["Description"] = "Reebok";
            dr["Price"] = "750";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["RowNumber"] = 5;
            dr["Description"] = "Vans";
            dr["Price"] = "1100";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["RowNumber"] = 6;
            dr["Description"] = "Fila";
            dr["Price"] = "200";
            dt.Rows.Add(dr);


            //Bind the Gridview
            GridView1.DataSource = dt;
            GridView1.DataBind();

        }

        protected void Page_Load(object sender, EventArgs e) {
            if (!IsPostBack) {
                BindDummyDataToGrid();
            }
        }
    }

Now try to run the page. The output should look something like below:

The Client-Side Calculation

Here's the code for the GridView calculation:

<script type="text/javascript">
      
        function CalculateTotals() {
            var gv = document.getElementById("<%= GridView1.ClientID %>");
            var tb = gv.getElementsByTagName("input");
            var lb = gv.getElementsByTagName("span");

            var sub = 0;
            var total = 0;
            var indexQ = 1;
            var indexP = 0;

            for (var i = 0; i < tb.length; i++) {
                if (tb[i].type == "text") {
                    sub = parseFloat(lb[indexP].innerHTML) * parseFloat(tb[i].value);
                    if (isNaN(sub)) {
                        lb[i + indexQ].innerHTML = "";
                        sub = 0;
                    }
                    else {
                        lb[i + indexQ].innerHTML = sub;
                    }
                   
                    indexQ++;
                    indexP = indexP + 2;

                    total += parseFloat(sub);
                }
            }
            lb[lb.length -1].innerHTML = total;
        }
 
</script>

The code above calculates the sub-total by multiplying the price and the quantity and at the same time calculates the total amount by adding the sub-total values. Now you can simply call the JavaScript function above like this:

<ItemTemplate>
     <asp:TextBox ID="TXTQty" runat="server" onkeyup="CalculateTotals();"></asp:TextBox>
</ItemTemplate>

Running the code above will display something like below:

That's it! I hope someone find this post useful!

Technorati Tags: ASP.NET,JavaScript,GridView,TipsTricks

Building Dynamic Repeater Rows

Vincent Maverick Durano — Wed, 01 Dec 2010 15:33:44 GMT

Few months ago I wrote a series of blog posts about creating a dynamic rows in GridView and Table. In this example I'm going to demonstrate how to build a simple form that allows you to create a dynamic row using the standard ASP Repeater control.

To get started, let’s grab a Repeater control from the Visual Studio Toolbox and place it in the WebForm. The mark up should look something like this:

<!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>Building a Dynamic Repeater Rows</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <asp:Label ID="LabelRowNumber" Text='<%# DataBinder.Eval(Container.DataItem, "RowNumber") %>' runat="server" />
            <asp:TextBox ID="TXTName" runat="server" Width="100px"></asp:TextBox><br />
            &nbsp;&nbsp;&nbsp;<asp:TextBox ID="TXTComments" TextMode="MultiLine" Height="50px" Width="200px" runat="server"></asp:TextBox><br />     
        </ItemTemplate>
        </asp:Repeater>
         &nbsp;&nbsp;&nbsp;<asp:Button ID="BTNPost" runat="server" Text="Post" OnClick="BTNPost_Click" /><br />
    </div>
    </form>
</body>
</html>

Just for the purpose of this example, I want to create a form that would allow me to enter a name with comments. So as you can see I have added an ItemTemplate within the Repeater and set up some TextBox there for me enter the name and comments. You will also noticed that the Post Button is being placed outside the Repeater control because we don't want to repeat that Button for each row.

Now let’s switch to the Code behind part of the webform.

As you may know, a Data Representation control such as Repeater will not show up in the page once there is no data associated on it. So the first thing we need here is to set an initial data in the Repeater control. To do this, we can use a DataTable for binding our GridView and set up some dummy data.

Here’s the code block below:

private void SetInitialRow() {

        DataTable dt = new DataTable();
        DataRow dr = null;

        //Create DataTable columns
        dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
        dt.Columns.Add(new DataColumn("Name", typeof(string)));
        dt.Columns.Add(new DataColumn("Comments", typeof(string)));

        //Create Row for each columns
        dr = dt.NewRow();

        dr["RowNumber"] = 1;
        dr["Name"] = string.Empty;
        dr["Comments"] = string.Empty;
        dt.Rows.Add(dr);

        //Store the DataTable in ViewState for future reference
        ViewState["CurrentTable"] = dt;

        //Bind the Repeater with the DataTable
        Repeater1.DataSource = dt;
        Repeater1.DataBind();

}

As you can see, we defined 3 (three) Columns in the DataTable called RowNumber, Name and Comments. The RowNumber column will serve as the key for generating the rows in the Repeater. Noticed that for Name and Comments columns, I have assigned an empty value for them since the Repeater will be generated for the first time. You also noticed that I stored the DataTable in ViewState so that we can reference the current data associated within the DataTable when it postbacks.

Now lets call the method above in Page_Load event:

protected void Page_Load(object sender, EventArgs e){
    if (!IsPostBack) {
         SetInitialRow();
    }
}

Now when we run the page on the brower you will see something like below:

Now let us create the method for generating the rows when clicking the Button. Here are the code blocks below:

private void AddNewRow() {

        int rowIndex = 0;
        if (ViewState["CurrentTable"] != null) {

            DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
            DataRow drCurrentRow = null;

            if (dtCurrentTable.Rows.Count > 0) {
                for (int i = 1; i <= dtCurrentTable.Rows.Count; i++) {
                    //extract the TextBox values
                    TextBox tbName = (TextBox)Repeater1.Items[rowIndex].FindControl("TXTName");
                    TextBox tbComments = (TextBox)Repeater1.Items[rowIndex].FindControl("TXTComments");

                    //Create new row in DataTable and set its values
                    drCurrentRow = dtCurrentTable.NewRow();

                    drCurrentRow["RowNumber"] = i + 1;
                    dtCurrentTable.Rows[i - 1]["Name"] = tbName.Text;
                    dtCurrentTable.Rows[i - 1]["Comments"] = tbComments.Text;
                    rowIndex++;

                }

                //add the new row to the current DataTable
                dtCurrentTable.Rows.Add(drCurrentRow);
                //store the current DataTable in ViewState
                ViewState["CurrentTable"] = dtCurrentTable;
                //rebind the Repeater with the updated DataTable
                Repeater1.DataSource = dtCurrentTable;
                Repeater1.DataBind();
            }
        }
        else {
            Response.Write("ViewState is null");

        }
        //Set Previous Data on Postbacks
        SetPreviousData();
}

As a summary, the code above gets the previous data stored from the viewstate and set the data stored from it into a DataTable so that we can add a new row based from the value entered from the TextBox.

You will also noticed that we call the method SetPreviousData() at the bottom part of the codes above. Now where is that method? Below are the code blocks for that method:

private void SetPreviousData() {
        int rowIndex = 0;
        if (ViewState["CurrentTable"] != null) {
            DataTable dt = (DataTable)ViewState["CurrentTable"];
            if (dt.Rows.Count > 0) {
                for (int i = 0; i < dt.Rows.Count; i++) {

                    TextBox tbName = (TextBox)Repeater1.Items[rowIndex].FindControl("TXTName");
                    TextBox tbComments = (TextBox)Repeater1.Items[rowIndex].FindControl("TXTComments");

                    //Disable previous rows
                    if (i < dt.Rows.Count - 1) {
                        tbName.Enabled = false;
                        tbComments.Enabled = false;
                    }
                    else {
                        tbName.Enabled = true;
                        tbComments.Enabled = true;
                    }

                    tbName.Text = dt.Rows[i]["Name"].ToString();
                    tbComments.Text = dt.Rows[i]["Comments"].ToString();
                    rowIndex++;
                }
            }
        }
}

Now, since the methods are all set then we can call this at Button Click event of the Post Button.

protected void BTNPost_Click(object sender, EventArgs e) {
        AddNewRow();
}

As you can see the code above is very straight forward and self explanatory. Running the code above will give us the following output below:

On initial load:

After adding a new row:

That's it. I hope someone find this post useful!

Technorati Tags: Dynamic Controls,Repeater

Move Multiple Rows Between GridViews

Vincent Maverick Durano — Thu, 08 Oct 2009 15:19:26 GMT

This example shows how to move multiple rows between GridViews. The main idea here is to use a CheckBox control for selecting the rows to be removed from one GridView to another and vise versa.

Take a look at sample screen shots below:

On initial load:

Selecting rows from the left GridView:

After Moving the selected rows to the right GridView:

As you notice the selected rows are automatically sorted by its ID upon moving.

Selecting rows from the Right GridView:

After Moving the selected rows to the Left GridView:

Here are the code blocks below for the implementation:

ASPX SOURCE:

<title>Untitled Page</title>

</head>

<body>

<div>

</div>

<table>

<tr>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">

<asp:TemplateField>

<asp:CheckBox ID="CheckBox1" runat="server" />

</ItemTemplate>

</asp:TemplateField>

<asp:BoundField DataField="EmployeeID" HeaderText="ID" />

<asp:BoundField DataField="LastName" HeaderText="Last Name" />

<asp:BoundField DataField="FirstName" HeaderText="First Name" />

</Columns>

</asp:GridView>

</td>

<td>

<asp:Button ID="Button1" runat="server" Text=">>>" onclick="Button1_Click" />

<br />

<asp:Button ID="Button2" runat="server" Text="<<<" onclick="Button2_Click" />

</td>

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false">

<asp:TemplateField>

<asp:CheckBox ID="CheckBox1" runat="server" />

</ItemTemplate>

</asp:TemplateField>

<asp:BoundField DataField="EmployeeID" HeaderText="ID" />

<asp:BoundField DataField="LastName" HeaderText="Last Name" />

<asp:BoundField DataField="FirstName" HeaderText="First Name" />

</Columns>

</asp:GridView>

</td>

</tr>

</table>

</form>

</body>

</html>

RELEVANT CODES:

public partial class AddMultipleRowsGridView : System.Web.UI.Page

{

private DataTable _clonedTable;

private string GetConnectionString()

{

return @"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Northwind.mdf;Integrated Security=True;User Instance=True";

}

private DataTable QueryData()

{

DataTable dt = new DataTable();

SqlConnection connection = new SqlConnection(GetConnectionString());

try

{

connection.Open();

string sqlStatement = "SELECT TOP(10)EmployeeID, LastName, FirstName FROM Employees";

SqlCommand sqlCmd = new SqlCommand(sqlStatement, connection);

SqlDataAdapter sqlDa = new SqlDataAdapter(sqlCmd);

sqlDa.Fill(dt);

}

catch (System.Data.SqlClient.SqlException ex)

{

string msg = "Fetch Error:";

msg += ex.Message;

throw new Exception(msg);

}

finally

{

connection.Close();

}

return dt;

}

private void BindGrid(DataTable dt, GridView gv)

{

if (dt.Rows.Count > 0)

{

dt = TrimEmptyRow(dt);

gv.DataSource = SortData(dt);

gv.DataBind();

}

else

{

ShowNoResultFound(dt, gv);

}

if (gv.ID == "GridView1")

ViewState["OrigData"] = dt;

else

{

ViewState["MovedData"] = dt;

}

private DataTable SortData(DataTable dt)

{

DataView dv = dt.DefaultView;

dv.Sort = "EmployeeID ASC";

dt = dv.ToTable();

return dt;

}

private void MoveRows(DataTable dt, GridView gv)

{

for (int i = gv.Rows.Count - 1; i >= 0; i--)

{

CheckBox cb = (CheckBox)gv.Rows[i].Cells[0].FindControl("CheckBox1");

if (cb != null)

{

if (cb.Checked)

{

AddRow(dt.Rows[i], gv);

dt.Rows.Remove(dt.Rows[i]);

}

BindGrid(dt, gv);

}

private void AddRow(DataRow row,GridView gv)

{

DataTable dt = null;

if (ViewState["MovedData"] == null)

{

dt = (DataTable)ViewState["ClonedTable"];

dt.ImportRow(row);

dt.Rows.Remove(dt.Rows[0]);

ViewState["MovedData"] = dt;

BindGrid(dt, GridView2);

}

else

{

if (gv.ID == "GridView1")

{

dt = (DataTable)ViewState["MovedData"];

dt.ImportRow(row);

ViewState["MovedData"] = dt;

BindGrid(dt, GridView2);

}

else

{

dt = (DataTable)ViewState["OrigData"];

dt.ImportRow(row);

ViewState["OrigData"] = dt;

BindGrid(dt, GridView1);

}

private DataTable TrimEmptyRow(DataTable dt)

{

if (dt.Rows[0][0].ToString() == string.Empty)

{

dt.Rows.Remove(dt.Rows[0]);

}

return dt;

}

private void ShowNoResultFound(DataTable source, GridView gv)

{

source.Rows.Add(source.NewRow()); // create a new blank row to the DataTable

// Bind the DataTable which contain a blank row to the GridView

gv.DataSource = source;

gv.DataBind();

// Get the total number of columns in the GridView to know what the Column Span should be

int columnsCount = gv.Columns.Count;

gv.Rows[0].Cells.Clear();// clear all the cells in the row

gv.Rows[0].Cells.Add(new TableCell()); //add a new blank cell

gv.Rows[0].Cells[0].ColumnSpan = columnsCount; //set the column span to the new added cell

//You can set the styles here

gv.Rows[0].Cells[0].HorizontalAlign = HorizontalAlign.Center;

gv.Rows[0].Cells[0].ForeColor = System.Drawing.Color.Red;

gv.Rows[0].Cells[0].Font.Bold = true;

//set No Results found to the new added cell

gv.Rows[0].Cells[0].Text = "NO ITEMS FOUND!";

}

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

BindGrid(QueryData(), GridView1);

_clonedTable = QueryData().Clone();

ViewState["ClonedTable"] = _clonedTable;

ShowNoResultFound(_clonedTable, GridView2);

}

protected void Button1_Click(object sender, EventArgs e)

{

DataTable dtOrigData = (DataTable)ViewState["OrigData"];

MoveRows(SortData(dtOrigData), GridView1);

}

protected void Button2_Click(object sender, EventArgs e)

{

DataTable dtMovedData = (DataTable)ViewState["MovedData"];

MoveRows(SortData(dtMovedData), GridView2);

}

As you can see the code above was very self explanatory and straight forward. Hope you will find this example useful!

Technorati Tags: ADO.NET,ASP.NET,C#,GridView

How To: Prevent SQL Injection in ASP.NET

Vincent Maverick Durano — Wed, 26 Aug 2009 11:16:05 GMT

Mike Brind has written a very good example about "Preventing SQL Injection in ASP.NET". If you are new to Data Access manipulations in ASP.NET then I would strongly suggest you to read the article mentioned above.

Technorati Tags: ADO.NET,ASP.NET,General

Bind DataTable to DataList Control

Vincent Maverick Durano — Thu, 13 Aug 2009 14:41:28 GMT

This example shows how to bind a DataTable in a DataList control. Just for the simplicity of this demo I’m going to create a dummy data in the DataTable. See the code blocks below:

private DataTable GetData()

{

DataTable dt = new DataTable();

DataRow dr;

dt.Columns.Add(new System.Data.DataColumn("Column1", typeof(String)));

dt.Columns.Add(new System.Data.DataColumn("Column2", typeof(String)));

dt.Columns.Add(new System.Data.DataColumn("Column3", typeof(String)));

dr = dt.NewRow();

dr[0] = "Column1 Item A";

dr[1] = "Column2 Item B";

dr[2] = "Column3 Item C";

dt.Rows.Add(dr);

dr = dt.NewRow();

dr[0] = "Column1 Item AA";

dr[1] = "Column2 Item BB";

dr[2] = "Column3 Item CC";

dt.Rows.Add(dr);

dr = dt.NewRow();

dr[0] = "Column1 Item AAA";

dr[1] = "Column2 Item BBB";

dr[2] = "Column3 Item CCC";

dt.Rows.Add(dr);

dr = dt.NewRow();

dr[0] = "Column1 Item AAAA";

dr[1] = "Column2 Item BBBB";

dr[2] = "Column3 Item CCCC";

dt.Rows.Add(dr);

return dt;

}

Now let’s set up the DataList in the ASPX source like below.

<asp:DataList ID="DataList1" runat="server">

<table>

<tr>

<th style="width:150px" align="left">HEADER 1</th>

<th style="width:150px" align="left">HEADER 2</th>

<th style="width:150px" align="left">HEADER 3</th>

</tr>

</table>

</HeaderTemplate>

<table>

<tr>

<td style="width:150px" align="left"> <asp:Label ID="LabelTest1" Text='<%# DataBinder.Eval(Container.DataItem, "Column1") %>' runat="server" /></td>

<td style="width:150px" align="left"> <asp:Label ID="LabelTest2" Text='<%# DataBinder.Eval(Container.DataItem, "Column2") %>' runat="server" /></td>

<td style="width:150px" align="left"> <asp:Label ID="LabelTest3" Text='<%# DataBinder.Eval(Container.DataItem, "Column3") %>' runat="server" /></td>

</tr>

</table>

</ItemTemplate>

</asp:DataList>

As you can see, the set up above was very simple. Now let’s go switch back to the code behind part of the page and bind the DataList with the data from the DataTable. Here’s the code block below:

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

DataTable dt = GetData();

DataList1.DataSource = dt;

DataList1.DataBind();

}

That’s Simple!

Technorati Tags: ADO.NET,ASP.NET,C#

Removing Columns in DataTable

Vincent Maverick Durano — Tue, 11 Aug 2009 12:32:23 GMT

Recently, one of the members in the forum (http://forums.asp.net) is asking if how to remove a particular column in a DataTable if all values in the row of that column are null or empty. So I decided to post the solution that I have provided in that thread as a reference to others who encounter the same problem.

Just for the simplicity of this demo, I created a sample DataTable with a dummy data on it just for us to test. Here’s the code block below:

private DataTable CreateDataTable()

{

DataTable dt = new DataTable();

DataRow dr = null;

//Create the Columns Definition

dt.Columns.Add(new DataColumn("Column1", typeof(string)));

dt.Columns.Add(new DataColumn("Column2", typeof(string)));

dt.Columns.Add(new DataColumn("Column3", typeof(string)));

//Add the first Row to each columns defined

dr = dt.NewRow();

//Add dummy values to each rows

dr["Column1"] = "A";

dr["Column2"] = string.Empty; // but it will be converted to empty

dr["Column3"] = "C";

dt.Rows.Add(dr);

//Add the second Row to each columns defined

dr = dt.NewRow();

dr["Column1"] = null;

dr["Column2"] = null;// but it will be converted to empty

dr["Column3"] = "F";

dt.Rows.Add(dr);

//You can continue adding rows here

return dt;

}

As you can see, we set an empty and null value to the rows of Column2. Now let’s go ahead and create the method for checking the row values of a particular column in a DataTable. Here’s the code block below:

private DataTable CheckDataTableColumn()

{

DataTable dt = CreateDataTable();

bool flag = false;

int counter = 0;

EXIT:

for (int i = counter; i < dt.Columns.Count; i++)

{

for (int x = 0; x < dt.Rows.Count; x++)

{

if (string.IsNullOrEmpty(dt.Rows[x][i].ToString()))

{

flag = true; //means there is an empty value

}

else

{

//means if it found non null or empty in rows of a particular column

flag = false;

counter = i + 1;

goto EXIT;

}

if (flag == true)

{

dt.Columns.Remove(dt.Columns[i]);

i--;

}

return dt;

}

As you can see, we simply loop through the columns and rows in the DataTable to check if there is a null or empty value in a particular row in a particular column in DataTable. If a certain row has non null values then it exits the looping of the rows using the goto function, else it continue looping through the rows to check if all the row values are nulls or empty. If all row values are null or empty then that particular column which contains those rows will be deleted using the Remove method of the DataTable Columns.

Wheew… Ok now let’s try to test it. To test it then lets check if what columns are being deleted by looping through the columns in the DataTable. See the code block below:

protected void Page_Load(object sender, EventArgs e)

{

//print the Columns in the DataTable to see if what column(s) are deleted

DataTable dtNew = CheckDataTableColumn();

if (dtNew.Rows.Count > 0)

{

foreach (DataColumn dc in dtNew.Columns)

{

Response.Write(dc.ColumnName + "<BR/>");

}

else

{

Response.Write("No data returned from the DataTable");

}

Running the code above will display the following column names in the page:

Column1

Column3

Oh where is Column2? Obviously it was deleted.. It’s because all row values in column 2 are null or empty.

That’s it! Hope you will find this example useful.

Technorati Tags: ADO.NET,ASP.NET,C#,Tipstricks

Why DataSet creates TableN as the Default Table name?

Vincent Maverick Durano — Mon, 03 Aug 2009 09:15:02 GMT

Few days ago I have encountered a question in asp.net forums asking if why does the DataSet creates a default name as Table1 well in fact the name doesn’t really exist in the database. So I thought I’d share the answer that I have provided in that thread as a reference to others.

As the documentation states that:

"Multiple Result Sets: If the DataAdapter encounters multiple result sets, it will create multiple tables in the DataSet. The tables will be given an incremental default name of TableN, starting with "Table" for Table0. If a table name is passed as an argument to the Fill method, the tables will be given an incremental default name of TableNameN, starting with "TableName" for TableName0."

To make it more clear then consider this example:

Suppose that you have a Sql Command that returns two tables namely, Employee and Customer.

If you are going to fill your DataSet like below

DataSet ds = new DataSet();

SqlConnection connection = new SqlConnection(GetConnectionString());

connection.Open();

string sqlStatement = "SELECT * FROM Employee; SELECT * FROM Customer";

SqlCommand sqlCmd = new SqlCommand(sqlStatement, connection);

SqlDataAdapter sqlDa = new SqlDataAdapter(sqlCmd);

sqlDa.Fill(ds,"Employee");

string t1 = ds.Tables[0].TableName.ToString();// returns Employee

string t2 = ds.Tables[1].TableName.ToString();// returns Employee1

connection.Close();

The result would be two tables are being created in the DataSet: Employee and Employee1. To avoid this, you can use table mappings to ensure that the second table is named Customer instead of Employee1. To do this, map the source table of Employee1 to the DataSet table Customer as shown in the following example below:

DataSet ds = new DataSet();

SqlConnection connection = new SqlConnection(GetConnectionString());

connection.Open();

string sqlStatement = "SELECT * FROM Employee; SELECT * FROM Customer";

SqlCommand sqlCmd = new SqlCommand(sqlStatement, connection);

SqlDataAdapter sqlDa = new SqlDataAdapter(sqlCmd);

sqlDa.TableMappings.Add("Employee1", "Customer");

sqlDa.Fill(ds,"Employee");

string t1 = ds.Tables[0].TableName.ToString();// returns Employee

string t2 = ds.Tables[1].TableName.ToString();// returns Customer

connection.Close();

That’s it! Hope you will find this example useful!

Technorati Tags: ADO.NET,ASP.NET,C#