Ag-Grid 行组呈现错误

Question

I'm only grouping rows on certain values. Here's a simplified version of my database structure:

• item
  • id
  • parent ID (if this is a child item)
  • item type (parent, child, normal)

I am grouping when the row's item type is parent. I do a database fetch for that row's children, and populate them in the row group.

I end up with a very strange rendering problem: (GIF) https://imgur.com/a/8lFVjLn

Here is my code. It's CoffeeScript but should be self-explanatory for those familiar with JS. "?" is just a null check, "@" is "this"

....
          # the user has expanded a group, so check that we have parent node data...
          else if params.parentNode? and params.parentNode.data? and params.parentNode.expanded
            parentId = params.parentNode.data.id

            if @editionsDict[parentId]?
              params.successCallback(@editionsDict[parentId], @editionsDict[parentId].length)
            else
              # database call that returns a promise for when data is retrieved
              @gridLoadChildren(parentId).then((res) =>
                setTimeout(()=>
                  @editionsDict[parentId] = @childWorks
                  params.successCallback(@editionsDict[parentId], @editionsDict[parentId].length)
                ,0)
              )

@childWorks is populated in @gridLoadChildren . Other than that, @gridLoadChildren is just a database call that performs a select using the parent ID.

Answer 1

Unfortunately for what I want I could not use Ag Grid's row grouping. The whole time I was working on this feature it felt like I was wrestling with the grid and trying to make it do something it wasn't meant to do. Thankfully, I came across the master/detail documentation and will be going that route instead. So far it works exactly for what I need (server side data and only expanding groups for certain rows).