Horizontal Scrolling Footer

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

    Posted 15 Oct 2012 Link to this post

    Hi,

    I have a grid with many columns.  All columns don't fit on 1 screen so the horizontal scroll bar appears automatically.  The grid has data in the footer (column totals etc..).  The problem is when I scroll left/right, the footer does not scroll so I can never see that part of the grid end of the footer.

    Is there anyway to make the footer scroll with the rest of the column the way the header works?

    Thanks,

    pt
  2. Dimo
    Admin
    Dimo avatar
    8454 posts

    Posted 15 Oct 2012 Link to this post

    Hi Pierre,

    This problem has already been fixed. In case you are using an old version of Kendo UI, please upgrade.

    Greetings,
    Dimo
    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 15 Oct 2012 Link to this post

    Hi,

    I've re-downloaded the kendoUI MVC package from the Telerik control panel.  I copied all the kendo *.js to my project's script folder and doubled check that I'm using the correct kendo.mvc.dll in my reference and no luck.  The footer still does not scroll.

    The changelog.html tells me that I'm running version v2012.2.913.

    What am I doing wrong?  is there a newer version?  The trial download says v2012.2.710

    Thanks,

    pt
  4. Dimo
    Admin
    Dimo avatar
    8454 posts

    Posted 15 Oct 2012 Link to this post

    Hi Pierre,

    Please refer to the following jsFiddle example, which uses Kendo UI 2012.2.913 and is based on our Aggregates demo, with scrolling enabled and column widths set.

    http://jsfiddle.net/dimodi/pcDq5/

    Regards,
    Dimo
    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 15 Oct 2012 Link to this post

    Hi Dimo,

    I don't see how the demo and the fiddle show horizontal scrolling.  The width of the grid is fixed and shrinking the width of the browser adds horizontal scroll bar to the page which is not what I'm looking for.  I need to grid to occupy the full width of the browser, it needs to have fixed size columns and when I scroll the grid's horizontally the columns move left and right.  I need the header and the footer to move with the columns.  The header part works fine but the footer does not move.

    Thanks,

    Pierre
  6. Dimo
    Admin
    Dimo avatar
    8454 posts

    Posted 15 Oct 2012 Link to this post

    Hi Pierre,

    If you remove the Grid width, the footer will still scroll. Feel free to modify the jsFiddle until a problem is exhibited and send it back for inspection.

    Greetings,
    Dimo
    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 Oct 2012 Link to this post

    Dimo,

    Thanks for your quick reply but I don't think we understand each other.  Somehow on your fiddle the entire grid is fixed even if I change the width to 100%.

    Please have a look at my grid at http://trinephi.crabdance.com/test/JobReview/JobList if you scroll the grid left/right, you'll see that the footer does not move.

    Note that with chrome the header does not scroll either eventough it does scroll on IE and FF.

    Thanks,

    pt
  8. Dimo
    Admin
    Dimo avatar
    8454 posts

    Posted 16 Oct 2012 Link to this post

    Hello Pierre,

    The example that you have provided does not work at all, because the jQuery and Kendo UI scripts are not registered (invalid URLs returning 404). This leads to a bunch of Javascript errors.

    On a side note, the example is uploaded on a domain that is blocked by our firewall due to reported and verified serving of malware. As a result, I will ask you to send examples only via jsFiddle / jsBin or as attachments in the future.

    Here is your Grid in jsFiddle with horizontal scrolling working as expected:

    http://jsfiddle.net/dimodi/F55VE/

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Pierre
    Pierre avatar
    28 posts
    Member since:
    Jun 2012

    Posted 16 Oct 2012 Link to this post

    Dimo,

    The fiddle you sent does not have a horizontal scroll bar!  The grid resizes itself as you resize the browser or move the center divider.  Imagine you're running your app on a tablet (ipad or others) with a limited width.  The browser is maximized on the screen and the grid is too large to fit on the screen.  You want the grid to have a fixed size and you don't want to scroll with the browser's scroll bar because there are things around the grid that need to be visible at all time.  

    Attached is a screen image that should help explain.  The red arrow shows the grid's scroll bar.  The yellow arrow shows the footer that's out of sync with the rest of the grid (columns don't align).  The Green box shows the header is in sync with the columns.  At the bottom of the browser there's no scroll bar.

    Thanks again,

    pt
  10. Dimo
    Admin
    Dimo avatar
    8454 posts

    Posted 16 Oct 2012 Link to this post

    Hi Pierre,

    Please see the attached video.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Pierre
    Pierre avatar
    28 posts
    Member since:
    Jun 2012

    Posted 16 Oct 2012 Link to this post

    Dimo,

    Thanks for the video, that's exactly what I wanted!  I'm a bit embarrassed because I use chrome to do my "research" browsing and IE and FF for testing my apps.  Well, your fiddler does not work properly on Chrome but work fine on FF and IE!  I should've tried those! Having said that, my app does not work on IE or FF, the horizontal scroll does not scroll the footer.  How can I check what version of kendoUI MVC Extension I'm running?  

    Thanks,

    pt
  12. Answer
    Dimo
    Admin
    Dimo avatar
    8454 posts

    Posted 18 Oct 2012 Link to this post

    Hello Pierre,

    If you open one of our Javascript files (e.g. kendo.all.min.js or kendo.web.min.js) you will see the version in a comment at the top:

    /*
    * Kendo UI Complete v2012.2.913 (http://kendoui.com)
    * Copyright 2012 Telerik AD. All rights reserved.
    *
    * Kendo UI commercial licenses may be obtained at
    * If you do not own a commercial license, this file shall be governed by the trial license terms.
    */


    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Pierre
    Pierre avatar
    28 posts
    Member since:
    Jun 2012

    Posted 19 Oct 2012 Link to this post

    Works great, Thanks
Back to Top