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?
Hi pradeepsudharsan,
In your ItemDataBound event, use:
e.item.attributes.add("onc lick","doS omething(t his);")
And then code the javascript function doSomething accordingly.
Tim Cottee
In your ItemDataBound event, use:
e.item.attributes.add("onc
And then code the javascript function doSomething accordingly.
Tim Cottee
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
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
ASKER
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("OnM ouseOver", "if(this.s tyle.backg roundColor != '#669999')this.style.backg roundColor ='LightBlu e';this.st yle.cursor ='hand';") ;
e.Item.Attributes.Add("OnM ouseOut"," if(this.st yle.backgr oundColor != '#669999')this.style.backg roundColor ='White';");
string strID = ( (LinkButton) e.Item.Cells[5].Controls[0 ] ).ClientID.Replace("__","$ _") ; // Replace 5 with number of Select linkbutton column
e.Item.Attributes.Add("OnC lick","jav ascript:__ doPostBack ('" + strID + "');" );
-tushar
e.Item.Attributes.Add("OnM
e.Item.Attributes.Add("OnM
string strID = ( (LinkButton) e.Item.Cells[5].Controls[0
e.Item.Attributes.Add("OnC
-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 ('DataGrid 1');
</script>
3) This assumes that the ID for the DataGrid is 'DataGrid1'.
4) The attachment process is here in registerClientSideDataGrid :
row.onclick = ClickRow;
Bob
2) To get the entire thing started, add this script block to the end of the page:
<script language="Javascript">
registerClientSideDataGrid
</script>
3) This assumes that the ID for the DataGrid is 'DataGrid1'.
4) The attachment process is here in registerClientSideDataGrid
row.onclick = ClickRow;
Bob
ASKER
hi TheLearnedOne ,
<script language="Javascript">
registerClientSideDataGrid ('DataGrid 1');
</script>
I call this code after data binding in the server side using Page.RegisterStartUpScript Function
But nothing happens.
<script language="Javascript">
registerClientSideDataGrid
</script>
I call this code after data binding in the server side using Page.RegisterStartUpScript
But nothing happens.
Does it run? Can you debug the Javascript? I can't look over your shoulder and see the exact problem.
Bob
Bob
ASKER
Hi TheLearnedOne ,
<script language="Javascript">
registerClientSideDataGrid ('DataGrid 1');
</script>
I call this code after data binding in the server side using Page.RegisterStartUpScript Function.
But the code inside the registerClientSideDataGrid ('DataGrid 1') 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.leng th; i++)
{
var row = table.tBodies[1].rows[i];
row.onclick = ClickRow;
} //for
} */
var i=0;
if(table.rows.length>1)
{
alert("test2"+table.rows.l ength);
for(i=1;i<table.rows.lengt h;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
<script language="Javascript">
registerClientSideDataGrid
</script>
I call this code after data binding in the server side using Page.RegisterStartUpScript
But the code inside the registerClientSideDataGrid
So i change the logic as follows.
function registerClientSideDataGrid
{
debugger;
alert("test1");
var table = document.getElementById(id
var cols = table.getElementsByTagName
//debugger;
/*if (table.tBodies.length > 1)
{
for (var i = 0; i < table.tBodies[1].rows.leng
{
var row = table.tBodies[1].rows[i];
row.onclick = ClickRow;
} //for
} */
var i=0;
if(table.rows.length>1)
{
alert("test2"+table.rows.l
for(i=1;i<table.rows.lengt
{
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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("h
if (selectedIndex.length > 0)
{
var previous = target.parentNode.rows[sel
previous.className = previous.className.replace
};
target.className += " selected";
document.getElementById("h
}
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
{
var table = document.getElementById(id
var cols = table.getElementsByTagName
//debugger;
if (table.tBodies.length > 1)
{
for (var i = 0; i < table.tBodies[1].rows.leng
{
var row = table.tBodies[1].rows[i];
row.onclick = ClickRow;
} //for
}
}
Bob