SMART datagrid basically runs based on HTML5 Canvas. In the modern browser, Canvas provides significant rendering performance. However, since the basic requirement of SMART datagrid is to display and handle the business data in various ways, a lot of preparations may be needed for rendering. Therefore, in order to provide the most natural interface to the user, unnecessary rendering should be minimized.
In order to implement various requirements, SMART datagrid provides functions which can display the data in various levels and approaches, and you should choose and use the most appropriate function which meets the requirements according to the description as below.
Before displaying the data cell in grid body area, the background and border of sub areas will be rendered first. First, the background of grid body will be rendered, and if background style is set in the body, the background will be rendered in body area. And, if background or borderBottom has been set in rowStyles or rowRangeStyles, the background or border of the row containing the data cell can be rendered. And finally, if the background has been set in Column Style or other dynamic style, the background of data cell will be rendered.
In other words, rendering background can be overlapped, and if it is unnecessary overlap, it will lower performance. Therefore, the background value of all areas mentioned above is basically initialized as null, and you should set in the appropriate area only if background display is meaningful in business.
In addition, you should only use translucent color or linear gradient fill when necessary. In the case of business screen, you can display with opaque single color in most cases.
The data row containing cells will be rendered first before rendering the data cell, and the styles specified in GridBody.rowStyles or GridBody.fixedRowStyles will be applied by default. And, if should render different background color or border for each row or row area, you can set GridBody.rowRangeStyles. As described above, since the style values have been basically set as null, you will not be able to run row rendering. Of course, unnecessary row rendering should be avoided, but if you should render background color of all cells being contained in the row with the same color, you must do row rendering rather than cell rendering.
Before rendering a data cell, there will be several steps of Style Set settings. First, the styles specified in GridBody.cellStyles will become the default style of data cells. In other words, if you can be satisfied with the ones specified in Cell Styles, you do not have to specify Column Style or Dynamic Styles. In the cells of fixed area, the ones set in GridBody.fixedCellStyles will be applied.
And then, GridColumn.styles specified in each column will be applied, and later, it will be applied in the order of GridBody.rowDynamicStyles, GridBody.cellDynamicStyles and Column Dynamic Styles. And finally, the style values specified as CellStyle will be applied. At this point, the style values applied finally will be set in the data cell, and those values will be used in data cell rendering. In other words, if the style property value is set as explicit value rather than undefined, the value set in the previous step will be ignored. If there is no explicit setting in the whole steps mentioned above, it will get the value from the default style sheet which has been specified within the grid.
The path of searching the style value is actually contrary to the apply steps described above. Therefore, it can be helpful for the performance if explicitly specify the style value in the late steps.
Currently, it runs most smoothly in Chrome browser, and in the case of IE or FireFox, if the grid size has been set to be changed according to the change of browser size, the response can be slow.
Currently, the grid is sometimes displayed later than other elements of the page in IE browser. (It is not the problem that loading grid script file takes a long time) In this case, you can call grid.updateNow() right after initializing (setting column, option, style, etc.) the grid. Then it will just render the grid of current state without waiting for the next rendering time.
grid.setColumns(...);
grid.setOptions(...);
grid.loadStyles(...);
grid.setDataSource(ds);
loadData(ds);
checkIE() && grid.updateNow();