When you query for the selected rows, there are two method types: ones that return nodes, and ones that return data items. This is explained in the section Client-Side Row Model. When you pass data to the grid, it wraps each data item in a node object. Use, for example, when you want checkbox selection or your managing selection from a custom component and don't want to select the row when the row is clicked. SuppressRowClickSelection: If true, rows won't be selected when clicked. By default the grid allows deselection of rows. once a row is selected, it remains selected until another row is selected in its place). SuppressRowDeselection: Set to true to prevent rows from being deselected if you hold down Ctrl and click the row (i.e. This is useful for touch devices where Ctrl and Shift clicking is not an option. Clicking a selected row in this mode will deselect the row. For example, if you click to select one row and then click to select another row, the first row will stay selected as well. RowMultiSelectWithClick: Set to true to allow multiple rows to be selected with clicks. 'multiple' allows multiple rows to be selected. 'single' will use single row selection, such that when you select a row, any previously selected row gets unselected. RowSelection: Type of row selection, set to either 'single' or 'multiple' to enable selection. Selecting a row and holding down Shift while clicking a second row will select the range.Ĭonfigure row selection with the following properties: Selecting a row will remove any previous selection unless you hold down Ctrl
This is because it is not possible to cover all scenarios, as a range is no longer a perfect rectangle.Select a row by clicking on it. Range Selection will not work correctly when spanning cells. For example a cell may span 4 rows, however applying a filter or a sort will probably change the requirements of what rows should be spanned. Sorting and filtering will provide strange results when row spanning. The row span assumes default row height is used when calculating how high the cell should be. Row span does not work with dynamic row height or auto-height. if a row spanned cell has focus, and the user hits the 'arrow down' key, the focus will go to a hidden cell. This means cell navigation will go to the other cells - e.g. Overwritten cells will still exist, but will not be visible. Responsibility is with the developer to apply a background style to spanning cells so that overwritten cells cannot be seen. a cell may span outside the grid after the data is sorted and the cell's row ends up at the bottom of the grid). This is especially true if sorting and filtering (e.g. Responsibility is with the developer to not span past the last row. If using Row Spanning, be aware of the following: Row Spanning breaks out of the row / cell calculations that a lot of features in the grid are based on. This is important because if a background was not set, the cell background would be transparent and the underlying cell would still be visible.
It just arbitrarily sets row span on some cells for demonstration purposes.
Row Spanning Exampleīelow is an example using row spanning. The downside to not using transform is performance row animation Having cells extend into other rows is necessary for row span which means it will not work Which constrains CSS z-index from placing cells on top of other cells in another row. The reason row span will not work with CSS transform is that CSS transform creates a JavaScript GPU Animation with Transform and Translate. Transform and instead the grid will use CSS top.įor an explanation of the difference between these two methods see the article
The property suppressRowTransform=true is used to stop the grid positioning rows using CSS
0 kommentar(er)
