I would like to change the pink highlight that is used during the drag and drop operation to another color. Is there a way to do this with javascript? I cannot modify the css file
I searched the forums and found something close but this changes the row color of the dropped row AFTER it has been dropped in the new location. I want to change the pink that is shown DURING the drag operation before the item is dropped
dhxLayout = new dhtmlXLayoutObject("parentId", "1C");
dhxLayoutMain = dhxLayout.cells("a");
dhxLayoutMain.hideHeader();
dhxFormMain = dhxLayoutMain.attachForm();
var formMain =
'<items>' +
'<item type="container" name="containerA" inputWidth="100" inputHeight="500" offsetLeft="50"/>' +
'<item type="newcolumn" />' +
'<item type="container" name="containerB" inputWidth="100" inputHeight="500" offsetLeft="50"/>' +
'</items>';
dhxFormMain.loadStructString(formMain);
dhxContainerA = dhxFormMain.getContainer("containerA");
dhxGridA = new dhtmlXGridObject(dhxContainerA);
dhxGridA.setHeader("ID,A");
dhxGridA.setInitWidths("50,50");
dhxGridA.setColAlign("left,left");
dhxGridA.setColTypes("ed,ed");
dhxGridA.setColSorting("str,str");
dhxGridA.enableDragAndDrop(true);
dhxGridA.init();
dhxGridA.addRow(100, [11,'A 1']);
dhxGridA.addRow(101, [12,'A 2']);
dhxGridA.addRow(102, [13,'A 3']);
dhxGridA.addRow(103, [14,'A 4']);
dhxGridA.attachEvent("onDragIn",function(sid,tid,sgrid,tgrid){
if (tid) // tid may be null if dropping is in the grid body
dhxGridA.setRowTextStyle(tid,"background-color:LightGreen;");// marks current dropping
return true;
});
dhxGridA.attachEvent("onDragOut",function(tid){
if (tid) {
dhxGridA.setRowTextStyle(tid,""); // clears styles set on the previous step
}
});
dhxContainerB = dhxFormMain.getContainer("containerB");
dhxGridB = new dhtmlXGridObject(dhxContainerB);
dhxGridB.setHeader("ID,B");
dhxGridB.setInitWidths("50,50");
dhxGridB.setColAlign("left,left");
dhxGridB.setColTypes("ed,ed");
dhxGridB.setColSorting("str,str");
dhxGridB.enableDragAndDrop(true);
dhxGridB.init();
dhxGridB.addRow(200, [21,'B 1']);
dhxGridB.addRow(201, [22,'B 2']);
dhxGridB.addRow(202, [23,'B 3']);
dhxGridB.addRow(203, [24,'B 4']);
dhxGridB.attachEvent("onDragIn",function(sid,tid,sgrid,tgrid){
if (tid) // tid may be null if dropping is in the grid body
dhxGridB.setRowTextStyle(tid,"background-color:Blue;");// marks current dropping
return true;
});
dhxGridB.attachEvent("onDragOut",function(tid){
if (tid) {
dhxGridB.setRowTextStyle(tid,""); // clears styles set on the previous step
}
});