Row details displays undefined rows

[crlsmsq]

Describe the bug

Hi! I tried implementing the detailed row feature. But clicking a row only shows new lines with undefined values

Checking the click event of the plugin shows that I got 0 container_* classes

I was wondering if I could reinitialize the plugin? I have a dynamic dataset that changes from one to the other with different set of columns and rows using the same slickgrid instance.

I tried the .invalidate() but it doesn't reinitialize the plugins. Also tried this function i found, but it relies on a different class with the same name i think.

Reproduction

I followed the tutorial on how to use it. i think it happens because after the slickgrid was initialized with no column headers and data. i gave the user an option to generate the data with dynamic columns and apply it in slickgrid

Expectation

No response

Environment Info

angular 13

Validations

• Follow our Code of Conduct
• Read the HOWTO - Step by Step.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[ghiscoding]

I followed the tutorial on how to use it. i think it happens because after the slickgrid was initialized with no column headers and data. i gave the user an option to generate the data with dynamic columns and apply it in slickgrid

it was never created to be used that way and is not supported either, you also can't register/unregister that way because it doesn't use the regular SlickGrid registering process and that simply won't work. I thought the following code might work

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
  }

  get rowDetailInstance(): SlickRowDetailView {
    // you can get the SlickGrid RowDetail plugin (addon) instance via 2 ways

    // option 1
    return (this.angularGrid.extensions.rowDetailView.instance || {});

    // OR option 2
    // return this.angularGrid?.extensionService.getExtensionInstanceByName(ExtensionName.rowDetailView) || {};
  }

  later() {
    this.rowDetailInstance.dispose(); // to unsubscrive events & avoid mem leaks
    this.rowDetailInstance.init(this.angularGrid.slickGrid); // reinitialize the plugin
  }

but it doesn't work and is causing different error (Maximum call stack size exceeded). Let's put it this way, Row Detail is created once and only once and if you're creating the columns dynamically in a later process, I think you're looking for trouble. I don't have more time to spend on this and so at this point I would say Row Detail is not supported dynamically

[crlsmsq]

hi ghiscoding! thanks for this. okay I'll just create the slickgrid instance when I have the columns and rows for it :)

[ghiscoding]

but really what's the point of initializing a grid without columns? Why don't you just use an ngIf to create your grid when you have all available data at hand, using the ngIf would certainly work correctly

[crlsmsq]

yes ill do that :D

[crlsmsq]

hello @ghiscoding !

Applying a column preset from the slickgrid config makes these + expandible button missing.

w/o applying preset

with applying preset

[ghiscoding]

Sorry but why are you reopening this issue when the new issue you are describing is completely different from the original? Please don't hack old issue just to save time when it's totally different.

You are also missing a lot of details that I require for troubleshooting

• you did not mention your Angular-Slickgrid version (note I only support latest version).
  • I don't think this issue is happening with the latest version, I remember seeing something similar in the past.
• you also did not provide any code to reproduce.

I'm going to close this issue again because like I said your new issue has nothing to do with the original issue and I don't think this issue is happening with latest version, please provide reproduceable code in the future and the version you're using.

EDIT

I gave it a try with presets in the Row Detail example and the reason it doesn't work is that the Row Detail is a plugin and is created dynamically after the grid creation but it must be included in your presets if you want to see it load with presets. in other words, even though Row Detail is a magic column (dynamically created), it must be included in the columns presets if you want to see it, that is also true for the Row Selection column but it seems that I added code to deal with it in the presets but forgot to do it for the Row Detail... anyway, what I did to get all columns is simple, you can get them after the grid is loaded like this:

// get all columns (visible + hidden) including dynamically created columns
const allColumns = this.angularGrid.gridService.getAllColumnDefinitions();
console.log(JSON.stringify(allColumns.map(c => ({ columnId: c.id }))));

in the Row Detail example this will output

[{"columnId":"_checkbox_selector"},{"columnId":"_detail_selector"},{"columnId":"title"},{"columnId":"duration"},{"columnId":"percent2"},{"columnId":"start"},{"columnId":"finish"},{"columnId":"effort-driven

So _detail_selector is the one for Row Detail (unless you provide a custom columnId in its config), so you need to add that Row Detail column to your presets, like the following.

presets: {
  columns: [
    // { columnId: '_checkbox_selector', width: 30 },
    { columnId: '_detail_selector', width: 30 },
    { columnId: 'title' },
    { columnId: 'duration' },
    { columnId: 'start' },
    { columnId: 'finish' },
    { columnId: 'percent2' },
    { columnId: 'effort-driven' }
  ]
}

Technically you should also include the Row Selection column (_checkbox_selector) but it seems to be causing problem when we do add it, so it seems better to not include it since it's already handled internally by the lib. Maybe someday in the future, I'll do some changes so that Row Detail is also handled internally by the lib with presets but for now this is what you have to... and this give us the result you're looking for (notice the "Percent" column position is changed in the presets just to validate that it works and the print screen tells us that it does work)

Summary

in summary, the lib should probably handle this hidden/dynamical columns, but for now this is the workaround that you have to do. I might fix it in the future but for now this is an acceptable workaround. There also seems to be a bug with an extra checkbox icon that shouldn't appear in the filter section on that Row Detail column but is a separate bug (basically this plugin was not tested with other plugins).

Also again, please do not hijack old issue with new issues that are unrelated to each other and provide more info in the future

EDIT 2

The fix is now released under the new version v5.6.3 and will automatically re-insert the dynamically created columns (RowMove, RowSelection & RowDetail)

[crlsmsq]

thank you so much for this

[ghiscoding]

you can thank me by staring ⭐ the lib if you haven't already 😉

[crlsmsq]

yes <3 i just did