Using Aurelia View Compiler in a two dimensional context
This text is written to explain some details of the Issue 135
Specifically we want to create a "graphic" equivalent of this summary paragraph
Basically, we will have two loops, we loop through all the columns, and we loop through all the rows. We first process the first column. We know the template of the column (as we passed this to Kendo), so we can create a ViewFactory from this template. This is what I mean by the green column. Then, we iterate through all the rows in this column. Each row has a dataItem (this is the term used by Telerik), and the dataItem is essentially the context of the row (it contains all the variables, functions etc). the dataItem can be seen as an item of the datasource. We can use the previously created ViewFactory to create a View for each cell (these are the <td> tags). After we create the View for a cell, we need to call bind() on it, passing in the dataItem as it's context. Why? So if you'd have ${Name} in your template, it would bind to the Name property of the dataItem. Now we have the View, we must inject it in the cell. We create a ViewSlot where we pass in the <td> element. We add the View to the ViewSlot and we are done for this cell, and move on to the next cell. When we are out of cells for the column, we move to the next column and create a ViewFactory and repeat..
We are trying to find the optimal interaction between Aurelia and KendoUI in the context of the Grid element, which would result with maximum performance in situations with large amount of data in the grid object: (quote from KendoUI documentation)
There are cases when you may need to operate with large amount of data in the grid, and fetching and processing this data at once would impose a performance penalty due to limited browser resources. Luckily, the Kendo UI grid has a solution called data virtualization that alleviates any slowdowns when operating with huge volumes of data. When enabled via the scrollable->virtual configuration option, it displays a vertical scrollbar for the grid content and renders only the number of items set via the pageSize property of the grid data source. After you drag the scrollbar and the pageSize is exceeded, it makes automatic requests to retrieve and render the next set of grid rows.