in

ASP.NET Weblogs

Datagrid Girl

Marcie, ASP.NET Datagrid Blogger Girl

Datagrid Mailbag: Changing row's cssclass on the client

Don't tell anyone, but I do sometimes answer Datagrid questions sent by private email.  (Note:  I don't have time to answer ALL the questions I receive, so I apologize if your question didn't receive a response).  So I thought I would share here some of the answers that I give.

Today's emailer wants to know:  How do I change the CssClass of a Datagrid row after the user has clicked on a HyperLink control in that row?

Well, I worked up a sample on how to do this using a Javascript function (and if anyone has a better way, please let me know).  Let's say the relevant Datagrid column looks like this:

    <asp:TemplateColumn>
    <ItemTemplate>
    <asp:Hyperlink id="docURL" runat="server" NavigateUrl=<%#"Javascript:ShowDoc(" & Container.ItemIndex & ");"%>>Doc Name</asp:Hyperlink>
    </ItemTemplate>
    </asp:TemplateColumn>

The Javascript I came up with (using the current row index in the grid):

   function ShowDoc(obj) {
    window.open('newpage.aspx', 'name')
tabs = document.getElementsByTagName("table");
tabs[0].rows[obj+1].className='ClickedClass';

    }

Comments

 

Scott Mitchell said:

You should add this to the DataGridGirl.com Web site FAQ list, if you haven't already.

Cheers.
September 17, 2003 1:37 AM
 

Datagrid Girl said:

Good idea, Scott, I think I will.
September 17, 2003 10:52 AM
 

Me said:

Are you not setting the className on the first table element in the page - which is not necessarily your DataGrid?

Another approach might be:

<asp:HyperLink onclick='javascript:ShowDoc(this);' NavigateUrl='javascript:void(0);' ...

and
function ShowDoc(src)
{
// A -> TD -> TR
src.parentNode.parentNode.className = 'ClickedClass';
}
September 17, 2003 5:04 PM
 

Datagrid Girl said:

Great suggestion! "parentNode" makes that much cleaner--thanks.
September 17, 2003 6:15 PM

Leave a Comment

(required)  
(optional)
(required)  
Add