DHTMLX Docs & Samples Explorer

Custom Drag Text

The second common use case - some custom content needs to be shown instead of the default item text. The grid has a predefined method which converts the row ID to its drag representation, but it can be redefined with custom logic:

  grid.rowToDragElement=function(id){
       //any custom logic here
       var text = "<img src='some.gif'> - "+grid.cells(id,0).getValue(); //prepare text string
       return text;
  }

In the above mentioned snippet the text of the dragged element will contain a fixed image and the value of the first column of the dragged row. As you can see it is possible to use any HTML inside the dragged text, so it is rather customizable. In case of enabled multiselect in d-n-d, it is possible to create a drag representation which reflects not the text of the dragged items, but their number.

  grid.rowToDragElement=function(id){
       //any custom logic here
       var text = grid._dragged.length + "item(s)";
       return text;
  }

If you want to show the text of all the dragged items in case of d-n-d with multiselect it is possible to define the custom function as follows:

  grid.rowToDragElement=function(id){
       //any custom logic here
       var text="";
       for (var i=0; i<this._dragged.length; i++)
           text += grid.cells(grid._dragged[i].idd,0).getValue() + "<br/>";
       return text;
  }