Hmmmm. Any news on why this wasn't included 'out of the box'?
Design limitation???
Too much overhead???
Great news! I look forward to implementing this.
Why was this not currently included out of the box and when will it be included?
This worked great! Thanks.. This is what I did to make the background a little more appealing and when you hover over the Column and the side Selecter cells it won't give you that JS Error in the lower left of the browser. may not be the best but it does the job..
I have one question though, I have a button type column with an image in the CellStyle and CellButtonStyle. When I use this javascript function when i hover over the rows so it changes the row background to an image as i hover, the rows, the Button Type Column Cell that has the row hovered over, the image turns to white.. Any ideas? I think browsers don't know what to do with an image overlapped with another..
function Over(gridNane, cellID, objectType) { // ObjectType 0 matches rows. Not Columns. // Cell Match looks for the Selecter Column and blocks it from the function. if (cellID!=undefined && objectType==0 && cellID.match("UltraWebGrid2_l_")==null) { var cell = igtbl_getCellById(cellID); setRowBackImage(cell.Row, "url(Images/MenuBackground.jpg)"); setRowForeColor(cell.Row, "white"); } } function Out(gridNane, cellID, objectType) { if (cellID!=undefined && objectType==0 && cellID.match("UltraWebGrid2_l_")==null) { var cell = igtbl_getCellById(cellID); //setRowBackColor(cell.Row, "white"); setRowBackImage(cell.Row, ""); setRowForeColor(cell.Row, "black"); } } function setRowBackImage(row, imagePath) { var cells = row.getCellElements(); for (var i = 0; i < cells.length; i++) { // cells[i].style.backgroundColor = color; cells[i].style.backgroundImage = imagePath; } }
function setRowForeColor(row, color) { var cells = row.getCellElements(); for (var i = 0; i < cells.length; i++) { cells[i].style.color = color; } }
Hello Jake,
Indeed - this is currently not supported out of the box, but I think it is possible with some coding. Here is what I ended up with, hopefully it will work for you uas well. The idea is to use a combination of css/javascript and our CSOM (client-side object model)
<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>
Hope this helps.