Avoid reconstruct inner html OnrowDatabound

[Iulian Astalus]

Hello,

I need to use ejChart inside an ejTreeGrid column.

I have the following code:

 $("#" + myId).ejTreeGrid({

      .......

      rowDataBound: colorBidsOnRowBound

});

var colorBidsOnRowBound = function (args){

    args.rowElement.find(".activation-chart").ejChart(factory.bidChart(args.data.activations));

}

I need to create ejChart element only on Load not on rowDatabound. However, if I am creating it on load, when I scroll down, the inner html of $(".activation-chart"), becomes empty.How can avoid such a behave ?

I mention that , somewhere in the code I have also factory.bidChart  method

Many thanks,

Iulian

[Suriyaprasanth Ravikumar]

Hi Lulian, 

 

We have analyzed your query, the reported issue may occur due to the “enableVirtualization” property value was “true”. In virtualization mode TreeGrid rows are refreshed with new rows that are available for current view port area on scroll action due to this customized content inside the cell element was removed.  

Can you please set the “enableVirtualization” property as “false” and ensure this issue in your sample? If this issue was not resolved in your end please revert us with your sample it will helpful for us to serve you better. 

Please let us know if require further assistance on this. 

 

Thanks, 

Suriyaprasanth R. 

[Iulian Astalus]

Hi Lulian, 

 

We have analyzed your query, the reported issue may occur due to the “enableVirtualization” property value was “true”. In virtualization mode TreeGrid rows are refreshed with new rows that are available for current view port area on scroll action due to this customized content inside the cell element was removed.  

Can you please set the “enableVirtualization” property as “false” and ensure this issue in your sample? If this issue was not resolved in your end please revert us with your sample it will helpful for us to serve you better. 

Please let us know if require further assistance on this. 

 

Thanks, 

Suriyaprasanth R. 

Hello,

The solution you gave me it works, but now I have a big impact regarding grid loading speed and other functionalities on it on frontend part.

Can you advice me what to do for further ? However, I would like to keep EnableVirtualization = false

Thanks,

Iulian

[John Rajaram]

Hi Lulian, 

We would like to let you know that, we have prepared the Angular TreeGrid sample with Chart using the “queryCellInfo” client side event instead of “rowDataBound” event in “Virtualization” enabled mode. Please find the following code snippets with “queryCellInfo” event. 

Code snippets: 

 

//... 

 

queryCellInfo(args){     

    if (args.column.field == "Product"){       

        $(args.cellElement).find("div.chartCell").ejChart({size: { height: "200", width:"200" }});         

    } 

  } 

 

//... 

 

 

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

You can ensure the performance of load and scrolling action with the above sample. If you still face any performance lag, please share us your device configuration details. This would be helpful for us to serve you better. 

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

Regards, 

John R 

[Iulian Astalus]

Hello,

Still weak performances here either if I use queryCellInfo or RowDataBound events. In my opinion , using queryCellInfo  is a bit slower even if I put a condition like :

 if (args.column.field == "Product") {    

          .....

} 

As a result , this is what I see in console:

Do you have another solution ?

Many thanks,

Iulian 

[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