Custom Toolbar on Mouse Over Grid Rows
In cases when you need to perform some action in the Grid component, you may use a control panel or a toolbar outside of the grid. The IntegralUI Grid comes with built-in functionality that allows you to attach custom toolbar to each row that will appear on mouse over or when item is selected. This toolbar can be the same for all rows or you can set a different one for each row individually.
In this article, you will learn how to create a custom toolbar that will appear when you move mouse cursor over a grid row. Sample code is available in JavaScript, Angular, React and Vue.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As demo shows, when moving the mouse cursor over grid rows, a toolbar will appear on the right side. The toolbar contains three icons: Delete, Statistics and Favorite. Clicking on them will start a different action accordingly.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
How to Show a Toolbar when Row is Hovered
In addition to the default template in use for grid cells, there are two additional templates where you can add custom content. Difference between these templates is in the grid property in use:
- rowTemplate - a default template with custom html elements for all rows
- rowHoverTemplate - a template with custom html elements used only when row is hovered
- rowSelectTemplate - a template with custom html elements used only when row is selected
The content from the default template is displayed in cell space of each row. On other hand, the content from hover and select templates are displayed only on demand, and it will appear over entire row space in current grid view.
When you want to display a toolbar on mouse over a row, use the hover template. By default, this template is transparent, only when you add content to it, it will appear as docked to the right side within the visible row space. This content will always appear over the default row content.
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
In this example, the hover template contains a toolbar with three icons, which acts like command buttons with following functionality:
- Delete - removes the current hover row from the grid
- Statistics - displays a message
- Favorite - marks the row as favorite and changes the row icon in first cell
In addition, each button has a tooltip, stating its type.
You can also set the hover content to appear on left side, only change the CSS settings for the hover template.
In some cases, you may need to change the content of the toolbar depending on the row that is hovered. For example, if you don't want to delete some rows using the toolbar, you may need to exclude the delete button. To solve this, when buttons are added to rows, skip adding the delete button to specific rows by adding a condition.
Conclusion
In this article you have learned how to show a custom toolbar when row is hovered in Grid component. You can find the sample code in vanilla JavaScript and for Angular, React and Vue frameworks.
The default template determines the content displayed in grid cells. When you need to show an additional content, for example a toolbar, you can use the hover template that will display the toolbar on demand, when row is hovered. You can add any custom HTML elements to the hover template and set custom conditions that will display a different toolbar based on current row that is hovered.
The Grid component is part of IntegralUI Web.