Refresh a datatable when an item is dragged from list to datatable

Webix JS
1

I am creating a webix.ui which has view:'list' as a row and a view:'datatable' as another row. On first load some default items are displayed in the list as well as in the datatable. The items in the list act as a column in the datatable.

I want to drag items from list to datatable - once the drag is done the datatable should be refreshed/reloaded with appropriate data. While the list view should remain constant. I am making an ajax call to get data from db.

Didn’t find much documentation on it. Is this supported in free or pro version?
How can we do this?

code snippet below for better understanding

<div id="listA"></div>

<script type="text/javascript">
 var columnHeaders=jQuery.parseJSON(columnHeaderString());
 var jsonDefaultData= jQuery.parseJSON(defaultData);
 var dataArray; //Some data


webix.ready(function(){
	var grid = {
		id:"datagrid",
		view:"datatable",
		columns:columnHeaders,
		data:dataArray			
		
	};

webix.ui({
		container:"listA",
		rows:[
		      {
			   view:"template",
		       template:"Analyse",
			   type:"header"
			  },
		       
		      {cols:[{	
		    	  		template:"itemlist",
		    	  		width:320,
		    	  		rows:[
		    	              {
		    	                  height: 35,
		    	                  view:"toolbar",
		    	                  elements:[
		    	                      {view:"text", id:"list_input",label:"Filter Items", labelWidth:170}
		    	                  ]
		    	              },
		    	              {
		    	                  view:"list",
		    	                  id:"list",
		    	                  select:"multiselect",
		    	                  drag:true, scrollX:false,
		    	                  template:"#fieldName#",
		    	                  data:listObjectsArray
		    	              }
		    	          ]},
							{rows:[ grid ]}
		             ]}
		      ]
			
});

$$("list").attachEvent("onAfterDrop", abcd);

$$("list_input").attachEvent("onTimedKeyPress",function(){
    var value = this.getValue().toLowerCase();
    $$("list").filter(function(obj){
    	return obj.fieldName.toLowerCase().indexOf(value)>=0;
    })
});

function abcd(){
	//logic to get data from db and reload the datatable
}

});

</script>
2

Proper Code format

<div id="listA"></div>

<script type="text/javascript">
 var columnHeaders=jQuery.parseJSON(columnHeaderString());
 var jsonDefaultData= jQuery.parseJSON(defaultData);
 var dataArray; //Some data


webix.ready(function(){
	var grid = {
		id:"datagrid",
		view:"datatable",
		columns:columnHeaders,
		data:dataArray			
		
	};

webix.ui({
		container:"listA",
		rows:[
		      {
			   view:"template",
		       template:"Analyse",
			   type:"header"
			  },
		       
		      {cols:[{	
		    	  		template:"itemlist",
		    	  		width:320,
		    	  		rows:[
		    	              {
		    	                  height: 35,
		    	                  view:"toolbar",
		    	                  elements:[
		    	                      {view:"text", id:"list_input",label:"Filter Items", labelWidth:170}
		    	                  ]
		    	              },
		    	              {
		    	                  view:"list",
		    	                  id:"list",
		    	                  select:"multiselect",
		    	                  drag:true, scrollX:false,
		    	                  template:"#fieldName#",
		    	                  data:listObjectsArray
		    	              }
		    	          ]},
							{rows:[ grid ]}
		             ]}
		      ]
			
});

$$("list").attachEvent("onAfterDrop", abcd);

$$("list_input").attachEvent("onTimedKeyPress",function(){
    var value = this.getValue().toLowerCase();
    $$("list").filter(function(obj){
    	return obj.fieldName.toLowerCase().indexOf(value)>=0;
    })
});

function abcd(){
	//logic to get data from db and reload the datatable
}

});
3

Here are the docs about data loading:

http://docs.webix.com/desktop__data_loading.html

To clear data, you need to call clearAll() method.

So, here are examples of data reload:

  • clear list and load new:
list.clearAll();
list.load(url);
  • load new, clear list and parse:
webix.ajax(url, function(text){
    var data = webix.DataDriver.json.toObject(text);
    list.clearAll();
    list.parse(data);
});