Achieve Better Performance Within a Table through Decoupling and Lazy-Loading

With the addition of the SPARK Table control, tables have greatly increased performance. This is due to its client-side nature. Sometimes, it is necessary for a column within a table to contain multiple controls within it. These complex table columns can range from fairly simple to very complex. Consequently, the more complex the column the more reduced the performance of the table will become. SPARK is able to overcome this obstacle by nesting the content of the complex column within a coach view and making use of the deferred section control. Nesting content in coach views allows the content to be decoupled from the parents that contain them, allowing a simplicity and re-usability. The deferred section is used because it uses lazy-loading to defer the loading of content until needed. To learn more about how the deferred section control works, see our showcase app or our article here. Utilizing both decoupling and lazy-loading the Spark table control can achieve high performance even with complex row content. 

Example of a Table With a Complex Column

A common use case implementation for a using a complex column in a table is showing a modal on a button click. An example could be that a modal that pops up to provide a form that the user needs to fill out. The advantage to nesting the modal within the rows of a table is that each modal that appears will be specific to the view of the row it belongs to. 

The images below demonstrate how each modal is specific to the row that had its button clicked.

Decoupling Content by Using Coach Views

Nesting content within coach views decouples the need for the coach view to know who its parent is. This is particularly useful for complex columns within tables, because the coach view's inline-js will already know the view that of the row the coach view is within.

For the use case being used in this article, the both the deferred section and the modal will be within the coach view.


Using Deferred Sections Within a Table

To achieve better performance, complex columns of a table should defer loading until needed. Often times this will be done through some sort of human interaction within the table (i.e. clicking a view button in a row). By simply nesting content within a Deferred Section control, a developer can control when the nested content becomes loaded. 

The image below shows a coach example of nesting a complex column's content within a Deferred Section.

Piecing it All Together

The View column contains a button and a coach view. The showing of the modal section and lazy-loading of the deferred section will both happen within the coach view. By decoupling the coach view, the logic within View button's onClick() is significantly freed up, and a simple call of a function within the nested coach view is needed.

The image below shows how to reference the coach view within a specific row using .getSibling() when clicking the button.

The .showModal() function that is being called within the On Click event is defined within the in-line js of the coach view. The function determines if the deferred section has loaded yet; if it has then the modal section shows, otherwise the deferred section lazy-loads. 

The image below shows the code for the function showModal that is called on the View button being clicked.

If the deferred section is being lazy-loaded for the first time, then within the On Lazy-Loaded event of the deferred section the modal section would need to be shown here. The code to do this is as follows: 



  • Authors: Elliot Pytosky
  • Date Created: November 12, 2015
  • Date Modified: November 12, 2015
Was this article helpful?
0 out of 0 found this helpful