Dynamically update client footer

[Pierre]

Hi,

@(Html.Kendo().Grid(Model.Products)

    .Name("FabricGrid")

    .Columns(columns =>

    {

        columns.Bound(p => p.Fabric).ClientFooterTemplate("Fabric Count: #=count#");

        columns.Bound(p => p.Pattern);       

        columns.Bound(p => p.UPrice).Format("{0:c}");

        columns.Bound(p => p.Qty).Width(120).ClientFooterTemplate("Total :").Format("{0:0.00}");

        columns.Bound(p => p.Total).ClientTemplate("#= kendo.format('{0:c}', Qty * UPrice) #").ClientFooterTemplate("#= kendo.format('{0:c}', sum)#");

 

        columns.Command(command => command.Edit()).Width(110);

        columns.Command(command => command.Destroy()).Width(110);

    })

    .Scrollable()

    .Sortable()   

    .Editable(editable => editable.Mode(GridEditMode.InLine))

    .DataSource(dataSource => dataSource

        .Ajax()

        .ServerOperation(false)

        .Aggregates(aggregates =>

        {

            aggregates.Add(p => p.Fabric).Count();

            aggregates.Add(p => p.Total).Sum();

        })

        .Model(model => model.Id(p => p.ProductId))

        .Events(events => events.Error("error_handler"))

        .Update(update => update.Action("Product_Update", "ShoppingCart"))

        .Destroy(destroy => destroy.Action("Product_Delete", "ShoppingCart"))

    )

)

I have the above grid which displays the total price of the order in the grid's footer.  The footer total is updated automatically when I delete a row.  When I edit a row and change the value in the qty column, the row total column is updated correctly ClientTemplate("#= kendo.format('{0:c}', Qty * UPrice) but the footer total does not change .ClientFooterTemplate("#= kendo.format('{0:c}', sum)#").

Also, how do you justify the column display?  I want the numbers to be right justified to they all lineup like in excel.

thanks

[Daniel]

Hello Pierre,

The footer is not updated because it shows the aggregate for the Total property which is not changed. In order to update the aggregate, you could modify the Total value in the Grid save event by using the model set method e.g.

function save(e) {
    e.model.set("Total", e.model.Qty  * e.model.UPrice);
}

Regarding the right alignment, you could use text alignment applied to the cell or to an element in the template to achieve this look. For example:

columns.Bound(p => p.UPrice).Format("{0:c}").HtmlAttributes(new { style = "text-align:right;" });

Regards,
Daniel
the Telerik team

[Pierre]

Daniel,

I'm finally back on the project! 

The HtmlAttributes works but does require the new version of KendoUI mvc. 

As for the save function, it's not doing what I want.  I've added:

.Events(ev => ev.Save("function(e) { e.model.set('Total', e.model.Qty  * e.model.UPrice);}"))

to the deffinition of the grid but that only totals the the current column and displays the result in the "Total" column which already works without that line of code.  What I want is to update the total on the footer of the grid, it should show the total of all the rows for the Total column (see attached image).

Thanks,

Pierre

[Daniel]

Hello Pierre,

I am not sure if I understand correctly the issue. Setting the new value of the Total property in the save event will trigger the change event and the aggregates for the column will be recalculated and the footer should be updated. If this is not the behavior on your side, please provide a sample project that reproduces the problem so I can investigate what exactly goes wrong. 

Regards,
Daniel
the Telerik team

[Pierre]

Daniel,

Attached is a sample project with the problem described.  Edit a row and change the qty.  Click Update and you'll see that value column is updated properly but the total in the footer is not.

Thanks,

Pierre 

[Daniel]

Hello Pierre,

The problem occurs because the Total property is not editable. In this case the set method will not apply the changes to the model and the aggregates will not be updated. If the field should not be editable, you can return the updated object as result of the Update action which will change the value in the Grid model. I attached the project modified to use this approach. 

Regards,
Daniel
the Telerik team

[Pierre]

Thanks, that worked great.

[Young-Min]

How do I  align center the grid header text?

@(Html.Kendo().Grid(Model)
     .Name("List")
     .Columns(columns => {
          columns.Bound(x => x.seq).Title("No")

This will be left-aligned. Help me, Thanks

[Daniel]

Hello Young-Min,

This question is not related to the topic of this thread. Please open a new thread instead of posting your questions in a thread not related to the problem that you are experiencing.

Regarding the question - you can add a style or a class to the header via the HeaderHtmlAttributes method in order to achieve this e.g.

columns.Bound(x => x.seq).Title("No").HeaderHtmlAttributes(new { style = "text-align:center;" });

Regards,
Daniel
Telerik

 

 

[Kiran]

But its not updating the aggregate value, the total value in Footer.

[Daniel]

Hello Kiran,

Are you referring to the sample project from this thread? The footer value is updated with the sample at least on my side. 

Regards,
Daniel
Telerik

 

 

[Peter]

I don't understand how the footer totals are updated using your example.

In your controller you are returning an updated model to the view which will of course update the view with new values but how is that updating the ClientFooterTemplate values with new totals when the footer totals are not part of the model.  The footer totals are a sum of the model values.

.

[Anton Mironov]

Hi Peter,

In general, the Client Templates are working this way. You are totally correct-they are not a part of the model. Every time a model is changed the Template handles the event and re-calculate out of the box.

I hope this information helps.

Kind Regards,
Anton Mironov
Progress Telerik