This is a migrated thread and some comments may be shown as answers.

Dynamically update client footer

12 Answers 1058 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Pierre
Top achievements
Rank 1
Pierre asked on 22 Jun 2012, 12:07 PM
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

12 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 27 Jun 2012, 07:39 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pierre
Top achievements
Rank 1
answered on 06 Aug 2012, 11:22 AM
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
0
Daniel
Telerik team
answered on 09 Aug 2012, 09:15 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pierre
Top achievements
Rank 1
answered on 09 Aug 2012, 01:31 PM
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 
0
Accepted
Daniel
Telerik team
answered on 13 Aug 2012, 08:14 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pierre
Top achievements
Rank 1
answered on 15 Aug 2012, 10:09 AM
Thanks, that worked great.
0
Young-Min
Top achievements
Rank 1
answered on 20 Mar 2014, 12:26 AM
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



0
Daniel
Telerik team
answered on 24 Mar 2014, 11:24 AM
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
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
0
Kiran
Top achievements
Rank 1
Veteran
answered on 25 Feb 2015, 01:52 AM
But its not updating the aggregate value, the total value in Footer.
0
Daniel
Telerik team
answered on 27 Feb 2015, 03:43 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Peter
Top achievements
Rank 1
answered on 16 Dec 2020, 07:24 AM

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.

.

0
Anton Mironov
Telerik team
answered on 21 Dec 2020, 06:36 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Pierre
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Pierre
Top achievements
Rank 1
Young-Min
Top achievements
Rank 1
Kiran
Top achievements
Rank 1
Veteran
Peter
Top achievements
Rank 1
Anton Mironov
Telerik team
Share this question
or