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
410
Change row selection style dynamically
posted

Hello,

I am trying to replicate a "Copy selected row" on a webdatagrid.

I have a WebDataGrid with Selection behavior enabled and RowSelectType set to "Single". When the user selects any of the rows, I want to offer the possibilty of duplicating the contents of the selected row by "copy-paste" like functionality (i.e. "Ctrl C" to copy contents and then "Ctrl + V" to paste the contents elsewhere).

I want to highlight the selected row in some different way than a normal row selection, so the user is aware that the contents of that row are the ones being copied, and that it is not a normal selection of a row.

I need to do this from client side.

Googling around, I've reached the conlusion that I have to change the SelectedRowSelectorCssClass of the Selection behavior dynamically through Javascript, and I got to the point below, but it does not work.

Do you know how can I change the SelectedRowSelectorCssClass dynamically from client/Javascript?

    <style type="text/css">
    .CopyHighlightCSSClass
    {
        background-color: Red;
        background-image:none;
        color:Lime;
    }

    .DefaultSelectCSSClass
    {
        background-color: Blue;
        background-image:none;
        color:Black;
    }
    </style>

function CopyWebImageButton_Click(oButton, oEvent) {

    var webGrid = $find("MyWebDataGrid");

    webGrid.get_behaviors().get_selection()._selectedRowSelectorCss = "CopyHighlightCSSClass";

    // Rest of copy logic

   ...

}

function PasteWebImageButton_Click(oButton, oEvent) {

    var webGrid = $find("MyWebDataGrid");

    webGrid.get_behaviors().get_selection()._selectedRowSelectorCss = "DefaultSelectCSSClass";

    // Rest of copy logic

}