Dynamically update client footer

11 posts, 1 answers
  1. Pierre
    Pierre avatar
    28 posts
    Member since:
    Jun 2012

    Posted 22 Jun 2012 Link to this post

    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
  2. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 27 Jun 2012 Link to this post

    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!
  3. Pierre
    Pierre avatar
    28 posts
    Member since:
    Jun 2012

    Posted 06 Aug 2012 Link to this post

    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
  4. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 09 Aug 2012 Link to this post

    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!
  5. Pierre
    Pierre avatar
    28 posts
    Member since:
    Jun 2012

    Posted 09 Aug 2012 Link to this post

    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 
  6. Answer
    Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 13 Aug 2012 Link to this post

    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!
  7. Pierre
    Pierre avatar
    28 posts
    Member since:
    Jun 2012

    Posted 15 Aug 2012 Link to this post

    Thanks, that worked great.
  8. Young-Min
    Young-Min avatar
    1 posts
    Member since:
    Mar 2014

    Posted 19 Mar 2014 Link to this post

    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



  9. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 24 Mar 2014 Link to this post

    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.

     
  10. Kiran
    Kiran avatar
    28 posts
    Member since:
    Jul 2014

    Posted 24 Feb 2015 in reply to Daniel Link to this post

    But its not updating the aggregate value, the total value in Footer.
  11. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 27 Feb 2015 Link to this post

    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.

     
Back to Top