Auto calculate Kendo Grid Column

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

gardarvalur gardarvalur · Accepted Answer · 2015-04-13T09:45:15

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.

Auto calculate Kendo Grid Column

1 Answers