Kendo grid alignment

[Baskar]

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.

[Dimo]

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

[Baskar]

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.

[Dimo]

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