CODEWITHSUNDEEP
javascriptdhtmlx
abhishek shakya
abhishek shakya

Reputation: 19

DHTMLX grid column drag and drop into DHTMLX form textbox

How do I select a column of a row from DHTMLX grid and drag and drop it to a textbox in DHTMLX form and set the value?

Upvotes: 1

Views: 394

Answers (1)

sematik
sematik

Reputation: 504

There is no standard functionality to achieve such use-case.

It is possible to register form as a drop area, so dragging the row from a grid to a form will produce an event. In event handler you will have info about the dragged row and about the HTML element in the form, on which drop occurs

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="//cdn.dhtmlx.com/edge/dhtmlx.css"/>
<script src="//cdn.dhtmlx.com/edge/dhtmlx.js"></script>
<script>
	var myGrid, myForm;
    function doOnLoad(){
    	myGrid = new dhtmlXGridObject('gridbox');
    	myGrid.setImagePath("codebase/imgs/");
    	myGrid.setHeader("Book Title,Author,Sales");
    	myGrid.setInitWidths("150,150,80");
        myGrid.setColTypes("ed,ed,ed");
    	myGrid.setColSorting("int,str,str");
    	myGrid.enableDragAndDrop(true);
    	myGrid.enableAutoWidth(true);
    	myGrid.init();
        var gridData={
          rows:[
            { id:1, data: ["A Time to Kill", "John Grisham", "100"]},
		    { id:2, data: ["Blood and Smoke", "Stephen King", "1000"]},
		    { id:3, data: ["The Rainmaker", "John Grisham", "-200"]}
		  ]
		};
		myGrid.parse(gridData,"json");
        var formData = [
          {type: "input", label: "Book Title", value: "", name:"s_inp"},
    	];
    	myForm = new dhtmlXForm("myForm", formData);
        var drop_inp=myForm.getInput("s_inp");
        myGrid.dragger.addDragLanding(drop_inp, new s_control);
	}
    		
    function s_control(){
      this._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
        targetHtmlObject.style.backgroundColor="";
          targetHtmlObject.value=sourceHtmlObject.parentObject.parentNode.cells[0].textContent; 
        // cells[0] - first column of the grid row
      };
	  this._dragIn=function(htmlObject,shtmlObject){
        htmlObject.style.backgroundColor="#fffacd";
        return htmlObject;
	  };
      this._dragOut=function(htmlObject){
        htmlObject.style.backgroundColor="";
        return this;
      }
  	}
</script>
</head>
<body onload="doOnLoad()">
  <div id="gridbox" style="width:400px;height:170px;background-color:white;"></div>
  <div id="myForm" style="height:150px;"></div>
</body>
</html>

Upvotes: 1

Related Questions