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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Place column chooser at custom position

Thread ID:

Created:

Updated:

Platform:

Replies:

148616 Oct 28,2019 07:43 AM UTC Oct 31,2019 06:15 AM UTC Vue 5
loading
Tags: Data Grid
Marius Lian
Asked On October 28, 2019 07:43 AM UTC

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 



Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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 


Marius Lian
Replied On 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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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 


Marius Lian
Replied On October 30, 2019 06:45 PM UTC

Hi Seeni,

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

Thanks,
Marius

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon