Hi friends am newbie to webix .Here am displaying datatable .When i change the quantity total has to update dynamically.
i have tried with onchange event but event is not triggering. Kindly help me. Thanks in advance
<!DOCTYPE html>
<html>
<head>
<title>Opening multiple editors</title>
<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css">
<script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<div id="testA"></div>
<hr>
<script type="text/javascript" charset="utf-8">
var value1='<%=request.getAttribute("jsonValue")%>';
console.log(value1);
//var jsonArray=JSON.parse(value1).innerJson;
var jsonArray=[{
"id" : 1,
"productName" : "Dell Laptop",
"price" : 1994,
"quantity" :1,
"total":1994
},
{
"id" : 2,
"productName" : "Sony Laptop",
"price" : 1994,
"quantity" :1,
"total":1994
},
{
"id" : 3,
"productName" : "Samsung laptop",
"price" : 1994,
"quantity" :1,
"total":1994
},
{
"id" : 4,
"productName" : "Lenova Laptop",
"price" : 1994,
"quantity" :1,
"total":1994
},
{
"id" : 5,
"productName" : "HP Laptop",
"price" : 1994,
"quantity" :1,
"total":1994
},
]
webix.ready(function(){
grid = webix.ui({
container:"testA",
view:"datatable",
id:"tableData",
columns:[
{ id:"id", header:"", css:"rank", width:50},
{ id:"productName", editor:"text", header:"Product Name", css:"rank", width:200},
{ id:"price", editor:"text", header:"Price",width:100},
{ id:"quantity", editor:"text", header:"Qnty" , width:50},
{ id:"total", header:"Total", width:100},
{ id:"",
template:"<button class='delbtn btn btn-danger btn-xs'> <i class='fa fa-times'>  Delete</i></button>",
css:"padding_less",
width:100 },
{ id:"",
template:"<button class='savebtn btn btn-success btn-xs'> <i class='fa fa-floppy-o'>  Save</i></button>",
css:"padding_less",
width:100 }
],
editable:true,
navigation:true,
editaction:"custom",
autoheight:true,
autowidth:true,
on:{
"onItemClick":function(id){
this.editRow(id);
var rowObject=$$('tableData').getItem(id);
console.log(rowObject);
var totalValue=rowObject.price * rowObject.quantity;
//alert("total "+totalValue);
rowObject.total=totalValue;
addRow(rowObject);
console.log(rowObject);
grid.refresh();
grid.updateItem(id, rowObject);
},
},
data: jsonArray
});
grid.on_click.delbtn=function(e, id, trg){
webix.message("Add row: "+ id);
var rowObject=$$('tableData').getItem(id);
deleteRow(rowObject);
this.remove(id);
//block default onclick event
return false;
};
grid.on_click.savebtn=function(e, id, trg){
//id.column - column id
//id.row - row id
webix.message("Add row: "+ id);
var rowObject=$$('tableData').getItem(id);
addRow(rowObject);
console.log(rowObject);
//block default onclick event
return false;
};
});
function deleteRow(rowObject){
$.ajax({
url:"QuoteDelete",
type:"POST",
dataType: 'json',
data:{username:"username"},
success:function(msg){
/* var jsonData = JSON.parse(msg); */
alert(msg);
},
error:function(){
alert("error");
}
});
}
function addRow(rowObject){
}
</script>
</body>
</html>