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

Place column chooser at custom position

Hi Syncfusion,

There is a sample here to open ColumnChooser by external button:

But would it be possible to inject the column chooser itself outside the default toolbar? So instead of clicking external button to open the column chooser in modal popup I would like to have it in my own custom toolbar template. 

Thanks,
Marius 



5 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 29, 2019 12:20 PM UTC

Hi Marius , 
 
We suggest you to use the below solution to resolve this issue. Here we use , toolbar template button component for opening the column chooser. A working sample is attached below for your reference. Kindly make a check on it. 
App.vue 
 
      :dataSource="data" 
      :toolbar="toolbar" 
      :toolbarClick="toolbarClick" 
      :showColumnChooser="true" 
 
export default { 
  data() { 
    return { 
      data: data, 
      toolbar: ["Open column"], 
 
  methods: { 
    toolbarClick: function(args) { 
      if (args.item.text === "Open column") { 
        this.$refs.grid.ej2Instances.columnChooserModule.openColumnChooser(); 
      } 
 

Please get back to us if you need further assistance 

Regards, 
Seeni Sakthi Kumar S 



ML Marius Lian October 29, 2019 12:41 PM UTC

Hi Seeni,

But this is the exact same as the sample I mentioned. 

My question was:
Is there a way to add this Column Chooser to my own custom toolbar. Not as a button that opens a modal, but permanent in the toolbar?

Thanks,
Marius


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 30, 2019 01:05 PM UTC

Hi Marius , 
We could see you would like to place the dialog in respect to the clicking element. We suggest you to use the below solution to resolve this issue. Here we use have calculated the position of the dialog based on the left and top offsets of the element.. Refer the code snippet for more information. A sample is attached for your reference. 
 
App.vue 

<template> 
  <div id="app"> 
    <ejs-grid  ref="grid"  :dataSource="data"  :toolbar="toolbar"  :toolbarClick="toolbarClick"                                                                                                                                                                                                                                                                                                                                                                                                                                                                            :showColumnChooser="true"  allowPaging="true" > 
      <e-columns> 
              
      </e-columns> 
    </ejs-grid> 
  </div> 
</template> 
<script> 
import Vue from "vue"; 
          
export default { 
  data() { 
    return { 
      data: data, 
      toolbar: ["Open column"] 
    }; 
  }, 
 
  methods: { 
    toolbarClick: function(args) { 
      if (args.item.text === "Open column") { 
        var leftargs.originalEvent.target.offsetLeft + args.originalEvent.target.offsetWidth; 
        var heightargs.originalEvent.target.offsetTop +  args.originalEvent.target.offsetHeight; 
 
         this.$refs.grid.ej2Instances.columnChooserModule.openColumnChooser( left ,height); 
      } 
    } 
  }, 
 
  provide: { 
    grid: [Edit, Toolbar, Page, ColumnChooser
  } 
}; 
</script> 
 


Please get back to us if you need further assistance 

Regards, 
Seeni Sakthi Kumar S 



ML Marius Lian October 30, 2019 06:45 PM UTC

Hi Seeni,

Ok, thanks! The x/y positon solves my problem.

Thanks,
Marius


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 31, 2019 06:15 AM UTC

Hi Marius,

Thanks for the update. We are happy to hear your requirement has been resolved. 
  
Regards,  
Seeni Sakthi Kumar S 


Loader.
Live Chat Icon For mobile
Up arrow icon