Our blazing fast Grid component built with pure JavaScript


Post by dev team »

I have a Grid initialised as follows:

this.grid = new Grid({
  id: this.gridId,
  height: '100vh',
  appendTo: this.host,
  features: {
    columnDragToolbar: false,
  },
  columns: [
    {
      text   : 'Name',
      field  : 'name',
      flex   : 2,
      editor : {
        type     : 'textfield',
        required : true,
      },
      filterable : true,
    }, 
    {
      text  : 'Age',
      field : 'age',
      width : 100,
      type  : 'number',
      filterable : true,
    }
  ],
  store: {
    data: [ /* my data */ ],
  },
});

I can see the feature ColumnDragToolbar is disabled in my this.grid.features property:

Screenshot 2022-08-17 at 09.52.53.png
Screenshot 2022-08-17 at 09.52.53.png (43.05 KiB) Viewed 885 times

Later on in my code, I enable the feature dynamically:

this.grid.setConfig({
  features: {
    columnDragToolbar: false,
  }
});

This seems to have no effect. I can see the feature is correctly set on the grid, and it creates a ColumnDragToolbar instance:

Screenshot 2022-08-17 at 09.55.33.png
Screenshot 2022-08-17 at 09.55.33.png (100.19 KiB) Viewed 885 times

But I cannot drag the column headers still, and the toolbar does not appear and the draggable feature does not appear to function. It works if I enable it at the initialisation stage:

this.grid = new Grid({
  /* ... */
  features: {
    columnDragToolbar: true,
  },
});

Post by tasnim »

Hi,
I'm not able to reproduce it. Are you able to reproduce it in our online demo here https://bryntum.com/examples/grid/columndragtoolbar/

If you're not able to reproduce it in our online demo, please provide a runnable test case where we can reproduce the issue. and please also provide a bit more detail on how are you reproducing it.

Good Luck,
Tasnim


Post by dev team »

Hi Tasnim,

Thank you for your swift reply. I have put together an example now, which is available here:

grid_columnDragToolbar-example.zip
(104.21 KiB) Downloaded 62 times

To run it:

  1. Unzip it from the directory downloaded to: unzip grid_columnDragToolbar-example.zip
  2. Navigate to the unarchived directory: cd grid_columnDragToolbar-example
  3. Install packages: npm i
  4. Run: npm run start
  5. Observe the index.html file loaded on https://localhost:3333
  6. Wait 5 seconds for the alert to display, informing the user the feature is now enabled (this is done via setTimeout to simulate the user enabling the feature dynamically.
  7. Observe the draggable toolbars not working.
  8. Observe the console.log displaying the features.columnDragToolbar instance, with disabled: false

Post by dev team »

Also worth noting, I have disabled shadow DOM by setting shadow: false in the @Component decorator at the top, but still the same result.


Post by Animal »

Features are not dynamic. They are set up at construction time.


Post by Animal »

Configure it in with disabled : true, and you can enable and disable it at will.


Post by dev team »

Thanks, Animal! I will give that a try. Is that the same with most/all features? I.e. they should be enabled at initialisation then disabled if the user wishes to do so?


Post by Animal »

Yes, all Features are instantiated at construct time.


Post by dev team »

Animal wrote: Thu Aug 18, 2022 11:28 am

Yes, all Features are instantiated at construct time.

Great - thanks for the advice! :) This is a big help.


Post Reply