DataGrid - dynamically select (highlight) a row

Discussion in 'ASP .Net Web Controls' started by Angela, Jan 28, 2004.

  1. Angela

    Angela Guest

    Here's my task list:
    - highlight the clicked row in the DataGrid
    - Be able to click anywhere on a given row
    - Rows highlight as the cursor passes over them, cursor changes from arrow to hand

    Are all of these things possible? If so, can someone point me in the right direction?
     
    Angela, Jan 28, 2004
    #1
    1. Advertising

  2. Hi Angela,

    Thank you for posting in the community! My name is Jeffrey, and I will be
    assisting you on this issue.

    Is your DataGrid control WinForm based or Web Form based? Because you
    posted in microsoft.public.dotnet.framework.aspnet.webcontrols group, I
    suppose your datagrid control is web server control.

    Based on my understanding, you want to do some customize with your datagrid
    control, such as cursor display, table row highlight.

    ===============================================
    Actually, Asp.Net just encapsulates the Html code, and will the server
    controls and classes will render as Html code. So anything html can do,
    then asp.net can do it also.
    Asp.Net DataGrid control will render as <table> <tr> <td> html tags.

    For your specifically questions, some of them asp.net did not give them
    server side support, so you need to fulfill them through Client side
    javascript code, but you should add the javascript event handler in server
    side.(Also, you event can dynamically generate the javascript code at
    runtime)

    1). To highlight the clicked row in the DataGrid, you need the
    "onmousedown" or "onclick" event of <tr> tag
    3). To highlight Rows as the cursor passes over them, cursor changes from
    arrow to hand, you need the "onmouseover" event of <tr> tag and use
    element.style.cursor property.

    For your second question of "Be able to click anywhere on a given row", I
    am not fully understand. Normally, I suppose you want to high light a
    certain <td> when clicked.
    This is almost the same with the <tr> tag, but add the event handler at
    different server element.

    Sample code like this:

    Client script code:
    <script language="javascript">
    var originalrow_color, originalitem_color;
    function highlightrow(obj)
    {
    if(obj.bgColor!="#ff0000")
    {
    originalrow_color=obj.bgColor;
    obj.bgColor="#ff0000";
    }
    else
    {
    obj.bgColor=originalrow_color;
    }
    }

    function highlightitem(obj)
    {
    originalitem_color=obj.bgColor;
    obj.bgColor="blue";
    }

    function changebackcolor(obj)
    {
    obj.bgColor=originalitem_color;
    }

    function changecursor(obj)
    {
    obj.style.cursor="hand";
    }
    </script>

    Server side C# code:
    private void DataGrid1_ItemCreated(object sender,
    System.Web.UI.WebControls.DataGridItemEventArgs e)
    {
    DataGridItem dgi=e.Item;
    if(dgi.ItemType==ListItemType.AlternatingItem)
    {
    dgi.Attributes.Add("onclick","highlightrow(this)");
    dgi.Attributes.Add("onmouseover","changecursor(this)");

    TableCell tc=dgi.Cells[1];

    tc.Attributes.Add("onmousedown","highlightitem(this)");
    tc.Attributes.Add("onmouseup","changebackcolor(this)");

    }
    }

    In server side, I hooked DataGrid.ItemCreated event and add the event
    handlers to AlternatingItems(DataGridItem corresponding to <tr>, TableCell
    corresponding to <td>)

    In Client javascript code, I change cursor with <tr>'s onmouseover event,
    change <tr>'s bgColor in onclick event, exchange <td>'s bgColor between
    second column(TableCell tc=dgi.Cells[1]).

    Note: Client javascript is case-sensitive, so not to use obj.bgcolor.

    =============================================================
    Please apply my suggestion above and let me know if it helps resolve your
    problem.

    Thank you for your patience and cooperation. If you have any questions or
    concerns, please feel free to post it in the group. I am standing by to be
    of assistance.
    Have a nice day!!

    Best regards,
    Jeffrey Tan
    Microsoft Online Partner Support
    Get Secure! - www.microsoft.com/security
    This posting is provided "as is" with no warranties and confers no rights.
     
    Jeffrey Tan[MSFT], Jan 29, 2004
    #2
    1. Advertising

  3. Hi Angela,

    Does my reply resolve your problem?
    If you still have anything unclear, please feel free to tell me, I will
    assist you.

    Best regards,
    Jeffrey Tan
    Microsoft Online Partner Support
    Get Secure! - www.microsoft.com/security
    This posting is provided "as is" with no warranties and confers no rights.
     
    Jeffrey Tan[MSFT], Feb 2, 2004
    #3
  4. Angela

    Angela Guest

    Hi Jeffrey

    Thank you for your response. I haven't had time to try your suggestion yet, I was sidetracked by a different project at the end of last week. I will be trying your suggestion today

    By "Click anywhere on the row to select" I mean, the user wants to be able to click anywhere on a DataGridRow and that would fire the same event as clicking the "Select" button in the row. They would like to eliminate the select button and just allow customers to click the row

    I'll let you know if I need more assistance
    Thank
    Angela
     
    Angela, Feb 2, 2004
    #4
  5. Angela

    Angela Guest

    I tried using your sample code and it seems like it should work, but its not working for me. I did a "View Source" on my rendered page and the JavaScript doesn't even show up in the source.
    Not sure what is going on.
     
    Angela, Feb 2, 2004
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. TJS
    Replies:
    1
    Views:
    3,341
    =?Utf-8?B?QW5hbmQgTW9oYW4=?=
    Feb 17, 2004
  2. =?Utf-8?B?YmFjazJncmlk?=

    highlight datagrid row on radiobutton selection

    =?Utf-8?B?YmFjazJncmlk?=, Sep 13, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    488
    =?Utf-8?B?YmFjazJncmlk?=
    Sep 13, 2004
  3. =?Utf-8?B?TWlrZQ==?=

    highlight datagrid row when clicked

    =?Utf-8?B?TWlrZQ==?=, Nov 9, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    2,957
  4. Grey

    highlight row in datagrid

    Grey, Jan 10, 2005, in forum: ASP .Net
    Replies:
    4
    Views:
    10,263
    =?Utf-8?B?QmlkYXJrb3Rh?=
    May 24, 2005
  5. Fernando Lopes
    Replies:
    0
    Views:
    3,213
    Fernando Lopes
    Apr 28, 2005
Loading...

Share This Page