GridView

Tip Of The Day - Remove GridView Row Highlighting on Edit Mode

Vincent Maverick Durano — Tue, 26 Apr 2011 06:17:20 GMT

Typically we will attach the mouseover and mouseout client-side events on the gridview rows to highlight rows on mouseover, but there are cases that we don't want to make the row highlighted when we are on edit mode. To do this we can check the GridView EditIndex to determine if the row is on edit mode and then do the validation there. Here's a sample code block below of what I am talking about:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {
            if (e.Row.RowType == DataControlRowType.DataRow) {
                string onmouseoverStyle = "this.style.backgroundColor='blue';this.style.color ='white';";
                string onmouseoutStyle = "this.style.backgroundColor='white';this.style.color ='black';";

                if (GridView1.EditIndex != -1) {
                    e.Row.Attributes.Remove("onmouseover");
                }
                else {
                    e.Row.Attributes.Add("onmouseover", onmouseoverStyle);
                    e.Row.Attributes.Add("onmouseout", onmouseoutStyle);
                }
            }
}

As you can see the code above is very straight forward. What it does is it checks if the gridview is on edit mode and when it's on edit mode we removed the onmouseover attribute and when it's not we attach the onmouseover attribute again and apply the desired styles. That's simple!

I hope someone find this post useful!

Technorati Tags: ASP.NET,GridView,TipsTricks

Using Radio Button in GridView with Validation

Vincent Maverick Durano — Thu, 03 Mar 2011 09:20:55 GMT

A developer is asking how to select one radio button at a time if the radio button is inside the GridView. As you may know setting the group name attribute of radio button will not work if the radio button is located within a Data Representation control like GridView. This because the radio button inside the gridview bahaves differentely. Since a gridview is rendered as table element , at run time it will assign different "name" to each radio button. Hence you are able to select multiple rows.

In this post I'm going to demonstrate how select one radio button at a time in gridview and add a simple validation on it. To get started let's go ahead and fire up visual studio and the create a new web application / website project. Add a WebForm and then add gridview. The mark up would look something like this:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" >
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                   <asp:RadioButton ID="rb" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
            <asp:BoundField DataField="Col1" HeaderText="First Column" />
            <asp:BoundField DataField="Col2" HeaderText="Second Column" />
        </Columns>
</asp:GridView>

Noticed that I've added a templatefield column so that we can add the radio button there. Also I have set up some BoundField columns and set the DataFields as RowNumber, Col1 and Col2. These columns are just dummy columns and i used it for the simplicity of this example. Now where these columns came from? These columns are created by hand at the code behind file of the ASPX. Here's the code below:

private DataTable FillData() {

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

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

            //Create Row for each columns
            dr = dt.NewRow();
            dr["RowNumber"] = 1;
            dr["Col1"] = "A";
            dr["Col2"] = "B";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["RowNumber"] = 2;
            dr["Col1"] = "AA";
            dr["Col2"] = "BB";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["RowNumber"] = 3;
            dr["Col1"] = "A";
            dr["Col2"] = "B";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["RowNumber"] = 4;
            dr["Col1"] = "A";
            dr["Col2"] = "B";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["RowNumber"] = 5;
            dr["Col1"] = "A";
            dr["Col2"] = "B";
            dt.Rows.Add(dr);

            return dt;
}

And here's the code for binding the GridView with the dummy data above.

protected void Page_Load(object sender, EventArgs e) {
            if (!IsPostBack) {
                GridView1.DataSource = FillData();
                GridView1.DataBind();
            }
}

Okay we have now a GridView data with a radio button on each row. Now lets go ahead and switch back to ASPX mark up. In this example I'm going to use a JavaScript for validating the radio button to select one radio button at a time. Here's the javascript code below:

function CheckOtherIsCheckedByGVID(rb) {
        var isChecked = rb.checked;
        var row = rb.parentNode.parentNode;
        if (isChecked) {
            row.style.backgroundColor = '#B6C4DE';
            row.style.color = 'black';
        }
        var currentRdbID = rb.id;
        parent = document.getElementById("<%= GridView1.ClientID %>");
        var items = parent.getElementsByTagName('input');

        for (i = 0; i < items.length; i++) {
            if (items[i].id != currentRdbID && items[i].type == "radio") {
                if (items[i].checked) {
                    items[i].checked = false;
                    items[i].parentNode.parentNode.style.backgroundColor = 'white';
                    items[i].parentNode.parentNode.style.color = '#696969';
                }
            }
        }
}

