How to create and publish StackedHeader Grid as a custom widget
Follow the below steps to publish the StackedHeader Grid custom widget into the Bold BI application and use it.
- Download the StackedHeader Grid custom widget.
- Publish the custom widget to the Bold BI application by following the steps mentioned in the help link.
- Once
you published the custom widget, the StackedHeader Grid custom widget
will appear under the Miscellaneous section of the designer panel as in
the following image.
- Drag
and drop the widget and configure the data. The StackedHeader Grid custom widget will render as in the
following image.
Improvement in the StackedHeader Grid Custom Widget
To debug and make changes in the custom widget, follow these steps:
Unpack the StackedHeader Grid custom widget (StackedHeader Grid. bicw) by following the steps in the mentioned link.
Add the debugger to the sourcefile.js file's init() method. Also, add the needed changes in the sourcefile.js file.
Publish the custom widget by following the steps in this link.
Now, open the new dashboard in the Bold BI designer.
Open the Developer Tools in the Browser.
Drag and drop the StackedHeader Grid Custom Widget in the Designer.
Now, the debugger will trigger.
Also, the StackedHeader Grid Custom Widget is developed using the EJ2 Grid syncfusion component. For any new options, check the available API in the UG link.
Methods and use cases in the StackedHeader Grid source file.
The following table explains the use case of some main methods available in sourcefile.js.
|
Methods |
Use Case |
|
Init() |
This method will trigger when the StackedHeader Grid custom widget is dragged and dropped in the designer or initialized in the viewer. |
|
dataBound() |
We can customize the grid with custom styles like grid header and cell customizations. |
|
queryCellInfo() |
We can apply the formatting to the grid cell values based on the applied formatting to the configured columns in the grid. |
|
Update() |
This method will trigger when the widget is resized, data is configured in the widget, and when the changes are made in the property panel. Based on the respective changes the Waterfall chart object can be updated. |
Related Links:
