Hi Team ,
I have designed a page with datatable having custom check box in its first column and a footer which does the total of “fee” column.
How can i change the value of footer total : i.e basically i want to add/substract the total with the fee column value on-click of the respective custom checkbox.
Please find the complete code below.
Counter in the footer <link rel="stylesheet" type="text/css" href="../common/samples.css">
<style type="text/css">
.checked{
color:green;
font-weight: bold; cursor:pointer;
}
.notchecked{
color:red;
font-weight:bold; cursor: pointer;
}
</style>
</head>
<body>
<div class='header_comment'>Counter in the foo1ter</div>
<div class='sample_comment'>Type any text to filter the grid.</div>
<div id="testA"></div>
<script type="text/javascript" charset="utf-8">
var small_film_set = [
{ id:1, doctorName:"Piyush C", date:"20/04/2014", fee:200},
{ id:2, doctorName:"Meera mehra", date:"22/04/2014", fee:250},
{ id:3, doctorName:"Naidu B", date:"24/04/2014", fee:300},
{ id:4, doctorName:"Roseiz", date:"01/05/2014", fee:100},
{ id:5, doctorName:"Antony", date:"20/06/2014", fee:100},
{ id:6, doctorName:"Lehar M K", date:"23/06/2014", fee:500}
];
webix.ready(function(){
grid = new webix.ui({
container:"testA",
view:"datatable",
columns:[
{ id:"rank", header:"Pay?", template:custom_checkbox, css:"rank", width:50, sort:"int",
footer:{text:"Total:", colspan:2}
},
{ id:"doctorName", header:["Dr. Name"], width:200 },
{ id:"date", header:"Date" , width:80, sort:"int"},
{ id:"fee", header:"Fee", width:100, sort:"int",
footer:{ content:"summColumn" }
}
],
autoheight:true,
autowidth:true,
data:small_film_set,
footer:true,
checkboxRefresh:true,
});
function custom_checkbox(obj, common, value){
if (value){
//alert(obj.doctorName);
return "<div class='webix_table_checkbox checked'> YES </div>";
}
else{
//alert(obj.doctorName);
return "<div class='webix_table_checkbox notchecked'> NO </div>";
}
};
});
</script>
</body>