Wijmo grid tree lazyloading with api call

Wijmo grid tree lazyloading with api call

Posted by: chandravadana.dasari on 7 February 2024, 8:00 pm EST

• 

  chandravadana.dasari

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 7 February 2024, 8:00 pm EST

  Hi,

  I am using wijmo version 5.20202.732.
  
  I want to implement wijmo grid tree structure lazy laoding with api call.

  As per the example given below
  
  https://developer.mescius.com/wijmo/demos/Grid/TreeGrid/LazyLoading/angular
  
  Already dummy node will be added while laoding rootlevel nodes. upon clicking expand button, dummy node is replaced with new nodes.

  My requirements is to show expand icons evens there is no child items available. On expanding api call fetch will get the children items and rendered in grid with tree structure. Please help on this case.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 8 February 2024, 9:27 pm EST

  Hi Chandra,

  You can handle the ‘groupCollapsedChanged’ event of the FlexGrid, as shown in the demo sample (same sample shared by you) to make an API call to get the data for the nodes and update the received nodes in the row’s dataItem. You’ll just need to make sure that each node in your data contains a dummy node, so that the expand collapse icons can remain visible for all nodes, and when 0 nodes are received in the API response, the expand/collapse icon will be auto removed from that node.

  You can refer to the attached sample for a demonstration.

  Regards

  Grid_TreeGrid_LazyLoading_Angular.zip

• 

  chandravadana.dasari

  • Post Options:
  • Link
    Copy

  Posted 8 February 2024, 9:36 pm EST

  Do we have any other way to work without dummy nodes and groupCollapsedChanged event is getting called multiple times for all the nodes. how can we restrict it.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 11 February 2024, 8:39 pm EST

  Hi Chandra,

  You can handle the ‘formatItem’ event of the FlexGrid to insert a custom icon for expand/collapse in each group row, and handle the click event on this icon to get node data from the server and insert it into the grid, but this will only increase complexity of code in your application, and you may need to handle all possible scenarios yourself, so we suggest to use the current approach i.e. to use a dummy node, you can insert dummy nodes in the data on client side, i.e. after receiving the actual data from the server, you’ll not need to keep dummy data on server, and it will also reduce the complexity of code, by keeping it simple and easily understandable. So, this would be the best approach for your requirements.

  Regarding triggering of ‘groupCollapsedChanged’ event, this event is triggered for each item when the collectionView is refreshed, that’s why you can see this event triggering a lot of times, however, it would not cause any performance impact in your application, until any heavy task is performed using this event. Also, there is an extra check implemented in the code, that ensures that the required code is executed for necessary groups only. You can also handle the click event on the grid to get data from the server and insert it into the grid, but in that case also, ‘groupCollapsedChanged’ event will be triggered multiple times, which is expected, as the collection view needs to be refreshed after inserting nodes data from the server to the grid data. So, overall you can the ‘groupCollapsedChanged’ event, which seems to be the best approach for now, in case you face any issues, you can let us know.

  Regards