Grid Footer does not scroll

[Matt]

Hi there,

Just wanted to let you know that I think I found a bug that the grid footer does not scroll horizontally like the header does. Here's an example http://jsfiddle.net/mtrichards26/zCZGF/6/

Here's what I did locally to make this work (in the grid's _footer and _wrapFooter functions, changes preceded with //CHANGE)

_footer: function() {

           var that = this,

               aggregates = that.dataSource.aggregates(),

               html = "",

               footerTemplate = that.footerTemplate,

               options = that.options;

 

           if (footerTemplate) {

               html = $(that._wrapFooter(footerTemplate(aggregates || {})));

 

               if (that.footer) {

                   var tmp = html;

 

                   that.footer.replaceWith(tmp);

                    

                   that.footer = tmp;

               } else {

                   if (options.scrollable) {

                       that.footer = options.pageable ? html.insertBefore(that.wrapper.children("div.k-grid-pager")) : html.appendTo(that.wrapper);

                        

                      //CHANGE: Have scroll event move .k-grid-footer-wrap                      

                      var scrollables = that.footer.children('.k-grid-footer-wrap');

 

                      that.content.bind('scroll', function () {

                           scrollables.scrollLeft(this.scrollLeft);

                   });

 

                   } else {

                       that.footer = html.insertBefore(that.tbody);

                   }

               }

           }

       },

 

       _wrapFooter: function(footerRow) {

           var that = this,

               html = "",

               columns = that.columns,

               idx,

               length,

               groups = that.dataSource.group().length,

               column;

 

           if (that.options.scrollable) {

               //CHANGE: Add extra div with .k-grid-footer-wrap

               html = $('<div class="k-grid-footer"><div class="k-grid-footer-wrap"><table cellspacing="0"><tbody>' + footerRow + '</tbody></table></div></div>');

               that._appendCols(html.find("table"));

 

               return html;

           }

 

           return '<tfoot>' + footerRow + '</tfoot>';

       },

Also, I thought I posted this yesterday but didn't see it today so if its a duplicate please feel free to delete this post.

Thanks,
Matt

[Dimo]

Hello Matt,

Thanks for pointing this out. Indeed, it is an oversight of ours, which has been fixed immediately and changes will take effect in the next Kendo internal build. Our fix is a little different, because it takes into consideration some other scenarios as well. The k-grid-footer-wrap div is exactly what is needed in terms of HTML.

I have updated your Telerik points.

All the best,
Dimo
the Telerik team