Custom Toolbar

[PDev]

I have combination of frozen column and dropdown in toolbar. I have noticed that this combination does not work

Can you please prepare a sample which has both in them

As you can see without frozen columns. dropdown in toolbar works fine

[Pavithra Subramaniyam]

Hi PDev,

We have tried to reproduce the issue with the given details, but the toolbar is showing the MultiSelect component in the toolbar with frozen columns fine. Please refer to the below sample for reference.

https://stackblitz.com/edit/angular-suc6n3?file=app.component.ts,app.component.html

To validate further, please share the below information which will be helpful for us to provide a better solution as early as possible.

1. Share the full Grid code example
2. Is there any script error?
3. Share the Syncfusion version
4. Share an issue reproducible sample which will be easier to validate the issue.

Regards,

Pavithra S

[PDev]

Hi 

I have parent and Child grid. This Custom Toolbar with Freeze column in stackblitz is working okay. but for some reason in my environment. It's throwing an error. Have a look and see if you can help.

core.js:6210 ERROR Error: Uncaught (in promise): TypeError: Cannot use 'in' operator to search for '__eventList' in null

TypeError: Cannot use 'in' operator to search for '__eventList' in null

    at EventHandler.addOrGetEventData (ej2-base.es2015.js:4411:26)

    at EventHandler.add (ej2-base.es2015.js:4430:40)

    at Scroll.wireEvents (ej2-grids.es2015.js:12657:30)

    at Observer.notify (ej2-base.es2015.js:2325:29)

    at Grid.notify (ej2-base.es2015.js:6783:32)

    at Render.emptyRow (ej2-grids.es2015.js:5816:25)

    at Render.renderEmptyRow (ej2-grids.es2015.js:5794:14)

    at Render.dataManagerFailure (ej2-grids.es2015.js:6004:14)

    at ej2-grids.es2015.js:5743:32

    at ZoneDelegate.invoke (zone-evergreen.js:372:26)

    at resolvePromise (zone-evergreen.js:1213:31)

    at zone-evergreen.js:1283:17

    at ZoneDelegate.invokeTask (zone-evergreen.js:406:31)

    at Object.onInvokeTask (core.js:28578:33)

    at ZoneDelegate.invokeTask (zone-evergreen.js:405:60)

    at Zone.runTask (zone-evergreen.js:178:47)

    at drainMicroTaskQueue (zone-evergreen.js:582:35)

    at invokeTask (zone-evergreen.js:491:21)

    at ZoneTask.invoke (zone-evergreen.js:476:48)

    at data.args.<computed> (zone-evergreen.js:2541:32)

[PDev]

Alternatively can you please provide code for freezing and unfreezing a column. worst case scenario i will implement the same in toolbar.

[Pavithra Subramaniyam]

Query#1: for some reason in my environment. It's throwing an error.

To validate the reported issue, we need some more details from your end. So please share the below details which will be helpful.

1. Share an issue reproducible sample since it seems that the issue occurs only in your sample.
2. Share the replication procedure of the issue

Query#2: Alternatively can you please provide code for freezing and unfreezing a column. worst case scenario i will implement the same in toolbar.

You can achieve your requirement by setting the “frozenColumns” property. Please refer to the below code example in which we have freeze/unfreeze the columns inside the toolbar click event.

ngOnInit(): void {

  this.toolbar = ['Freeze', 'UnFreeze'];

}

toolbarClick(args) {

  if (args.item.text == 'Freeze') {

    this.grid.frozenColumns = 1;

  }

  if (args.item.text == 'UnFreeze') {

    this.grid.frozenColumns = 0;

  }

}

 

Sample: https://stackblitz.com/edit/angular-suc6n3-qecdij?file=app.component.ts

Please get back to us if you need further assistance on this.