Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Nicholas
35
How to handle mouse move over event
posted

Hi ,

I want a simple example to handle the mouse move over event and change the color of the row in a grid.

I have a client side events added like this

<ClientSideEvents CellClickHandler="GridCell_Click"

ColumnHeaderClickHandler="GridHeader_Click"

MouseOverHandler="ReportGrid_MouseOver"

>

function ReportGrid_MouseOver(gridName, cellId,objectType)

{

alert('moouse over');

var cell = igtbl_getCellById(cellId);

cell.Element.style.backgroundColor = "#99FFFF";

cell.style.cursor = 'hover';

}

But the above method is never getting fired nor the colors are changing when I move the mouse over the grid.

Any kind of suggestion is appreciated.

 

Parents
No Data
Reply
  • 28464
    posted

    I know it is a bit late, but in case anyone comes here via search - here is a solution to set hover style for rows using MouseOver / Out CSOM client-events, hopefully it will be useful:

    <igtbl:UltraWebGrid ID="UltraWebGrid1" runat="server" DataSourceID="SqlDataSource1" Height="200px" Width="325px">
        <DisplayLayout>
            <ClientSideEvents MouseOverHandler="Over" MouseOutHandler="Out"/>
        </DisplayLayout>
    </igtbl:UltraWebGrid>


        <script type="text/javascript" language="javascript">
       
        function Over(gridNane, cellID, objectType)
        {       
            var cell = igtbl_getCellById(cellID);
            setRowBackColor(cell.Row, "red");        
        }
       
        function Out(gridNane, cellID, objectType)
        {       
            var cell = igtbl_getCellById(cellID);
            setRowBackColor(cell.Row, "white");    
        }
       
        function setRowBackColor(row, color)
        {
            var cells = row.getCellElements();
           
            for (var i = 0; i < cells.length; i++)
            {
                cells[i].style.backgroundColor = color;       
            }  
        }
       
        </script>

Children