The function above sets the row of the current selected radio button's style to determine that the row is selected and then loops through the radio buttons in the gridview and then de-select the previous selected radio button and set the row style back to its default. You can then call the javascript function above at onlick event of radio button like below:

<asp:RadioButton ID="rb" runat="server" onclick="javascript:CheckOtherIsCheckedByGVID(this);" />

Here's the output below:

On Load:

After Selecting a Radio Button:

As you have noticed, on initial load there's no default selected radio in the GridView. Now let's add a simple validation for that. We will basically display an error message if a user clicks a button that triggers a postback without selecting a radio button in the GridView. Here's the javascript for the validation:

function ValidateRadioButton(sender, args) {
        var gv = document.getElementById("<%= GridView1.ClientID %>");
        var items = gv.getElementsByTagName('input');
        for (var i = 0; i < items.length ; i++) {
            if (items[i].type == "radio") {
                if (items[i].checked) {
                    args.IsValid = true;
                    return;
                }
                else {
                    args.IsValid = false;
                }
            }
        }
}

The function above loops through the rows in gridview and find all the radio buttons within it. It will then check each radio button checked property. If a radio is checked then set IsValid to true else set it to false. The reason why I'm using IsValid is because I'm using the ASP validator control for validation. Now add the following mark up below under the GridView declaration:

    <br />
    <asp:Label ID="lblMessage" runat="server" />
    <br />
    <asp:Button ID="btn" runat="server" Text="POST" onclick="btn_Click" ValidationGroup="GroupA" />
    <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Please select row in the grid." ClientValidationFunction="ValidateRadioButton" ValidationGroup="GroupA" style="display:none"></asp:CustomValidator>
    <asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="GroupA" HeaderText="Error List:" DisplayMode="BulletList" ForeColor="Red" />

And then at Button Click event add this simple code below just to test if the validation works:

protected void btn_Click(object sender, EventArgs e) {
            lblMessage.Text = "Postback at: " + DateTime.Now.ToString("hh:mm:ss tt");
}

Here's the output below that you can see in the browser:

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

Technorati Tags: ASP.NET,JavaScript,GridView

Highlight Row in GridView with Colored Columns

Vincent Maverick Durano — Thu, 13 Jan 2011 10:23:47 GMT

I wrote a blog post a while back before here that demonstrate how to highlight a GridView row on mouseover and as you can see its very easy to highlight rows in GridView. One of my colleague uses the same technique for implemeting gridview row highlighting but the problem is that if a Column has background color on it that cell will not be highlighted anymore. To make it more clear then let's build up a sample application.

ASPX:

   1:      <asp:GridView runat="server" id="GridView1" onrowcreated="GridView1_RowCreated"

   2:          onrowdatabound="GridView1_RowDataBound">

   3:      </asp:GridView>

CODE BEHIND:

   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:

  12:              //Create Row for each columns

  13:              dr = dt.NewRow();

  14:              dr["RowNumber"] = 1;

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

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

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

  18:              dt.Rows.Add(dr);

19:

  20:              dr = dt.NewRow();

  21:              dr["RowNumber"] = 2;

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

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

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

  25:              dt.Rows.Add(dr);

26:

  27:              dr = dt.NewRow();

  28:              dr["RowNumber"] = 3;

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

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

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

  32:              dt.Rows.Add(dr);

33:

  34:              dr = dt.NewRow();

  35:              dr["RowNumber"] = 4;

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

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

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

  39:              dt.Rows.Add(dr);

40:

  41:              dr = dt.NewRow();

  42:              dr["RowNumber"] = 5;

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

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

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

  46:              dt.Rows.Add(dr);

47:

  48:              return dt;

  49:  }

50:

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

  52:              if (!IsPostBack) {

  53:                  GridView1.DataSource = FillData();

  54:                  GridView1.DataBind();

  55:              }

  56:  }

