[Solved] Run aggregate after user finishes editing cell calculated grid columns

[Tausif]

Hi,

I have a grid which has calculated columns UnitPrice * UnitsInStock this works as expected. The problem I'm having is with the UnitsInStock total, I'm using aggregates to calculate the total number of UnitsInStock. If a user edits a cell in the column UnitsInStock the total Instock is not updated I suspect this is because its not being saved first. Is there anyway of running the aggregates sum() for UnitsInStock via a function?

I would prefer doing this client side before saving the model back to the server, I don't want to really redraw the grid or go back to the controller.

Any ideas on how to do this? 

Thanks

I have attached my code below:

<div style="padding-top:50px;">
    Calculated Columns UnitPrice * UnitsInStock
    @(Html.Kendo().Grid(Model)
    .Name("Grid1")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice).Width(140);
        columns.Bound(p => p.UnitsInStock).Width(140)
            .FooterTemplate(@<text>In Stock: @item.Sum</text>);

        columns.Bound(p => p.Total).Width(140)
             .ClientTemplate("#=UnitPrice * UnitsInStock #");

    })
                     .ToolBar(toolbar =>
                     {
                         toolbar.Create();
                         toolbar.Save();
                     })
                     .Editable(editable => editable.Mode(GridEditMode.InCell))
                     .Pageable()
                     .Navigatable()
                     .Sortable()
                     .Scrollable()
                     .DataSource(dataSource => dataSource
                         .Ajax()
                         .Batch(true)
                         .PageSize(20)
                         .ServerOperation(false)
                         //.Events(events => events.Error("error_handler"))
                         .Events(events => events.Sync("_Editing"))
                         .Model(model => model.Id(p => p.ProductID))
                         //.Create("Editing_Create", "Home")
                         //.Read("Editing_Read", "Home")
                         .Update("Editing_Update", "Home")
                         .Destroy("Editing_Destroy", "Home")
                         .AutoSync(true)
                         .Aggregates(aggregates =>
                         {
                             aggregates.Add(p => p.UnitsInStock).Sum();
                         })
                         

                     )
    )
</div>
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }


    function _Editing(e)
    {
      

            alert("finished editing" + e.type);
    }


</script>

[Daniel]

Hello,

Could you try with the ClientFooterTemplate method instead of FooterTemplate:

columns.Bound(p => p.UnitsInStock).Width(140)
    .ClientFooterTemplate("In Stock: #:sum#");

The FooterTemplate method should be used only when the grid is configured.
As for the aggregates - since you are using client-side operations the aggregates will be recalculated automatically on each change. Also, in the code that you provided it seems that the autoSync options is enabled in which case the grid will also be redrawn and will show the new value on sync.

Regards,
Daniel
Telerik

 

 

[Tausif]

That works. Thanks