JavaScript

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

A Simple Collapsible Menu with jQuery

Vincent Maverick Durano — Fri, 04 Feb 2011 09:02:34 GMT

In this post I'll demonstrate how to make a simple collapsible menu using jQuery. To get started let's go ahead and fire up Visual Studio and create a new WebForm. Now let's build our menu by adding some div, p and anchor tags. Since I'm using a masterpage then the ASPX mark-up should look something like this:

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

   2:          <div id="Menu">

   3:              <p>CARS</p>

   4:              <div class="section">

   5:                  <a href="#">Car 1</a>

   6:                  <a href="#">Car 2</a>

   7:                  <a href="#">Car 3</a>

   8:                  <a href="#">Car 4</a>

   9:              </div>

  10:              <p>BIKES</p>

  11:              <div class="section">

  12:                  <a href="#">Bike 1</a>

  13:                  <a href="#">Bike 2</a>

  14:                  <a href="#">Bike 3</a>

  15:                  <a href="#">Bike 4</a>

  16:                  <a href="#">Bike 5</a>

  17:                  <a href="#">Bike 6</a>

  18:                  <a href="#">Bike 7</a>

  19:                  <a href="#">Bike 8</a>

  20:              </div>

  21:              <p>COMPUTERS</p>

  22:              <div class="section">

  23:                  <a href="#">Computer 1</a>

  24:                  <a href="#">Computer 2</a>

  25:                  <a href="#">Computer 3</a>

  26:                  <a href="#">Computer 4</a>

  27:              </div>

  28:              <p>OTHERS</p>

  29:              <div class="section">

  30:                  <a href="#">Other 1</a>

  31:                  <a href="#">Other 2</a>

  32:                  <a href="#">Other 3</a>

  33:                  <a href="#">Other 4</a>

  34:              </div>

  35:          </div>

  36:  </asp:Content>

As you can see there's nothing fancy about the mark up above.. Now lets go ahead create a simple CSS to set the look and feel our our Menu. Just for for the simplicity of this demo, add the following CSS below under the <head> section of the page or if you are using master page then add it a the content head. Here's the CSS below:

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

   2:  <style type="text/css">

   3:      #Menu{

   4:          width:300px;

   5:      }

   6:      #Menu > p{

   7:          background-color:#104D9E;

   8:          color:#F5F7FA;

   9:          margin:0;

  10:          padding:0;

  11:          border-bottom-style: solid;

  12:          border-bottom-width: medium;

  13:          border-bottom-color:#000000;

  14:          cursor:pointer;

  15:      }

  16:      #Menu .section{

  17:          padding-left:5px;

  18:          background-color:#C0D9FA;

  19:      }

  20:      a{

  21:          display:block;

  22:          color:#0A0A07;

  23:      }

  24:  </style>

  25:  </asp:Content>

Now let's add the collapsible effects on our menu using jQuery. To start using jQuery then register the following script at the very top of the <head> section of the page or if you are using master page then add it the very top of the content head section.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>

As you can see I'm using Google AJAX API CDN to host the jQuery file. You can also download the jQuery here and host it in your server if you'd like. Okay here's the the jQuery script below for adding the collapsible effects:

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

   2:      $(function () {

   3:          $("a").mouseover(function () { $(this).addClass("highlightRow"); })

   4:                .mouseout(function () { $(this).removeClass("highlightRow"); });

5:

   6:          $(".section").hide();

   7:          $("#Menu > p").click(function () {

   8:              $(this).next().slideToggle("Slow");

   9:          });

  10:      });

  11:  </script>

Okay to give you a little bit of explaination, at line 3.. what it does is it looks for all the "<a>" anchor elements on the page and attach the mouseover and mouseout event. On mouseover, the highlightRow css class is added to <a> element and on mouse out we remove the css class to revert the style to its default look. at line 6 we will hide all the elements that has a class name set as "section" and if you look at the mark up above it is refering to the <div> elements right after each <p> element. At line 7.. what it does is it looks for a <p> element that is a direct child of the element that has an ID of "Menu" and then attach the click event to toggle the visibilty of the section.

Here's how it looks in the page:

On Initial Load:

After Clicking the Section Header:

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

Technorati Tags: ASP.NET,JQuery,Master Page,JavaScript

Validate if aTextBox Value Start with a Specific Letter

Vincent Maverick Durano — Tue, 01 Feb 2011 16:32:15 GMT

In case you will be working on a page that needs to validate the first character of the TextBox entered by a user then here are two options that you can use:

Option 1: Using an array

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

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

   3:      function CheckFirstChar(o) {

   4:          var arr = ['A', 'B', 'C', 'D'];

   5:          if (o.value.length > 0) {

   6:              for (var i = 0; i < arr.length; i++) {

   7:                  if (o.value.charAt(0) == arr[i]) {

   8:                      alert('Valid');

   9:                      return true;

  10:                  }

  11:                  else {

  12:                      alert('InValid');

  13:                      return false;

  14:                  }

  15:              }

  16:          }

  17:      }

  18:  </script>

  19:  </asp:Content>

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

  21:  <asp:TextBox ID="TextBox1" runat="server" onblur="return CheckFirstChar(this);"></asp:TextBox>

  22:  </asp:Content>

The example above uses an array of string for storing the list of characters that a TextBox value should start with. We then iterate to the array and compare the first character of TextBox value to see if it matches any characters from the array.

Option 2: Using Regular Expression (Preferred way)

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

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

   3:      function CheckFirstChar(o) {

   4:          pattern = /^(A|B|C|D)/;

   5:          if (!pattern.test(o.value)) {

   6:              alert('InValid');

   7:              return false;

   8:          } else {

   9:              alert('Valid');

  10:              return true;

  11:          }

  12:      }

  13:  </script>

  14:  </asp:Content>

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

  16:  <asp:TextBox ID="TextBox1" runat="server" onblur="return CheckFirstChar(this);"></asp:TextBox>

  17:  </asp:Content>

The example above uses regular expression with the pattern /^(A|B|C|D)/. This will check if the TextBox value starts with A,B,C or D. Please note that it's case sensitive. If you want to allow lower case then you can alter the patter to this /^(A|B|C|D)/i. The i in the last part will cause a case-insensitive search.

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

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!

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

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

Display animated gif before Iframe content is loaded

Vincent Maverick Durano — Tue, 13 Jul 2010 12:31:22 GMT

If you are working with iframe in which the content takes time to load, you may want to display a simple loading indicator to the end users instead of letting the users see a blank screen in the page. To do this, here's one way on how to implemet it using javascript.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script type="text/javascript">
       function hideLoading() {
            document.getElementById('divLoading').style.display = "none";
            document.getElementById('divFrameHolder').style.display = "block";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divLoading">
        <img src="images/ajax-loader.gif" alt="" />
    </div>
    <div id="divFrameHolder" style="display:none">
        <iframe src="http://asp.net" onload="hideLoading()" frameborder="0">

        </iframe>
    </div>
    </form>
</body>
</html>

What happened in the code above is we hide the container of Iframe (divFrameHolder) by setting the style to *display:none*. This is to ensure that the Iframe will not be seen if its content is not yet loaded on load of the page and instead show the animated gif (loading indicator). We then call the javascript method *hideLoading()* at onload event of Iframe to hide the animated gif when the content of the iframe is loaded.

I hope someone find this post useful!

Technorati Tags: JavaScript,ASP.NET,TipsTricks