As you can see there's nothing fancy in the code above. It just contain a method that fills a DataTable with a dummy data on it. Now here's the code for row highlighting:

   1:  protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) {

   2:              //Set Background Color for Columns 1 and 3

   3:              e.Row.Cells[1].BackColor = System.Drawing.Color.Beige;

   4:              e.Row.Cells[3].BackColor = System.Drawing.Color.Red;

5:

   6:              //Attach onmouseover and onmouseout for row highlighting

   7:              e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='Blue'");

   8:              e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=''");

   9:  }

Running the code above will show something like this in the browser:

On initial load:

On mouseover of GridView row:

Noticed that Col1 and Col3 are not highlighted. Why? the reason is that Col1 and Col3 cells has background color set on it and we only highlight the rows (TR) and not the columns (TD) that's why on mouseover only the rows will be highlighted. To fix the issue we will create a javascript method that would remove the background color of the columns when highlighting a row and on mouseout set back the original color that is set on Col1 and Col3. Here are the codes below:

JavaScript

   1:  <script type="text/javascript">

   2:      function HighLightRow(rowIndex, colIndex,colIndex2, flag) {

   3:          var gv = document.getElementById("<%= GridView1.ClientID %>");

   4:          var selRow = gv.rows[rowIndex];

   5:          if (rowIndex > 0) {

   6:              if (flag == "sel") {

   7:                  gv.rows[rowIndex].style.backgroundColor = 'Blue';

   8:                  gv.rows[rowIndex].style.color = "White";

   9:                  gv.rows[rowIndex].cells[colIndex].style.backgroundColor = '';

  10:                  gv.rows[rowIndex].cells[colIndex2].style.backgroundColor = '';

  11:              }

  12:              else {

  13:                  gv.rows[rowIndex].style.backgroundColor = '';

  14:                  gv.rows[rowIndex].style.color = "Black";

  15:                  gv.rows[rowIndex].cells[colIndex].style.backgroundColor = 'Beige';

  16:                  gv.rows[rowIndex].cells[colIndex2].style.backgroundColor = 'Red';

  17:              }

  18:          }

  19:     }

  20:  </script>

The HighLightRow method is a javascript function that accepts four (4) parameters which are the rowIndex,colIndex,colIndex2 and the flag. The rowIndex is the current row index of the selected row in GridView. The colIndex is the index of Col1 and colIndex2 is the index of col3. We are passing these index because these columns has background color on it and we need to toggle its backgroundcolor when highlighting the row in GridView. Finally the flag is something that would determine if its selected or not. Now here's the code for calling the JavaScript function above.

   1:   protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) {

2:

   3:              //Set Background Color for Columns 1 and 3

   4:              e.Row.Cells[1].BackColor = System.Drawing.Color.Beige;

   5:              e.Row.Cells[3].BackColor = System.Drawing.Color.Red;

6:

   7:              //Attach onmouseover and onmouseout for row highlighting

   8:              //and call the HighLightRow method with the required parameters

   9:              int index = e.Row.RowIndex + 1;

  10:              e.Row.Attributes.Add("onmouseover", "HighLightRow(" + index + "," + 1 + "," + 3 + ",'sel')");

  11:              e.Row.Attributes.Add("onmouseout", "HighLightRow(" + index + "," + 1 + "," + 3 + ",'dsel')");

12:

  13:  }

Running the code above will display something like this:

On initial load:

On mouseover of GridView row:

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

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

FAQ: GridView Calculation with JavaScript - Editable Price Field

Vincent Maverick Durano — Thu, 09 Dec 2010 15:43:16 GMT

Recently I wrote a series of blog posts that demonstrates how to do calculation in GridView using JavaScripts. You can check the series of posts below:

Recently a user in the forums is asking how to calculate the total quantity, sub-totals and total amout in GridView when a user enters the price and quantity in the TextBox field. Obviously the series of post that I wrote will not work in this case because the price field in those examples are Label (read-only) and not TextBox fields. In this post I'm going to demonstrate how to accomplish this using the same method used in my previous examples. Basically I'm just going to modify the GridView declaration and replace the Label price field with a TextBox so that users can type on it. And finally modify the CalculateTotals() javascript function.

Here are the code blocks below:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
     <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;
            var price = 0;
            var qty = 0;
            var totalQty = 0;
            var tbCount = tb.length / 2;
           
            for (var i = 0; i < tbCount; i++) {
               
                if (tb[i].type == "text") {
                    ValidateNumber(tb[i + indexQ]);

                    sub = parseFloat(tb[i + indexP].value) * parseFloat(tb[i + indexQ].value);
              
                    if (isNaN(sub)) {
                        lb[i].innerHTML = "0.00";
                        sub = 0;
                    }
                    else {
                        lb[i].innerHTML = FormatToMoney(sub, "$", ",", "."); ;
                    }
                   
                    if (isNaN(tb[i + indexQ].value) || tb[i + indexQ].value == "") {
                        qty = 0;
                    }
                    else {
                        qty = tb[i + indexQ].value;
                    }
 
                    totalQty += parseInt(qty);
                    total += parseFloat(sub);

                    indexQ++;
                    indexP++;
                }
            }

            lb[lb.length - 2].innerHTML = totalQty;
            lb[lb.length -1].innerHTML = FormatToMoney(total, "$", ",", ".");
        }

        function ValidateNumber(o) {
            if (o.value.length > 0) {
                o.value = o.value.replace(/[^\d]+/g, ''); //Allow only whole numbers
            }
        }
        function isThousands(position) {
            if (Math.floor(position / 3) * 3 == position) return true;
            return false;
        };

        function FormatToMoney(theNumber, theCurrency, theThousands, theDecimal) {
            var theDecimalDigits = Math.round((theNumber * 100) - (Math.floor(theNumber) * 100));
            theDecimalDigits = "" + (theDecimalDigits + "0").substring(0, 2);
            theNumber = "" + Math.floor(theNumber);
            var theOutput = theCurrency;
            for (x = 0; x < theNumber.length; x++) {
                theOutput += theNumber.substring(x, x + 1);
                if (isThousands(theNumber.length - x - 1) && (theNumber.length - x - 1 != 0)) {
                    theOutput += theThousands;
                };
            };
            theOutput += theDecimal + theDecimalDigits;
            return theOutput;
        } 
    </script>
</head>
<body>
    <form id="form1" runat="server">
     <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:TextBox ID="TXTPrice" runat="server"

                             onkeyup="CalculateTotals();"></asp:TextBox>
            </ItemTemplate>
            <FooterTemplate>
                <b>Total Qty:</b>
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="TXTQty" runat="server"

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

                           Font-Bold="true" ForeColor="Blue" Text="0" />

                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <b>Total Amount:</b>
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Sub-Total">
            <ItemTemplate>
                <asp:Label ID="LBLSubTotal" runat="server"

                           ForeColor="Green" Text="0.00"></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="LBLTotal" runat="server"

                           ForeColor="Green" Font-Bold="true" Text="0.00"/>
            </FooterTemplate>
        </asp:TemplateField>
        </Columns>
    </asp:gridview>
    </form>
</body>
</html>

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

Technorati Tags: ASP.NET,GridView,JavaScript

FAQ: GridView Calculation with JavaScript - Displaying Quantity Total

Vincent Maverick Durano — Thu, 09 Dec 2010 09:54:10 GMT

Previously we've talked about how calculate the sub-totals and grand total in GridView here, how to format the numbers into a currency format and how to validate the quantity to just accept whole numbers using JavaScript here. One of the users in the forum (http://forums.asp.net) is asking if how to modify the script to display the quantity total in the footer. In this post I'm going to show you how to it. Basically we just need to modify the javascript CalculateTotals function and add the codes there for calculating the quantity total and display it in the footer.

Here are the code blocks below:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <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;
            var price = 0;
            var qty = 0;
            var totalQty = 0;

            for (var i = 0; i < tb.length; i++) {
                if (tb[i].type == "text") {
                    ValidateNumber(tb[i]);

                    price = lb[indexP].innerHTML.replace("$", "").replace(",", "");
                    sub = parseFloat(price) * parseFloat(tb[i].value);
                    if (isNaN(sub)) {
                        lb[i + indexQ].innerHTML = "0.00";
                        sub = 0;
                    }
                    else {
                        lb[i + indexQ].innerHTML = FormatToMoney(sub, "$", ",", "."); ;
                    }
                   
                    indexQ++;
                    indexP = indexP + 2;

                    if (isNaN(tb[i].value) || tb[i].value == "") {
                        qty = 0;
                    }
                    else {
                        qty = tb[i].value;
                    }
 
                    totalQty += parseInt(qty);
                    total += parseFloat(sub);
                }
            }

            lb[lb.length - 2].innerHTML = totalQty;
            lb[lb.length - 1].innerHTML = FormatToMoney(total, "$", ",", ".");
        }

        function ValidateNumber(o) {
            if (o.value.length > 0) {
                o.value = o.value.replace(/[^\d]+/g, ''); //Allow only whole numbers
            }
        }
        function isThousands(position) {
            if (Math.floor(position / 3) * 3 == position) return true;
            return false;
        };

        function FormatToMoney(theNumber, theCurrency, theThousands, theDecimal) {
            var theDecimalDigits = Math.round((theNumber * 100) - (Math.floor(theNumber) * 100));
            theDecimalDigits = "" + (theDecimalDigits + "0").substring(0, 2);
            theNumber = "" + Math.floor(theNumber);
            var theOutput = theCurrency;
            for (x = 0; x < theNumber.length; x++) {
                theOutput += theNumber.substring(x, x + 1);
                if (isThousands(theNumber.length - x - 1) && (theNumber.length - x - 1 != 0)) {
                    theOutput += theThousands;
                };
            };
            theOutput += theDecimal + theDecimalDigits;
            return theOutput;
        } 
    </script>
</head>
<body>
    <form id="form1" runat="server">
     <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","{0:C}") %>'></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <b>Total Qty:</b>
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="TXTQty" runat="server" onkeyup="CalculateTotals();"></asp:TextBox>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="LBLQtyTotal" runat="server" Font-Bold="true" ForeColor="Blue" Text="0" ></asp:Label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <b>Total Amount:</b>
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Sub-Total">
            <ItemTemplate>
                <asp:Label ID="LBLSubTotal" runat="server" ForeColor="Green" Text="0.00"></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="LBLTotal" runat="server" ForeColor="Green" Font-Bold="true" Text="0.00"></asp:Label>
            </FooterTemplate>
        </asp:TemplateField>
        </Columns>
    </asp:gridview>
    </form>
</body>
</html>

Here's the output below when you run it on the page:

I hope someone find this post useful!

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

FAQ: GridView Calculation with JavaScript - Formatting and Validation

Vincent Maverick Durano — Thu, 09 Dec 2010 09:17:12 GMT

In my previous post here we've talked about how to calculate the sub-totals and grand total in GridView using JavaScript. In this post I'm going take more step further and will demonstrate how are we going to format the totals into a currency and how to validate the input that would only allow you to enter a whole number in the quantity TextBox.

Here are the code blocks below:

ASPX Source:

<!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></title>
    <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;
            var price = 0;

            for (var i = 0; i < tb.length; i++) {
                if (tb[i].type == "text") {
                    ValidateNumber(tb[i]);

                    price = lb[indexP].innerHTML.replace("$", "").replace(",", "");
                    sub = parseFloat(price) * parseFloat(tb[i].value);
                    if (isNaN(sub)) {
                        lb[i + indexQ].innerHTML = "0.00";
                        sub = 0;
                    }
                    else {
                        lb[i + indexQ].innerHTML = FormatToMoney(sub, "$", ",", "."); ;
                    }
                   
                    indexQ++;
                    indexP = indexP + 2;

                    total += parseFloat(sub);
                }
            }

            lb[lb.length - 1].innerHTML = FormatToMoney(total, "$", ",", ".");
        }

        function ValidateNumber(o) {
            if (o.value.length > 0) {
                o.value = o.value.replace(/[^\d]+/g, ''); //Allow only whole numbers
            }
        }
        function isThousands(position) {
            if (Math.floor(position / 3) * 3 == position) return true;
            return false;
        };

        function FormatToMoney(theNumber, theCurrency, theThousands, theDecimal) {
            var theDecimalDigits = Math.round((theNumber * 100) - (Math.floor(theNumber) * 100));
            theDecimalDigits = "" + (theDecimalDigits + "0").substring(0, 2);
            theNumber = "" + Math.floor(theNumber);
            var theOutput = theCurrency;
            for (x = 0; x < theNumber.length; x++) {
                theOutput += theNumber.substring(x, x + 1);
                if (isThousands(theNumber.length - x - 1) && (theNumber.length - x - 1 != 0)) {
                    theOutput += theThousands;
                };
            };
            theOutput += theDecimal + theDecimalDigits;
            return theOutput;
        } 
    </script>
