Problems with enableVirtualization

[Iulian Astalus]

Hello,

I created a custom Grid having following structure:

$("#" + zones[i].zoneName + zones[i].zoneHour).ejTreeGrid({

                    dataSource: zones[i].data,

                    childMapping: "bids",

                    treeColumnIndex: 0,

                    commonWidth: 8,

                    headerTextOverflow: "Wrap",

                    parseRowTemplate: false,

                    sizeSettings: { height: "620px", width: gridWidth },

                    isResponsive: false,

                    allowColumnResize: true,

                    enableCollapseAll: true,

                    enableVirtualization: true,

                    allowSelection: true,

                    selectionType: ej.TreeGrid.SelectionType.Multiple,

                    selectionSettings: { selectionMode: "row" },

                    contextMenuSettings: {

                        showContextMenu: true,

                        contextMenuItems: []

                    },

                    selectedRowIndex: zones[i].upIndex,

                    expanded: bidsBLbidActions.handleScrollbarPosition,

                    contextMenuOpen: bidsBLbidActions.customBidMenu,

                    queryCellInfo: showBidsActivation,

                    rowSelecting: updateModel,

                    rowSelected: calculateAmount,

                    cssClass: i + "_grid" + zones[i].zoneHour,

                    columns: [

                        { field: "accumulated", headerText: "Accumulated/<br>MW", allowSorting: false, width: 10 },

                        { field: "Price_EUR", headerText: "Price<br>EUR", allowSorting: false, visible: defaultVisible(true, "Price_EUR"), isTemplateColumn: true, templateID: "columnPriceTemplate" },

                        { field: "amount", headerText: "Amount/<br>MW", allowSorting: false, isTemplateColumn: true, templateID: "columnClockTemplate", visible: defaultVisible(true, "amount") },

                        { field: "area_name", headerText: "ELSPOT<br>Area", allowSorting: false, isTemplateColumn: true, templateID: "activationChartTemplate", visible: defaultVisible(true, "area_name") },

                        { field: "short_name", headerText: "Bid Type", allowSorting: false, visible: defaultVisible(false, "short_name") },

                        { field: "power_plant", headerText: "Power Plant", allowSorting: false, visible: defaultVisible(false, "power_plant") },

                        { field: "duration_time", headerText: "Duration Time", allowSorting: false, visible: defaultVisible(false, "duration_time") },

                        { field: "resting_time", headerText: "Resting Time", allowSorting: false, visible: defaultVisible(false, "resting_time") },

                        { field: "production_type", headerText: "Usage Type", allowSorting: false, visible: defaultVisible(false, "production_type") },

                        { field: "party_name", headerText: "Party", allowSorting: false, visible: defaultVisible(false, "party_name") },

                        { field: "strCreationDate", headerText: "Creation Date", allowSorting: false, visible: defaultVisible(false, "strCreationDate") },

                        { field: "bid_id", headerText: "Bid Id", allowSorting: false, visible: defaultVisible(false, "bid_id") }

                    ],

                    rowDataBound: bidsBLbidActions.colorBidsOnRowBound

                });

Since I have enableVirtualization as true, each time when I scroll down the colorBidsOnRowDataBound is called again.At her turn, colorBidsOnRowDataBound creates a ejChart inside of each row ,  and the inner html for each cell in row is actually rewrite, causing not to be smooth enough when scroll down. I want to avoid this, but if I set enableVirtualization as false , I have so slow performance issue at grid loading.

How can fix this ?

Please, advice

[John Rajaram]

Hi Lulian, 

We have checked the code snippets and attachments shared by you. With virtualization enabled mode in TreeGrid, to improve the performance further we suggest you to enable the “enableCanvasRendering” property in the ejChart control. Please find the following code snippets for enabling canvas rendering in Chart. 

Code snippets: 

 

.ejChart({ 

 

   //... 

 

   enableCanvasRendering: true, 

 

}); 

 

 

We have also prepared the JavaScript TreeGrid sample in Virtualization enabled mode. Please find the sample in the following location. 

Sample: http://www.syncfusion.com/downloads/support/forum/133572/ze/Customize_TreeGrid331282774 

If you still face any performance lag in scrolling TreeGrid rows, please revert us by modifying the sample based on your application along with the replication procedure. This would be helpful for us to serve you. 

Please let us know if you need further assistance on this. 

Regards, 

John R