Change the CSS of a jqGrid Row Being Dragged

Question

I'm using jqGrid's Drag and Drop functionality and I would like to know how I can alter the CSS of the row that is being dragged around.

I'm thinking I can add a CSS class to the dragged row, but I'm not 100% sure how.

Can anyone help? Thanks!

Carbylamine

Answer 1

You can use onstart callback to modify the style of the row that is being dragged around.

I made the following demo for you to demonstrate how it can be done:

The corresponding code is

$("#grid1").jqGrid('gridDnD', {
    connectWith: '#grid2',
    onstart: function (ev, ui) {
        ui.helper.removeClass("ui-state-highlight")
            .addClass("ui-state-error ui-widget")
            .css({
                border: "5px ridge tomato"
            });
    }
});

In the example I remove the style "ui-state-highlight" added by jqGrid by default to the dragging row, then I add "ui-widget" to fix the problem with the font of the dragging row. At the end I added the styles which corresponds to the style which I need to have: CSS class "ui-state-error" and CSS style border: 5px ridge tomato.

Additionally I use CSS style

.ui-jqgrid .ui-jqgrid-bdiv table.ui-state-active { border-style: none; }

to prevent horizontal scroll bar in the destination grid.

UPDATED: I din't see any problem with the usage of altRows: true in some from grids. Probably you the reason was the usage of sortableRows in the

// make rows of grid2 sortable
$("#grid2").jqGrid('sortableRows', {
    update: function () {
        resetAltRows.call(this.parentNode);
    }
});

where simple resetAltRows functions I described here. You can try the demo to see that all works.

Burleigh

Awesome! Thanks Oleg. Only problem is, I'm using alt rows and it doesn't pick up the new styling on the alternate row. Any ideas? – Carbylamine

@FastTrack: I didn't see any problem in the usage of altRows: true. I updated my answer and included one more demo. – Burleigh

Oleg: I think what my problem is has to do with the background color of the alt row. In your example, the white rows' background color turns red when being dragged. The alt row never changes the background color to red when being dragged around. – Carbylamine

@FastTrack: It's prity simple: you should modify ui.helper.removeClass("ui-state-highlight") to something like ui.helper.removeClass("ui-state-highlight myAltRowClass") to remove class myAltRowClass which you use (default value in jqGrid: "ui-priority-secondary"). I modified the code of the last demo. – Burleigh

Answer 2

Well you can add class to your div or row like this:

Here's the Fiddle

$(document).ready(function(){

$('div').click(function(){
$(this).addClass('red');

});

});

Wallpaper