Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Row click event for DataGrid

0.00/5 (No votes)
17 Jan 2007 1  
A way to add server side event for row of DataGrid withouth using server controls

Introduction

I was looking for some functionalities over the net for extending DataGrid control to submit the page by clicking the row, without having any buttons or server controls that can be used for submitting the page. Unfortunately i could have any simple way of doing this till found the article of ssjvackar.
The problem with this article was that it was titled that is related with DataGrid control but actualy the code was written for GridView control.
I was hoping that the scenario will work and for datagrid, but there were a little changes about it.
Here is the code (it is very simple and close to the ssjvackar's article):

protected void DataGrid1_ItemDataBound(object sender, DataGridItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        e.Item.Attributes.Add("onmouseover", "this.style.cursor='hand'");
        e.Item.Attributes.Add("onclick", "javascript:__doPostBack" +
           "('" + e.Item.UniqueID , 'Select$" + e.Item.ItemIndex + "')");
    }
}

Issues

The first main issue is that this code is working if the above statements are correct:

  • There is at least one server control that will postback the page. This statement is major, because if there is not such record then the __doPostBack function will not be added on the page. If there is no server control you must add the code above in your PageLoad event manually to be sure that the page and DataGrid control will work correct:
    if (!this.Page.IsClientScriptBlockRegistered("DoPostBack"))
    {
    
        System.Text.StringBuilder scriptBuilder = new System.Text.StringBuilder();
        scriptBuilder.Append("<script type=\"text/javascript\">" + Environment.NewLine);
        scriptBuilder.Append("<!--" + Environment.NewLine);
        scriptBuilder.Append("var theForm = document.forms['form1'];" + Environment.NewLine);
        scriptBuilder.Append("if (!theForm) {" + Environment.NewLine);
        scriptBuilder.Append("    theForm = document.form1;" + Environment.NewLine);
        scriptBuilder.Append("}" + Environment.NewLine);
        scriptBuilder.Append("function __doPostBack(eventTarget, eventArgument) {" + Environment.NewLine);
        scriptBuilder.Append("    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {" + Environment.NewLine);
        scriptBuilder.Append("        theForm.__EVENTTARGET.value = eventTarget;" + Environment.NewLine);
        scriptBuilder.Append("        theForm.__EVENTARGUMENT.value = eventArgument;" + Environment.NewLine);
        scriptBuilder.Append("        theForm.submit();" + Environment.NewLine);
        scriptBuilder.Append("    }" + Environment.NewLine);
        scriptBuilder.Append("}" + Environment.NewLine);
        scriptBuilder.Append("// -->" + Environment.NewLine);
        scriptBuilder.Append("</script>" + Environment.NewLine);
    
        this.Page.RegisterStartupScript("DoPostBack", scriptBuilder.ToString());
    }
    
        
  • Related with the above statement the hidden fields __EVENTTARGET and __EVENTARGUMENT must be on the page when the browser renders tha page. To fix this problem you will have to manually add these fields in the <form>tag like this:
            
    <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
    <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
    
        

Another issue is that using this code the OnItemCommand event of the DataGrid will not fired. To fire this event the code must be changed like this:

protected void DataGrid1_ItemDataBound(object sender, DataGridItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        e.Item.Attributes.Add("onmouseover", "this.style.cursor='hand'");
        e.Item.Attributes.Add("onclick", "javascript:__doPostBack" +
           "('" + e.Item.UniqueID + "$ctl00' , 'Select$" + e.Item.ItemIndex + "')");
    }
}

The above code has one problem:
if the item of the DataGrid control has at least one server control it will have the same UniqueID as the e.Item.UniquID. This will not be a problem during the development if you have in mind.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here