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.
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:
39: <ItemTemplate>
40: <asp:Label ID="lblPrice" runat="server" Text='<%# Bind("Price") %>'></asp:Label>
41: </ItemTemplate>
42: <FooterTemplate>
43: <asp:Label ID="lblTotalPrice" runat="server" Text=""></asp:Label>
44: </FooterTemplate>
45: </asp:TemplateField>
46: </Columns>
47: </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: //get dropdownlist
4: var myindex = dropdown.selectedIndex;
5: var SelValue = dropdown.options[myindex].value;
6: //get the row of the drop down list
7: var row = getParentRow(dropdown);
8: var newRate;
9: //set value in the cell of grid view
10: if (isFireFox()) {
11: newRate = row.cells[4].textContent * SelValue;
12: }
13: else {
14: newRate = row.cells[4].innerText * SelValue;
15: }
16: row.cells[5].innerHTML = newRate;
17:
18: //get gridview
19: var gridViewCtlId = '<%=myGrid. ClientID%>';
20: var grid = document.getElementById(gridViewCtlId);
21: var gridLength = grid.rows.length;
22: var sum = 0;
23: //calculate sum of the prices looping through the gridview and operation in every cell
24: for (var i = 1; i < gridLength-1; i++) {
25: if (isFireFox()) {
26: sum = sum + parseInt(grid.rows[i].cells[5].textContent);
27: }
28: else {
29: sum = sum + parseInt(grid.rows[i].cells[5].innerText);
30: }
31: }
32: grid.rows[gridLength-1].cells[5].innerHTML = sum;
33: }
34:
35: function getParentRow(obj)
36: {
37: while(obj.tagName != "TR")
38: {
39: if(isFireFox())
40: {
41: obj = obj.parentNode;
42: }
43: else {
44: obj = obj.parentElement;
45: }
46: }
47:
48:
49: return obj;
50: }
51: function isFireFox()
52: {
53: return navigator.appName == "Netscape";
54: }
55: function changeColor(obj) {
56: var rowObject = getParentRow(obj);
57: if (obj.checked) {
58: rowObject.style.backgroundColor = 'Yellow';
59: }
60: else {
61: rowObject.style.backgroundColor = '';
62: }
63: }
64: </script>