[REACT] Group Naming

[tjmeal]

Dear all,

I have the following problem > i am trying to group a column which is an Object and i have the following 2 problems, please see the video attached for better understanding:

1. When grouping > the naming of the grouped header > is the whole object name > while i need only the name of the object.

2. Also when its grouped > and i update the column that is grouped with > it changes my object's variables.

original Object = {
id: 1,
name: SUV
,}

when i perform the update the object on the header

updated Object = {
NULL: 1,
name: SUV
,}

and the grouping is not working properly.

Thanks i am waiting your reply.

[marcio]

Hello tjmeal,

Thanks for reaching out.

To address your issues with grouping in the React Grid:

1. Group Header Naming: You can customize the group header name by using a renderer function in the grouping feature configuration. This allows you to format the header to display only the desired property, such as the name from your object. Here's an example:

      let grid = new Grid({
          features: {
              group: {
                  field: 'name',
                  renderer: ({ isFirstColumn, groupRowFor }) => isFirstColumn ? `${groupRowFor}` : ''
              }
          }
      });

   This configuration will ensure that only the name property is displayed in the group header. For more info, see the docs here https://bryntum.com/products/grid/docs/api/Grid/feature/Group#config-renderer.

2. Updating Grouped Column: When updating a grouped column, ensure that the update logic does not inadvertently modify the object structure. It seems like the update might be causing unintended changes to your object. Double-check your update logic to ensure it only modifies the intended properties without affecting the overall object structure.

If these suggestions do not resolve your issues, please provide some code snippets related to your implementation, and we can assist you further.

[tjmeal]

What you gave me didn't worked.

But i was able to make work with the following code

  groupFeature: {
    // headerHeight: 40,
    renderer: (props) => {
      if (props.record.isGroupHeader && props.isFirstColumn) {
        return props.groupColumn.data.editor.items.find(record => record.id === props.groupRowFor.id).name
        //return props.groupColumn.data.text;
      }
    }
  },

However i am facing an issue > i have a grouped group by Payment Method > lets say have POS and CASH > Making an update from Cash to POS > will create always create a new Group > with POS (event if some other records with grouped by POS) > until i commit the changes.

So i have a group of POS for committed records and a group of POS for uncommitted records > When i commit everything works as expected.

Is there a way to have on group of committed and uncommitted ? Please check video attached

[tasnim]

Hi,

Unfortunately, it's not possible. you can only have it grouped all together.

[tjmeal]

What do you mean i can only have it grouped all together ?

Currently is not grouped together ? Did you watched my video ?

[alex.l]

Hi tjmeal,

You can't commit changes partly, this is that Tasnim meant. I saw you video, it is not very informative and we might didn't get you correctly. Please explain if it is not that you requested - to have uncommitted/just created records in a separate group and save it separately from other changes.

[tjmeal]

I dont want to partly commit changes.

Please see the image attached > along with the video before i think you will be able to understand exactly what i need.