Forums Ultimate UI for ASP.NET Web Forms
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
Stephen Elms
310
Setting a ":visited" style for a WebDataGrid cell
posted

Infragistics45.Web.v14.2, Version=14.2.20142.2480

Out of the box, the webdatagrid provides a behavior attribute for setting the styling of a selected row or cell (SelectedRowSelectorCssClass="gridCustomSelectedRowStyle").  However, what if you would like the style of the cell or row change after the grid has lost focus to indicate selected row, but not necessarily active.

I've tried several variations of manipulating the styling in CSS, for example:

tbody.igg_item>tr:visited>td{
background-color:#F7F7F7!important;
border:1px solid #81C1EA!important;
border-width:0px 1px 1px 0px;
color:#81C1EA!important;
}

but the SelectedRow styling remains applied.

I've also attempted applying the style client side through BLOCKED SCRIPT

function setCellAsVisited(webDataGrid) {
var selectedRow = webDataGrid.get_behaviors().get_selection().get_selectedRowsResolved()[0];
var selectedCell = selectedRow.get_cell(2).get_element();
webDataGrid.get_behaviors().get_selection().get_selectedRows().remove();
selectedCell.style.backgroundColor="#F7F7F7!important";
selectedCell.style.border="1px";
selectedCell.style.borderColor="#81C1EA!important";
selectedCell.style.borderWidth="0px 1px 1px 0px";
selectedCell.style.color="#81C1EA!important";
}

But still no luck!  Also note that even thought I clear the selected row in line 3 of the function above, the selected style is still displayed on the screen.

Has anybody successfully created a cell visited grid style?  If so, please point me in the right direction.

Thank you.

  • 2680
    Offline posted

    Hello,

    Thank you for contacting Infragistics support.

    ":visited" pseudo-class could be only used on links. Reference - https://developer.mozilla.org/en-US/docs/Web/CSS/%3Avisited .

    You could change the cell style on selection changed event like this:

    function onCellSelectionChanged(webDataGrid, cellSelectionChangedEventArgs) {
        var cellElement = cellSelectionChangedEventArgs.getSelectedCells().getItem(0).get_element();
        $(cellElement).css("background-color", "gray");
    }

    Regarding the grid's focus - tables, table rows, table cells cannot get focus, inputs can. You can mimic "losing grid's focus" by performing the desired action on a click outside of the grid like this:

    $(document).click(function (event) {
            //if clicked outside of the grid
            if (!$(event.target).closest("#" + "<%= WebDataGrid1.ClientID%>").length) {
                //changing selected cell style
                var cellElement = $find("<%= WebDataGrid1.ClientID %>").get_behaviors().get_selection().get_selectedCells().getItem(0).get_element();
                $(cellElement).css("background-color", "gray");

                //clearing selection
                $find("<%= WebDataGrid1.ClientID %>").get_behaviors().get_selection().get_selectedCells().clear();
            }
        })

    I am attaching a sample demonstrating this behavior.

    Please contact me if you need further assistance.

    SelectedCellLostFocus.zip