Link to home
Start Free TrialLog in
Avatar of pradeepsudharsan
pradeepsudharsan

asked on

Row click event in Datagrid

How to implement row click or row select event  for a data grid in ASP.NET using java script?

Avatar of Bob Learned
Bob Learned
Flag of United States of America image

Here is how I do it:

Step #1:  Define the function:

function ClickRow(e)
{
  var target = event.srcElement;
  while (target.tagName != "TR")
    target = target.parentNode;
   
  var x;
  var selectedIndex = document.getElementById("hiddenSelectedRow").value;

  if (selectedIndex.length > 0)    
  {
    var previous = target.parentNode.rows[selectedIndex];
   
    previous.className = previous.className.replace(" selected","");
  };
 
  target.className += " selected";
 
  document.getElementById("hiddenSelectedRow").value = target.rowIndex - 1;

}

There is a hidden element 'hiddenSelectedRow', which persists the selected row for the data grid.

Step #2:  

Attach the handler to the onclick event for each <tr> element:

function registerClientSideDataGrid(id)
{
   var table = document.getElementById(id);
  var cols = table.getElementsByTagName("col");
 
  //debugger;
 
  if (table.tBodies.length > 1)
  {
    for (var i = 0; i < table.tBodies[1].rows.length; i++)
    {
      var row = table.tBodies[1].rows[i];
    row.onclick = ClickRow;    
    } //for
  }      
}

Bob
Hi pradeepsudharsan,

In your ItemDataBound event, use:

e.item.attributes.add("onclick","doSomething(this);")

And then code the javascript function doSomething accordingly.

Tim Cottee
Avatar of pradeepsudharsan
pradeepsudharsan

ASKER

Hi TheLearnedOne ,
thanks for your help.
can you tell me how to attach onclick event for each <tr> element and how to get the the <tr> element
from the data grid using java script.

Regards
Pradeep



Is hiddenSelectedRow created automatically or i have to create it.
If you want to fire SelectedItemIndex on row click then you can do something like following in ItemDataBound event. Additionally, you can change color of background when user hovers over row.

e.Item.Attributes.Add("OnMouseOver","if(this.style.backgroundColor != '#669999')this.style.backgroundColor='LightBlue';this.style.cursor='hand';");
e.Item.Attributes.Add("OnMouseOut","if(this.style.backgroundColor != '#669999')this.style.backgroundColor ='White';");
string strID = ( (LinkButton) e.Item.Cells[5].Controls[0] ).ClientID.Replace("__","$_") ; // Replace 5 with number of Select linkbutton column
e.Item.Attributes.Add("OnClick","javascript:__doPostBack('" + strID  + "');" );

-tushar
1) There is the HTML tab to drag/drop a hidden element to the page.

2) To get the entire thing started, add this script block to the end of the page:

<script language="Javascript">
   registerClientSideDataGrid('DataGrid1');
</script>

3) This assumes that the ID for the DataGrid is 'DataGrid1'.

4) The attachment process is here in registerClientSideDataGrid:

    row.onclick = ClickRow;

Bob
hi TheLearnedOne ,

<script language="Javascript">
   registerClientSideDataGrid('DataGrid1');
</script>

I call this code after data binding in the server side using Page.RegisterStartUpScript Function
But nothing happens.
Does it run?  Can you debug the Javascript?  I can't look over your shoulder and see the exact problem.

Bob
Hi  TheLearnedOne ,

<script language="Javascript">
   registerClientSideDataGrid('DataGrid1');
</script>

I call this code after data binding in the server side using Page.RegisterStartUpScript Function.
But the code inside the  registerClientSideDataGrid('DataGrid1') function does not work.
So i change the logic as follows.


function registerClientSideDataGrid(id)
  {
  debugger;
  alert("test1");
      var table = document.getElementById(id);
      var cols = table.getElementsByTagName("col");
 
            //debugger;
 
            /*if (table.tBodies.length > 1)
            {
                        for (var i = 0; i < table.tBodies[1].rows.length; i++)
                        {
                              var row = table.tBodies[1].rows[i];
                              row.onclick = ClickRow;    
                        } //for
            }  */
            var i=0;
            if(table.rows.length>1)
            {
            alert("test2"+table.rows.length);
               for(i=1;i<table.rows.length;i++)
               {
             
               alert("test3"+i);
                   var row=table.rows[i];
                   row.onclick = ClickRow;  
                   
               }
               
            }  
  }

Now my problem is ,
i could not understand the logic in
function ClickRow(e)
      {  }    function.

also i want to store the clicked row's particular column values in hidden fields.
i.e the exact problem is ,if i click the particular row ,i want to store some column values of that row in some hidden fields in client side.
Can u plz help me?


regards
pradeep

ASKER CERTIFIED SOLUTION
Avatar of Bob Learned
Bob Learned
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial