I have Multigrid component that I using as Table for displaying data that changing every 1 second. Not all data have changing but 1-6 cells. This leads to jump to the top of the component every time so the content couldn't be viewed. Is there any way to avoid this behaviour?
What I'm talking about: https://imgur.com/a/QiXn2el
Related
I have a Multigrid component with 12 columns and 300 rows. When the value of one cell changed the whole component is rendered. I can see it in the profiler and visually component is scrolled to the top. Is this intended behavior and this component or maybe whole library is not suit for lists that will updates frequentelly?
P.S. every cell has unique key based on remote data. In pure react table the problem I've described is not exist.
I have noticed that when I have cells with a lot of text, the table will not scroll vertically. As I scroll down, the table jumps back to the top. The behavior is a function of the amount of content and the width of the column. A wider column can handle more content before this behavior is seen.
I thought this was due to my own custom formatter, but it also happens for the textarea and html formatters.
This can happen if the row content is significantly longer than the height of the table.
In this case you can improve the scroll stability by increasing the size of the virtual dom render buffer on the table. this is the amount of space that the table renders above and below the table to allow smooth scrolling.
It is be default set to 2 times the height of the table. You should make sure it is at least 5 times the height of your tallest row.
This can be done using the virtualDomBuffer option in the table constructor:
var table = new Tabulator("#example-table", {
virtualDomBuffer:300, //set virtual DOM buffer to 300px
});
More information on this can be found in the Virtual DOM Documentation
Though from a user experience perspective i would query whether a table is the best way to layout data if it takes up a large vertical space. It would probably be clearer to display summary information in rows, and then use either a rowFormatter to toggle a details section under the row, or a modal to show more detail
I have an AgGrid, I'm simulating row grouping by rendering a table within a full width row.
Each time a row is "expanded", a full width row appears below it with it's own table contents.
Each time a row is "expanded" I also increase the amount of rows per Pagination Page (this keeps the last row's child on the same page even if the pagination page is full. (It should also be stated that only one child can be expanded at a time))
The issue I'm having is if a user changes pages (I.E. from page 1 to page 2) while there is a an expanded record on page 1, it will mess up future "expands" (since the rowsPerPage did not have an opportunity to reduce itself again)
I'm looking for a way to redraw the table when the page is changed, but if i use onPaginationChanged it triggers every time a row is expanded (Since the PagniationPageSize changes dynamically on row-expansion)
Is there a way to trigger an event each time a user directs to a new page, but not when the Pagniation Page Size changes.
Thank you and sorry in advance.
you may use newPage property to check if the page has changed.
onPaginationChanged(params) event provides params object which contains newPage property which is set to true only when page is changed. If for some reason page size has changed or any other operation is performed which does not change the page number then this property is false
plunkrLink
I'm playing around a bit with Kendo UI for Angular and can't seem to find an easy way to disable sorting on specific columns of a grid.
There's an allowUnsort in sort-settings.d.ts, but I'm uncertain on how to use this (and this appears to relate to removing sorting afterwards, not from the start).
Or perhaps I'm simply using the grid wrong, that's also possible..
My situation is as follows:
I'm trying to use a grid to display some rows, and depending on the type of data, it should render a different icon in the first column. Also, I'm not using a 'real' header in that column, but replaced it with a button to create a new row.
To get my button in the header, I use a <template kendoGridHeaderTemplate ...>...</template>. This always seems to add a link around the header cell if sortable is enabled, which is what I'm trying to avoid (in some cases).
Is there a way around this?
Setting [sortable]="true" for the Grid component will enable sorting globally. Then you can fine-tune which column has sorting by disabling it per column, i.e [sortable]="false"
Here is a quick example:
http://plnkr.co/edit/hLbzC5jKJwVdMtRmh0cH?p=preview
I am trying to figure out the best approach for something - I have added an additional table to the Sales Order screen as a new tab and it works fine to save records into it. The next thing needed is to potentially explode a value into many lines if it is a certain type. So if they enter a "kit" into my grid/tab - we would want to replace the kit with its components and not have the kit in the grid anymore.
I know how to insert the records etc. My biggest concern is which event to do the work under (field or row level and -ed vs -ing) . I know I could potentially create an endless loop if I don't do it properly.
**edit - I tried using RowInserting - I can cancel the inserting and add my records in there - however it does not trigger the screen to refresh from the cache. If i Save the order - it will display my new rows properly. however, i dont want to do a save in my code. I am also concerned about it triggering another rowinserting.
With rowinserted - it seems to be the same with the screen not refreshing and also i get an error about the row that i deleted.
We had a similar request and what we did is instead of adding the item in grid level and waiting for a trigger, we added a grid tool bar button that pops up a small smart panel to select the kit item, its version and the quantity required. Then we inserted the component lines to the grid with required calculations.