datatable on change event not triggering

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'>&nbsp Delete</i></button>",	
						css:"padding_less",
						width:100 },
					{ 	id:"", 
						template:"<button class='savebtn btn btn-success btn-xs'> <i class='fa fa-floppy-o'>&nbsp 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>

Hi,

I did not find onchange event in your code. But possibly onAfterEditStop event will do:

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

Please use http://webix.com/snippet/ to create demos.