RowDetailView - Not Working?

[meloblerd]

Is RowDetailView suppose to be working with React? I noticed the example is missing. I was unable to get it to work myself using various options.

[ghiscoding]

it's available unless someone contributes to the project. Basically this project was created by someone else and transferred back to me because I maintain all other SlickGrid libraries. However I'm just not a React developer and the Rod Detail extension requires to create a React component dynamically from JavaScript (without any html tag). If you know how to do that then please contribute a Pull Request, you can take a look at how I've created the SlickRowDetail Service in Angular-Slickgrid here or in Aurelia-Slickgrid here, typically the Aurelia-Slickgrid one is easier to read since it's closer to standard JS code.

So in short, this feature will not be available unless someone contribute to the project with the necessary code to implement it

[ghiscoding]

well the first thing you'll need to find is how to load a React Component dynamically in a DOM slot or whatever approach React is using.

For Aurelia-Slickgrid, I'll be upgrading the code this weekend to use Aurelia v2 and the code is a bit different compare to older version. Anyway, in both framework(Aurelia/Angular), I have a Service to load the Component dynamically into the DOM in a slot or whatever else

• Aurelia(2)-Slickgrid is done through aureliaUtil.service
• Angular-Slickgrid is done through AngularUtil.service

So I assume you'll need to create a ReactUtil.service that will do something similar, which is to load a React Component dynamically. Once you get that going, then you'll need the other part which is to extend the SlickRowDetail from Slickgrid-Universal, but that comes only after and at the end, you really need to find how to load the Component dynamically

I'm releasing a major version (aka breaking) this coming weekend, some pieces of code will change. I'm also migrating from project Wikis to GitBook for documentations which creates a website from markdown (similar to Wikis), here's the link for upcoming migration for Slickgrid-React in the new docs website: https://ghiscoding.gitbook.io/slickgrid-react/migrations/migration-to-4.x

So that's my main focus at the moment

[meloblerd]

Yeah I saw some of that code already. So I was assuming you did it. For example ReactUtil is here

All I did was try and hook things up from the pieces already there if anything was missing I used the Aurelia version and modified it until it compiled.

After looking into my test app enableCheckboxSelector,enableRowMoveManager doesn't work for me either. Although they work in the examples. Everything else seems fine so something is preventing slickgrid from adding in that column. So not even sure I have a proper way to test these changes.

[ghiscoding]

oh I forgot that was there, maybe that was implemented by the person who created the project originally. Anyway, you'll want to make sure that it works and that it appends correctly to the target, a slot or a div, if it does work then extending the SlickRowDetail is the next detail as mentioned earlier. Good luck

[ghiscoding]

you also need to enable the flag enableRowDetailView and there are some code in the lib that will create the RowDetail and part of that code is missing in Slickgrid-React because I didn't get the RowDetail to work. Basically this piece of code here in Aurelia-Slickgrid is missing in Slickgrid-React but is necessary to instantiate the SlickRowDetail class that you extended, this is a necessary process because SlickGrid plugins/extentions have an init() method that are only processed with a plugin registration which is the missing code I would guess

Also note that I release Slickgrid-React v4.0 but for some reason release-it screwed up my process and released 3.6.5 what was supposed to be 4.0.0, so 3.6.5 is completely wrong and has all the breaking changes, so please ignore that version or simply upgrade to 4.0.1

[ghiscoding]

hello @nickdollahz I looked at ways to add Row Detail in Slickgrid-Universal because I wanted an example so that I can run Cypress tests before using the plugin in downstream repo like Aurelia-Slickgrid. I got it working with native HTML code, it would of course be better with pure React code (with the service we talked earlier) but for now you could use native HTML as well and that should work also in Slickgrid-React. So if you want to take a look at the new Slickgrid-Universal Example 21, this might be helpful. Cheers, happy holidays

[ghiscoding]

Row Detail is now built-in Slickgrid-React (requires v5.9.0 or higher), however please note that there are console warnings in dev because of current implementation, see docs for more details

• Example 19 / Docs