Auto calculate Kendo Grid Column - model-view-controller

Question

I want to Auto calculate Kendo Grid Column on client side. My code is
#(Html.Kendo().Grid(Model)
.Name("VATGrid")
.Columns(columns =>
{
columns.Bound(p => p.BaseAmount);
columns.Bound(x => x.Unit);
columns.Bound(p => p.VATPercentage);
columns.Bound(p => p.VATAmount)
.HeaderHtmlAttributes(new { title = "VAT Amount" })
.HtmlAttributes(new { style = "text-align:right" })
.Title("VAT Amount")
.ClientTemplate(
"#= VATAmount=kendo.toString(BaseAmount*Unit*VATPercentage, 'n2')#" +
"<input type='hidden' class='VATAmount' value='#=kendo.toString(BaseAmount*Unit*VATPercentage, 'n4')#' />");
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.DocumentVATID);
model.Field(x => x.CompanyVATType).Editable(false);
model.Field(x => x.VATPercentage).Editable(false);
model.Field(x => x.VATType).Editable(false);
model.Field(x => x.BaseAmount).DefaultValue(0);
model.Field(x => x.Unit).DefaultValue(0);
})
)
Where I am able to get Auto calculated value but after clicking on the Grid Cell.
I want to show calculated value on change itself

Answer 1

Something like this?
#(Html.Kendo().Grid(Model)
.Name("VATGrid")
.Columns(columns =>
{
columns.Bound(p => p.BaseAmount);
columns.Bound(x => x.Unit);
columns.Bound(p => p.VATPercentage);
columns.Bound(p => p.VATAmount)
.HeaderHtmlAttributes(new { title = "VAT Amount" })
.HtmlAttributes(new { style = "text-align:right" })
.Title("VAT Amount")
//.ClientTemplate(
//"#= VATAmount=kendo.toString(BaseAmount*Unit*VATPercentage, 'n2')#" +
//"<input type='hidden' class='VATAmount' value='#=kendo.toString(BaseAmount*Unit*VATPercentage, 'n4')#' />");
//})
.ClientTemplate(
"<span id="vatId">#= VATAmount=kendo.toString(BaseAmount*Unit*VATPercentage, 'n2')#</span>" +
"<input type='hidden' class='VATAmount' value='#=kendo.toString(BaseAmount*Unit*VATPercentage, 'n4')#' />");
})
//put span tag around the clienttemplate above
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Events(e => e.Change("onProductChange")) //add this event listener
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.DocumentVATID);
model.Field(x => x.CompanyVATType).Editable(false);
model.Field(x => x.VATPercentage).Editable(false);
model.Field(x => x.VATType).Editable(false);
model.Field(x => x.BaseAmount).DefaultValue(0);
model.Field(x => x.Unit).DefaultValue(0);
})
)
<script type="text/javascript">
function onChange(e) {
var selected = $.map(this.select(), function (item) {
return $(item).text();
});
console.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
//TODO: calculate your data and use calc variables below
var calc1 = 0;
var calc2 = 0;
$("#vatId").text(calc);
$(".VATAmount").val(calc2); //or something like that, but you get the grip
}
</script>
Perhaps I´m misunderstanding your problem but it sounds to me as if you want to calculate the data in your footertemplate each time a cell is selected.