Tree mode in NG-grid

Forum to discuss the new web client version of Servoy.

Tree mode in NG-grid

Postby mboegem » Wed May 08, 2024 4:36 pm

In NG-client the NG-grid was limited in functionality.
I did understand that in TiNG config properties of components are directly pushed into the component.
Therefor I tried to get NG-grid working with tree data as in this example: https://www.ag-grid.com/angular-data-grid/tree-data/

When using datagrid I see warnings about missing serverside properties, but in power grid these are absent. Nevertheless it doesn't seem to work.
Anyone already done this and/or is this even possible?
Marc Boegem
Solutiative / JBS Group, Partner
Servoy Specialist
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image
User avatar
mboegem
 
Posts: 1759
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: Tree mode in NG-grid

Postby paronne » Fri May 24, 2024 11:30 am

Hi Marc,

the Tree Mode for NG Grids would require a different processing of row data; that would required to be handled internally by the component, is not something you can easily manage with custom config.
On Top of the existing properties of the NG Grids is indeed possible to provide extra configurations based on the Ag Grid using the gridOptions ( for grid settings, https://www.ag-grid.com/angular-data-grid/grid-options/ ) or columnDef ( for column settings, https://www.ag-grid.com/angular-data-gr ... roperties/ ) enabling most of the configurations Ag Grid provides.
Such options can be set globally ( for all grids in use ) using the NG Grid Services plugin

Example
Code: Select all
   
plugins.ngDataGrid.gridOptions = {
      headerHeight: 10,
      rowHeight: 52,
                singleClickEdit: true
   }


However not every feature of Ag Grid can be used with such approach; normally simple properties ( boolean, text, numeric.. ) are no brainer, as long is not already overruled by our grid's properties is included in the version of the Ag Grid in use will work.
With the latest version of Servoy ( 2024.3.2 ) is also possible to create function to be executed clientside, which can be used as callback functions in the UI.

Code: Select all
var options = { myfunction: clientutils.generateBrowserFunction("function(param) { return param + 1 }") } *;
elements.component.options = options;


*Available also on fewer servoy version before as application.generateBrowserFunction(*)

Haven't yet used this pattern on NG Grid, it can unlock more advanced functionalities ( e.g. https://www.ag-grid.com/angular-data-gr ... rClipboard );
However you must be familiar with client-side scripting and i must warn you that many of the grid functions are already internally bound to our component; should not be overriden by config or can cause miss-behaviors.
So yes, there is a good reason why i haven't used such advanced pattern in first place. You would need to scan the component's source code to verify the function is not in use already (https://github.com/Servoy/aggridcompone ... atagrid.ts), monitor it any time you upgrade the component to a newer version; further be aware that such advanced configs are in general sensible to upgrades ( Ag Grid may rename/refactor/deprecate the setting at any upgrade )

Regards,
Paolo
paronne
 
Posts: 210
Joined: Fri Nov 02, 2012 3:21 pm

Re: Tree mode in NG-grid

Postby mboegem » Fri May 24, 2024 12:29 pm

Thank you Paolo. Clear answer.
On the custom config, I understand checking the 3rd party updates on that.
Can still clearly recall Johan's warnings on that during last SW on tour. :-)
Marc Boegem
Solutiative / JBS Group, Partner
Servoy Specialist
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image
User avatar
mboegem
 
Posts: 1759
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 3 guests