Premium support for our pure JavaScript UI components


Post by kevin.snps »

Hi Bryntum , We have a feature where the rows should be colored alternatively . so for this we implemented a custom class which is similar to stripe(feature) but with our business logic.

The displaying of the colors works . But when I click on the group header row, the color changes to a different row completely and UI is seems to be buggy. We would like to know how this issue can be resolved .

Thanks for the support!

below is the class we have implemented

export default (base) =>
  class CombineStripe extends base {
    static get $name() {
      return 'combineStripe';
    }

async construct(grid, config) {
  super.construct(grid, config);
  // adds the colors to the rows
  await this.addColorToRows(grid);
}

doDisable(disable) {
  if (!this.isConfiguring) {
    // Refresh rows to add/remove even/odd classes
    this.client.refreshRows();
  }

  super.doDisable(disable);
}

/** add colors to 2 rows alternatively */
async addColorToRows(grid) {
  const rows = await grid.rowManager.rows;

  const mainObjectMap = new Map();
  let isColor = true;

  console.log(rows);
  for(let row of rows) {
    const mo = row.cellContext._record._data.mainObject;
    if(mainObjectMap.get(mo) === undefined) {
      mainObjectMap.set(mo, []);
    }

    mainObjectMap.get(mo).push(row);
  }

  mainObjectMap.forEach((values,key) => {
    if(key !== undefined) {
      for(let row of values) {

        row.assignCls({
          'b-add-color-row': !isColor,
        })
      }
    }

    isColor = !isColor;
  });
}
  };
Attachments
multicolor.gif
multicolor.gif (246.7 KiB) Viewed 439 times

Post by mats »

Hard to say based on just your snippets. This shouldn't need more than a few lines in one of your Column renderer methods, where you can call row.addCls

https://bryntum.com/docs/scheduler/api/Grid/column/Column#config-renderer

https://bryntum.com/docs/scheduler/api/Grid/row/Row#function-addCls
https://bryntum.com/docs/scheduler/api/Grid/row/Row#function-removeCls


Post by kevin.snps »

Hi mats, thank you for the reply.
We have tried Grid.column.Column#config-renderer, and got what we wanted. Thank you so much.


Post by kevin.snps »

Hi , Thanks for letting us know of a better approach . It was easier compared to the previous method.
But unfortunately we are having facing three issues with the new implementation.

1) The column for which the renderer method is applied does not show any data.
When the renderer is not applied , it shows the data as expected.

image (1).png
image (1).png (49.8 KiB) Viewed 421 times

But when i apply a rendered method to the first column. the data which is supposed to come in the first column doesnt come.

image (2).png
image (2).png (47.66 KiB) Viewed 421 times

this is the snippet of our implementation.

const mainObjectMap = new Map();
    let isColor = true;
    this.columns[0].renderer = ({record,row}) => {
      const mo = record.mainObject;
      if(mo !== undefined && mainObjectMap.get(mo) === undefined) {
        mainObjectMap.set(mo, isColor);
        isColor = !isColor;
      }

  row.addCls({
    'b-add-color-row': mainObjectMap.get(mo)
  });
}
Attachments
data.json
(15.12 KiB) Downloaded 40 times

Post by mats »

You should return the value you want to see in the cell too. If you post full code of your renderer, we can help you easily.


Post by kevin.snps »

Hi mats, thank you for the reply. We got the field shown after returning the data of the column. Thank you so much.
I have forgotten to post the rest of the question. Please let me ask them.

2) Even though the css classes we successfully applied . is there a way to turn off the grey colored hover as it does not suit the blue background.

hover (1).gif
hover (1).gif (246.2 KiB) Viewed 406 times

3) The css classes are applied successfully when the screen loads. but when a event resizes or event drag n dropped.
the css classes which we had added disappears for some reason. how do we solve this issue.

events.gif
events.gif (640.2 KiB) Viewed 406 times

Thank you for your support.


Post by tasnim »

Hello,

2) Here is how you can achieve it

.b-gridbase:not(.b-moving-splitter) .b-grid-subgrid:not(.b-timeaxissubgrid) .b-grid-row:not(.b-group-row).b-hover {
    background-color: rgba(254, 172, 49, 0);
}

3) Could you please provide a runnable test case so that we can debug it?


Post by kevin.snps »

Hi Tasnim, we were able to achieve 2). Thank you so much.
Regarding 3), this is our runnable sample.

Attachments
schedulerpro_component.zip
(4.14 KiB) Downloaded 43 times

Post by kevin.snps »

Hi Tasnim, I just hear the updates of the debug. Have you found any bugs that we might be able to get rid of?


Post by alex.l »

Your code contains

            renderer: ({record,row}) => {
              row.assignCls({
                'b-add-color-row': this.isColor
              });
              this.isColor = !this.isColor
              return record['name'];
            }

So, on each re-render you revert this.isColor flag. Put debugger inside and check what's actually going on when you manipulate data.

All the best,
Alex


Post Reply