</head>
<body>
    <form id="form1" runat="server">
     <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","{0:C}") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="TXTQty" runat="server" onkeyup="CalculateTotals();"></asp:TextBox>
            </ItemTemplate>
            <FooterTemplate>
                <b>Total Amount:</b>
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Sub-Total">
            <ItemTemplate>
                <asp:Label ID="LBLSubTotal" runat="server" ForeColor="Green" Text="0.00"></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="LBLTotal" runat="server" ForeColor="Green" Font-Bold="true" Text="0.00"></asp:Label>
            </FooterTemplate>
        </asp:TemplateField>
        </Columns>
    </asp:gridview>
    </form>
</body>
</html>

Code Behind Source:

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(decimal)));

            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();
            }
        }
 }

Running the code above will display something like this:

On initial load

After entering the quantity in the TextBox

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

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

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

Tip/Trick: Fixing GridLines Border Color in IE8

Vincent Maverick Durano — Thu, 07 Oct 2010 12:38:29 GMT

There are times that we need to set the border color of the GridView just like in my case, I was told to set the border color of GridView to a particular color instead of the default black. What I did is simply use the BorderColor property of the GridView and set it declaratively like below:

<asp:GridView ID="GridView1" runat="server" GridLines="Both" BorderColor="Red"><asp:/GridView>

Here's how it looks when we run that one in the browser.

Firefox 3.5

Safari 5

IE 8

Noticed that in IE8 it looks stranged.This is because in IE8 the declarative BorderColor attribute only adds an inline style declaration which only applies to the table itself and not on individual cells.

The Workaround

Option 1: Using CSS

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style type="text/css">
       table.grid{
           border-collapse:collapse;
           border:solid 1px Red;
        }
        table.grid td, th{
           border:solid 1px Red;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="GridView1" runat="server" GridLines="Both" CssClass="grid">
    </asp:GridView>
    </form>
</body>
</html>

Option 2: Adding BorderColor Attribute at the Code-Behind

protected void Page_Load(object sender, EventArgs e){

GridView1.Attributes.Add("bordercolor","Red");

}

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

Technorati Tags: ASP.NET,TipsTricks,GridView

Adding Dynamic Rows in GridView with TextBox and DropDownList - Validation

Vincent Maverick Durano — Thu, 05 Aug 2010 08:10:35 GMT

In my previous post here I have demonstrated how to add dynamic rows in Gridview with a combination of TextBox and DropDownList. Just in case you need to validate empty TextBox values before adding a new row to the GridView then here's a JavaScript function that you can use for validation:

function ValidateEmptyValue() { 
    var gv = document.getElementById("<%= Gridview1.ClientID %>"); 
    var tb = gv.getElementsByTagName("input"); 
            
    for (var i = 0; i < tb.length; i++) { 
        if (tb[i].type == "text") { 
            if (tb[i].value < 1) { 
                alert("Field cannot be blank!"); 
                return false; 
            } 
        } 
    } 
    return true; 
}

Then at OnClientClick event of the Add New Button, you can simply call the JavaScript function above like below:

<asp:Button ID="ButtonAdd" runat="server" Text="Add New Row"
                           onclick="ButtonAdd_Click" 
                           OnClientClick="return ValidateEmptyValue();" />

That's it! I hope you'll find this post useful!

Technorati Tags: ASP.NET,GridView,JavaScript,Dynamic Controls