adding footer to grid

8 posts, 0 answers
  1. Phil
    Phil avatar
    21 posts
    Member since:
    Nov 2012

    Posted 26 Nov 2012 Link to this post

    how do I add a footer to the grid? the only examples I found were column footers on http://docs.kendoui.com/api/web/grid and it was for text

    Is there something like rowTemplate for adding footer templates?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 29 Nov 2012 Link to this post

    Hello Phil,

    I am not quite sure if I understand you scenario correctly. Generally speaking in the columns' footer template you can include the needed information for each column. For example: 
    $("#grid").kendoGrid({
      //...
      columns: [
         //....
         { field: "MyField", width: 100, footerTemplate: '<img src="http://..."/>Custom footer text'}],
    });

    In case you are requesting different functionality please elaborate a bit more.

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Phil
    Phil avatar
    21 posts
    Member since:
    Nov 2012

    Posted 29 Nov 2012 Link to this post

    kinda like how you have rowTemplate to replace the whole template for all rows, I need one to add a footer row to the grid widget.

    what you listed is the template for a column's cell in group footer item.

    eg. I have a gird with 5 columns, and I just want a tfoot that did a colspan="5" with a grey background with no content and 25px height. how would I do that?
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 04 Dec 2012 Link to this post

    Hello Phil,

    You could achieve this configuring the grid as pageable and setting the configuration options of the pager to false. For example: 
    <script>
    $("#grid").kendoGrid({
      //....
       pageable: {
        info: false,
        refresh: false,
        pageSizes: false,
        previousNext: false,
        numeric: false,
          //.... 
       }
    });
    </script>
    <style>
       .k-grid-pager{
           height: 25px;
        }
    </style>

    Regards,

    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Phil
    Phil avatar
    21 posts
    Member since:
    Nov 2012

    Posted 11 Dec 2012 Link to this post

    Thanks Iliana, that added the table footer

    but when I do a width: 100%; on k-grid-pager (grid is fluid) it goes over by like one pixel more.

    even when I my custom css for the grid

    looks fine with width: 99.5%

    is this because of setting all to false? I'm using this

        .Pageable(pageable => {
            pageable.Info(false);
            pageable.Refresh(false);
            pageable.PageSizes(false);
            pageable.PreviousNext(false);
            pageable.Numeric(false);
        })

    the k-grid-pager itself is just a 2 pixel strip of grey unless I add a width attribute to it
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 13 Dec 2012 Link to this post

    Hi Phil,

    It is good to know that the footer is added. As for your new question - I am not quite sure if I understand it correctly. In order to assist you best, please elaborate a bit more? 

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. RGW
    RGW avatar
    2 posts
    Member since:
    Jun 2015

    Posted 20 Apr 2016 in reply to Iliana Nikolova Link to this post

    Is it possible to add a note or memo in the pager area that spans the width of the grid?

  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 25 Apr 2016 Link to this post

    Hi Ramona,

    This requirement is not supported out-of-the-box, however you could achieve it by using additional JavaScript. As an example: 
    $(".k-grid-pager").append("<p>Custom element</p>");


    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top