How to show master and details data in same grid with + sign or something similar in Webcore projects?

Hi Team,

I am working with a webcore project and want to display, some master records and their detail records in same grid with options like using a + sign like follow image. I have used TWebDBGrid but that does not support such features. So is there any other grid which can be used in webcore project to such functionality.

For example as per following grid, I want to have a function like below. Here when we click + sign it shows the detail record and when we click - sign it hides the details data.

could anybody please suggest the best ways to achieve such functionality in webcore projects?


I've not used FNCGrid enough to know how much work it would be to implement a master/detail grid like that, and likewise, it might be a lot of work to do something like that with a TWebDBGrid - essentially embedding a separate component in a grid cell.

However, you've got lots of alternatives that do support this with a little less work. TMS WEB Core apps of course have access to many JavaScript grids as well, and there are at least some that do support this.

One is Tabulator, which is free and can do this using their dataTree mechanism. There are some TMS Software Blog posts about using Tabulator in TMS WEB Core, starting here. And one that talks about this dataTree mechanism specifically, here.

Another popular grid that folks around here talk about, but which I've not spent any time with, is DevExpress' DevExtreme JavaScript Data Grid. It advertises support for this feature directly, so presumably it works pretty well. Many Delphi users are of course familiar with their VCL grids (myself included) so if you're coming from that environment this might be a convenient choice.