Don't Print Large Dataĭo not use this technique for printing if you are showing a large number of rows or columns. This makes print layout best for non-interactive grids (ie for printing) as you will loose animations and changes to the grid will be expensive (the grid redraws everything on every change). If just one row is added / removed, or a filter or sort is applied, the entire DOM is removed and all rows are inserted again from top to bottom. ![]() ![]() When in print layout the grid will redraw the entire grid any time there is a change to the rows. When in print mode, the rows are laid out in the order they appear in the dom - this makes things such as page breaks possible but removes the possibility of animations. This happens usually after filtering or sorting. In other words normally the grid places each row using exact pixel positioning - this makes things such as row animation possible where the grid moves the row by changing absolute pixel position and uses CSS transition for the row to animate to the new location. When the grid is in print layout, the grid does not use absolute positioning for the rows, rather the rows are laid out using normal flow. This group row is included in print layout as normal. The data is grouped and the group row spans the width of the grid.When in print layout, the column is not pinned as pinning makes no sense when there are no horizontal scrolls. Set the grid back to normal when the print dialog is closed.Wait for two seconds (to allow the browser to redraw with the new settings) and then bring up the print dialog.Remove the height and width settings from the grid to allow the grid to auto-fit it's size.When 'Print' is pressed, the grid will do the following: From the example, the following can be noted: Detailed Printing Exampleīelow shows a more detailed example and also automatically shows the print dialog. ![]() When in print layout all rows will have the CSS property page-break-inside: avoid so rows will not be split across pages (eg the top half of the row on one printed page with the other half on the next printed page). If using print layout, make sure you have no width or height set for the grid.Īll the examples on this page set width and height initially on the grid and then remove the width and height when print layout is set. For this to work the application should not set a width or height onto the grid component. The grid width and height will adjust automatically to fit the contents of all cells. setDomLayout ( 'print' ) // resetting the layout back to normal this. setting the grid layout to 'print' this. Similarly the layout can be set back to normal by unsetting the domLayout property or calling the grid API setDomLayout(null). Print layout can be turned on by setting the property domLayout='print' or by calling the grid API setDomLayout('print').
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |