Vertical scroll bar is taking/overlay's some width from last grid column. And I have implemented the search functionality on grid, then when matched elements are not found in the grid it show's empty grid. But while displaying empty grid all the grid columns are changing the width. someone help me I am new to extjs
Related
I am using kendo react grid in my application. In the grid there are many columns so there is horizontal scroll bar present now if someone has scrolled the grid to right and performed some actions on the grid now grid will re render and horizontal scroll bar will moved to the right which is not required. I wanted to preserved the value of the kendo react horizontal scroll. How can i get the value of horizontal scroll from the kendo react?
Is there an alternative where react grid can scroll while having a row being dragged to the bottom part of the grid?
I have a react kendo grid like this: Kendo grid with scroll bar
Right now, when there is data, there's a max of 10 rows. The grid height is dynamic, so if there's only 5 rows of data, the grid is smaller than if there are 10 rows, and as you see in the picture, there are no rows of data.
My question is: how do I add the height of the scroll bar so that the content is not clipped below the scroll bar, as shown here? Thank you!
Try updating the KendoReact packages. I have a similar case and the scrollbar is height enough to show the message.
Example here
I have create a Ext.Panel with layout 'hbox', added 4 children, tree grids with the same store and want now to have a single vertical scrollbar for all of them and scroll only the content of the grids and not the headers. I searched through the containing Panel options and scrollable option will scroll the entire layout so, the optional horizontal scrollbars of the children will disappear. Can someone to give me a hint from where to start, what option/component to use to accomplish this single vertical scrollbar?
Why I put 4 tree grids in the same panel using the same store? Because the last one is a Bryntum Gantt component. The first column of the first grid should scroll horizontal when the items are too long and don't want to use ellipsis CSS property on the cells. And from time to time I need to switch the Gantt to another grid with more details. Also the second tree has only dates columns on them and have to be locked whenever gantt or other child toggles visibility.
I use ExtJS 6.0.1 Classic.
Thanks in advance
Because you want to keep the headers, you cannot use the panel scroller. Instead, you have to create mutual partnerships between the grid scrollers:
Ext.each(grids,function(grid) {
if(grid.normalGrid) grid = grid.normalGrid; // Use the normal subgrid of a grid with locked columns.
Ext.each(grids,function(partner) {
if(partner.normalGrid) partner = partner.normalGrid; // Use the normal subgrid of a grid with locked columns.
if(grid != partner) grid.getView().getScrollable().addPartner(partner.getView().getScrollable(), "y"); // "y" tells the scrollable that the partnership is only regarding y axis.
});
});
This forces them to stay in sync, as per the docs.
I have disabled UI Grid vertical scroll bar and have just page scroll bar with more than 200 records displayed at a time.
But when the page is scrolled the grid headers are not visible on the screen.
Also the horizontal scroll bar is present right at the bottom of the screen making it inconvenient as the user would have to scroll right till the bottom to access it making the grid column headers invisible.