2

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!

FastTrack
  • 8,810
  • 14
  • 57
  • 78

2 Answers2

2

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:

enter image description here

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • 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? – FastTrack Apr 17 '12 at 21:27
  • @FastTrack: I didn't see any problem in the usage of `altRows: true`. I updated my answer and included one more demo. – Oleg Apr 17 '12 at 22:29
  • 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. – FastTrack Apr 17 '12 at 23:53
  • 2
    @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](http://www.ok-soft-gmbh.com/jqGrid/gridDnD-and-sortableRows4.htm). – Oleg Apr 18 '12 at 00:06
0

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');

});

});
Dejo Dekic
  • 2,088
  • 4
  • 27
  • 50