Hi Rumen,

Thanks for that explanation.  Could I trouble you for some sample code on how to do this per your suggestion?  for example, 

1. manually attaching javascript to the webdatagrid

2. looking up which webdatagridrow the mouse is over

3. how to set that webdatagridrow's background color

Thanks again!

-chris

Hello Chris,

Thought it would be helpful for you and anybody else who's interested in extending the grid's functionality. Here is a custom behavior that I was able to put together for you. It didn't take long... of course I knew what i was doing :-)

In a nutshell the solution contains two projects - a WebDataGrid extension project (marked with the WebDataGridAssembly attribute), and a website that has a page with the grid and a brand new HighlightBehavior in it. You can even see the behavior in the Behaviors designer dialog. It has only one useful property - HighlightCssClass. It's set to the class name that is defined in the aspx. The class must use selectors since the grid uses them, otherwise it would not be applied properly.

Other than that I hope it's self explanatory... I understand we have some more work to do on documenting those protected methods I used. Will ping our PM regarding that.

Let me know if you have more questions regarding this.

This post is over 2 years old and it helped me immensely today! 

I have successfully implemented a new HighlightBehavior, based on your sample code .  Whenever the user hovers over a row, this behavior dynamically adds a style to the page and applies that new style to the row.

Our requirements dictate a dynamic location for the background image, based on the application name.  Also, the image name changes based on the height of the row itself.  Also, it's an intranet application that uses IE8.  So... the primary changes ended up being in the _onMouseOverHandler function, as seen in the snippet below:

    _onMouseOverHandler: function (e) {
        var td = e.target;
        // We're only interested in TDs
        if (td.tagName == "TD") {
            var css = this.get_highlightCssClass();
            // Append our css class to the TRs className
            if (css && td.parentNode.className.indexOf(css) < 0) {
                td.parentNode.className += " " + css;
                var newStyle = 'tbody > tr.' + css + ' > td {' +
                                                            'background-image:url(/' + this.get_AppName() + '/Images/Bars/BlueGlassCut/MenuBar' +
                                                            (td.parentNode.scrollHeight + 1) + '.png) !important;' +
                                                            "background-position: center center !important;" +
                                                            '}';
 
                var styleElement = document.getElementById('jd_grid_mouseover_style');
 
                if (styleElement) {
                    document.getElementsByTagName('head')[0].removeChild(styleElement);
                }
 
                styleElement = document.createElement('style');
                styleElement.type = 'text/css';
                styleElement.id = 'jd_grid_mouseover_style';
                styleElement.styleSheet.cssText = newStyle;
                document.getElementsByTagName('head')[0].appendChild(styleElement);
            }
        }
    },

Well, the original function was truncated to the right of
the page...  Sorry.  Here goes again...

_onMouseOverHandler: function (e) {
  var td = e.target;
  // We're only interested in TDs
  if (td.tagName == "TD") {
    var css = this.get_highlightCssClass();
    // Append our css class to the TRs className
    if (css && td.parentNode.className.indexOf(css) < 0) {
      td.parentNode.className += " " + css;
      var newStyle = 'tbody > tr.' + css + ' > td {' +
       'background-image:url(/' + 
       this.get_AppName() + '/Images/Bars/BlueGlassCut/MenuBar' +
       (td.parentNode.scrollHeight + 1) + '.png) !important;' +
       "background-position: center center !important;" +
       '}';
 
      var styleElement = 
       document.getElementById('jd_grid_mouseover_style');
 
      if (styleElement) {
        document.getElementsByTagName('head')[0].removeChild(styleElement);
      }
 
      styleElement = document.createElement('style');
      styleElement.type = 'text/css';
      styleElement.id = 'jd_grid_mouseover_style';
      styleElement.styleSheet.cssText = newStyle;
      document.getElementsByTagName('head')[0].appendChild(styleElement);
    }
  }
},