jquery - 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!

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.