Question

i have a gridview witch contain 4 databound columns and 2 templated column. in one of template column i placed a dropdownlist(witch contain number of items). and 2nd column of gridview contains prices. so in last column i want that when i select value in dropdownlist that value should multiply with 2nd column’s value of datagrid and place result in last column of gridview using java script.

please tell me what to do..

Answer 1

You can get the row and column cell data using javascript. Here is a nice article on

Traversing an HTML table with JavaScript and DOM Interfaces

Also take a look at table.rows

Sample Code

HTML

<table>
            <tr>
                <td>
                    100
                </td>
                <td>
                    <select id="sel1" onchange="GetRowInd(this);">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>
                    100
                </td>
                <td>
                    <select id="sel2" onchange="GetRowInd(this);">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </td>
                <td>

                </td>
            </tr>
        </table>

javascript

function GetRowInd(selectbox)
    {
        var parentTr = selectbox.parentNode.parentNode;
        var secondCellVal = parseInt ( parentTr.cells[0].innerText , 10 );
        var comboVal = parseInt ( selectbox.value , 10 );

        parentTr.cells[2].innerText = secondCellVal * comboVal;
    }

You have to use textContent instead of innerText to work in FF.

jQuery solution

Remove the onchange event from the combo box and use the following function

$(function() {
            $(".selectbox").change ( function() {
                var comboVal = $(this).val();
                var parentTr = $(this).parents('tr');  
                var tdElem = parentTr.children('td');             
                var secondCellVal = tdElem.eq('0').text();

                tdElem.eq('2').text ( comboVal * secondCellVal );
            });
        });