We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Custom Toolbar

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




4 Replies

PS Pavithra Subramaniyam Syncfusion Team November 18, 2022 01:26 AM

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



PD PDev November 24, 2022 06:21 PM

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)



PD PDev November 24, 2022 06:21 PM

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



PS Pavithra Subramaniyam Syncfusion Team November 25, 2022 04:26 AM

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.


Loader.
Live Chat Icon For mobile
Up arrow icon