Ashraf's Blog

Light and Power of Knowledge

Sponsors

Tags

News

HtmlAgility - an excellent HTML parser for DOM and XPATH or XSLT
Working with Argotic - a nice tool to manage Feed
Powerful .net zip library dotnetzip

February 2009 - Posts

JavaScript for GridView Row Level

Introduction:

I was working in a project where I need to calculate price according to the number of food selected from a drop down list and this will be client site operation. In that article in am writing code on how to access every row and cell from JavaScript, and also write some small operation using these row and cell.

1 2 3 4

Background:

Writing JavaScript is important in grid view where many operation is coming on dropdownlist clicking so needed to use JavaScript to make is faster and user friendly.

 

Code Step by Step:

Create a grid view first which will load data from database. here is the code of GridView

   1: <asp:GridView ID="myGrid" runat="server" AutoGenerateColumns="False" ShowFooter="true">
   2:     <Columns>
   3:         <asp:TemplateField>
   4:             <ItemTemplate>
   5:                 <asp:CheckBox runat="server" ID="chkIT" onClick="changeColor(this)"/>
   6:             </ItemTemplate>
   7:         </asp:TemplateField>
   8:         <asp:TemplateField>
   9:             <ItemTemplate>
  10:                 <asp:DropDownList ID="DropDownList1" runat="server" onchange="showData(this)">
  11:                     <asp:ListItem Selected="True" Text="1" Value="1"></asp:ListItem>
  12:                     <asp:ListItem Text="2" Value="2"></asp:ListItem>
  13:                     <asp:ListItem Text="3" Value="3"></asp:ListItem>
  14:                     <asp:ListItem Text="4" Value="4"></asp:ListItem>
  15:                     <asp:ListItem Text="5" Value="5"></asp:ListItem>
  16:                 </asp:DropDownList>
  17:             </ItemTemplate>
  18:         </asp:TemplateField>
  19:         <asp:TemplateField HeaderText="Id"> 
  20:             <ItemTemplate>
  21:                 <asp:Label ID="lblData" runat="server" Text='<%# Bind("Id") %>'></asp:Label>
  22:             </ItemTemplate>
  23:         </asp:TemplateField>
  24:         <asp:TemplateField HeaderText="Name">
  25:             <ItemTemplate>
  26:                 <asp:Label ID="lblData" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
  27:             </ItemTemplate>
  28:         </asp:TemplateField>
  29:         <asp:TemplateField HeaderText="Price/Unit">
  30:             <ItemTemplate>
  31:                 <asp:Label ID="lblData" runat="server" Text='<%# Bind("Price") %>'></asp:Label>
  32:             </ItemTemplate>
  33:             <FooterTemplate>
  34:                 <asp:Label ID="lblTotalPrice" runat="server" Text="Total"></asp:Label>
  35:             </FooterTemplate>
  36:         </asp:TemplateField>
  37:         <asp:TemplateField HeaderText="Price">
  38:             <ItemTemplate>
  39:                 <asp:Label ID="lblPrice" runat="server" Text='<%# Bind("Price") %>'></asp:Label>
  40:             </ItemTemplate>
  41:             <FooterTemplate>
  42:                 <asp:Label ID="lblTotalPrice" runat="server" Text=""></asp:Label>
  43:             </FooterTemplate>
  44:         </asp:TemplateField>
  45:     </Columns>
  46: </asp:GridView>

here from the grid view I have  called 2 JavaScript method to

1. showData(this) is called from onchange metod of drop down list which is in the Item Template of GridView. This method is showing change value using javascript

2. changeColor(this) is called from onClick method of Check box this is just to show how to set style form JavaScript in a row of GridView.

here is the JavaScript Code is working for GridView

   1: <script language="javascript" type="text/javascript">
   2: function showData(dropdown) 
   3: {
   4:     //get dropdownlist
   5:     var myindex  = dropdown.selectedIndex;
   6:     var SelValue = dropdown.options[myindex].value;
   7:     //get the row of the drop down list
   8:     var row = getParentRow(dropdown);
   9:     var newRate;
  10:     //set value in the cell of grid view
  11:     if (isFireFox()) 
  12:     {  
  13:         newRate = row.cells[4].textContent * SelValue;
  14:     }
  15:     else 
  16:     {
  17:         newRate = row.cells[4].innerText * SelValue;
  18:     }
  19:     row.cells[5].innerHTML = newRate;
  20:     //get gridview
  21:     var gridViewCtlId = '<%=myGrid. ClientID%>';
  22:     var grid = document.getElementById(gridViewCtlId);
  23:     var gridLength = grid.rows.length;
  24:     var sum = 0;
  25:     //calculate sum of the prices looping through the gridview and operation in every cell
  26:     for (var i = 1; i < gridLength-1; i++) 
  27:     {
  28:         if (isFireFox()) {
  29:             sum = sum + parseInt(grid.rows[i].cells[5].textContent);
  30:         }else {
  31:             sum = sum + parseInt(grid.rows[i].cells[5].innerText);
  32:         }
  33:     }
  34:     grid.rows[gridLength-1].cells[5].innerHTML = sum;
  35: }
  36: function getParentRow(obj)
  37: {
  38:     while(obj.tagName != "TR")
  39:     {
  40:         if(isFireFox())
  41:         {
  42:             obj = obj.parentNode;
  43:         }
  44:         else
  45:         {
  46:             obj = obj.parentElement;
  47:         }
  48:     }
  49:     return obj;
  50: }
  51: function isFireFox()
  52: {
  53:     return navigator.appName == "Netscape";
  54: }
  55: function changeColor(obj) 
  56: {
  57:     var rowObject = getParentRow(obj);
  58:     if (obj.checked) {
  59:         rowObject.style.backgroundColor = 'Yellow';
  60:     }else {
  61:         rowObject.style.backgroundColor = '';
  62:     }
  63: }
  64: </script>
Posted: Feb 26 2009, 01:00 AM by Ashrafur Rahaman | with 34 comment(s) |
More Posts