Kendo grid alignment

4 posts, 0 answers
  1. Baskar
    Baskar avatar
    3 posts
    Member since:
    Mar 2013

    Posted 13 Jun 2013 Link to this post

    Hi,

    I have two kendo grids which needs to be placed side by side (Both the grids uses same controller method).

    My requirements.

    1. Have to load >50000 rows(shouldn't take much time to load).
    2. Scrolling should be in sync.
    3. Paging should not be applied.
    4. Column width should be auto.
    5. Row height should be same for both the grids so that scrolling make sense.

    Please share a demo on this.
  2. Dimo
    Admin
    Dimo avatar
    8445 posts

    Posted 14 Jun 2013 Link to this post

    Hello Baskar,

    1) & 3) 50,000 rows without paging require virtual scrolling.

    2) Synchronization between the two Grids' scroll positions can be achieved by subscribing to the scroll event of each Grid's virtual scroller.

    <div class="k-widget k-grid">
        <div class="k-grid-content">
            <div class="k-scrollbar k-scrollbar-vertical"></div>
        </div>
    </div>

    The attached scroll event handler will move the scroll position of the other Grid to the same position.

    4) Automatic table layout with column widths that depend on the content require disabled scrolling. In other words, there is a conflict in your requirements and they cannot be achieved all at the same time.

    5) Equal row height can be achieved by applying suitable CSS styles to the Grid, for example some appropriate height to all table cells.

    .k-grid  .k-grid-content  td
    {
        height: 30px;
        white-space: nowrap;
    }


    Disabled text wrapping may not be required. It depends on your preferences and text data to be shown.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Baskar
    Baskar avatar
    3 posts
    Member since:
    Mar 2013

    Posted 14 Jun 2013 Link to this post

    I have tried with these, but its not working

    $("#dgStoreMaintenance .k-scrollbar k-scrollbar-vertical").on("scroll", function () {
    var scrollPosition = $(this).scrollTop();
    $("#dgCustomer .k-scrollbar k-scrollbar-vertical").scrollTop(scrollPosition);
    });

    $("#dgStoreMaintenance .k-scrollbar-vertical").on("scroll", function () {
    var scrollPosition = $(this).scrollTop();
    $("#dgCustomer .k-scrollbar-vertical").scrollTop(scrollPosition);
    });

    Can you please suggest if i am using it in a wrong way.
  4. Dimo
    Admin
    Dimo avatar
    8445 posts

    Posted 17 Jun 2013 Link to this post

    Hello Baskar,

    The following selectors are invalid:

    $("#dgStoreMaintenance .k-scrollbar k-scrollbar-vertical")

    $("#dgCustomer .k-scrollbar k-scrollbar-vertical")


    There are two errors in each selector:

    1. CSS classes should always start with a dot  (.k-scrollbar-vertical)
    2. CSS classes applied to the same element should not have a space between them (k-scrollbar and k-scrollbar-vertical)

    Actually you don't have to specify both CSS classes in this case.

    Since jQuery selectors are based on CSS selectors, I strongly recommend the following tutorial:

    http://css.maxdesign.com.au/selectutorial/

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