column chooser outside of the grid

Question

Hello,I am trying to put a column chooser functionality in my code. I have implemented the column chooser attribute of the ej-grid.But I want my column chooser to be placed outside of the Grid (not as a part of the grid). Could you please tell me if there is any way of achieving it ?

Thavasianand Sankaranarayanan · Answer

Hi Ananya, Thanks for contacting Syncfusion support. We have analyzed your query and we suspect that you want to use column chooser function as external one instead of using as a default one. So, we suggest you to follow the below code example. For an example we have shown the column chooser in the external button click instead of using default button in Grid.

----

angular.module('listCtrl', ['ejangular']) .controller('PhoneListCtrl', function ($scope) { $scope.data = obj; $scope.GriddataBound = "GridDataBound"; $scope.columnChooserclick = "columnChooserClick"; }); // prevent default button for column chooser function GridDataBound(args){ var proxy = this; setTimeout(function () { $(".e-ccButton").addClass("e-hide"); proxy.element.css("margin-top", "0px") }, 0) } // shown a dialog externally for column chooser function columnChooserClick(args){ var proxy = $(".e-grid").ejGrid("instance"); var top = this.element.offset().top, left = this.element.offset().left + 250; var dlgWidth = 230; if ($("#" + proxy._id + "ccDiv").length && proxy.element.find(".e-ccButton").length) { //check whether column chooser elements exisiting or not $("#" + proxy._id + "ccDiv").ejDialog({//id of column chooser dialog Grid’s ID + ccDiv width: '230px', height: '309px', position: { X: (proxy.model.enableRTL ? (left - dlgWidth + 143) : (left - dlgWidth)), Y: top + this.element.height() + 10 } }).ejDialog("open"); $("#" + proxy._id + "liScrollerDiv").ejScroller({ height: '228', width: '228', buttonSize: 0 }); $("#" + proxy._id + "liScrollerDiv").ejScroller('refresh'); } } We have prepared simple JsPlayground sample in the following link. JsPlayground link: http://jsplayground.syncfusion.com/1vxmlqs1 We have already discuss about above mention query in the following Knowledge base documentation. KB link: https://www.syncfusion.com/kb/7134/how-to-open-the-column-chooser-dialog-externally Refer the help documentation. Link: https://help.syncfusion.com/api/js/ejgrid#events:databound Link: https://help.syncfusion.com/angularjs/button/getting-started Link: https://help.syncfusion.com/api/js/ejgrid#members:showcolumnchooser Link: https://help.syncfusion.com/api/js/ejbutton#events:click Regards, Thavasianand S.

Ananya Juhi · Answer

Hello,Thank you very much for your quick response.

Prasanna Kumar Viswanathan · Answer

Hi Ananya, 

You are welcome. Please get back to us if you need any other assistance. 

We will be happy to assist you. 

Regards, 
Prasanna Kumar N.S.V

Abhy · Answer

How can i do the same thing in Angular 9 ?

Pon Selva Jeganathan · Answer

Hi Abhy, 
 
Thanks for contacting Syncfusion support.  
 
Please share the following details before proceeding with your query. 


Confirm whether are you using Essential javascript 1 or Essential javascript2.
Share the details of your product version.
 
The provided information will be helpful to provide you response as early as possible. 

Regards, 
Pon selva

Abhy · Answer

I am using Essential Javascript 2 and with latest version @syncfusion/ej2-angular-grids": "^18.2.45"

Sujith Kumar Rajkumar · Answer

Hi Abhy, 
 
Thanks for sharing the information. 
 
You can achieve the same requirement in EJ2 Grid by calling the Grid’s openColumnChooser method with the x and y axis position values where you need the column chooser to be opened. This is demonstrated in the below code snippet, 
 





// Button click event 
onClick(args) { 
        // Specify the required X and Y axis value to display the column chooser at that position 
       this.gridObj.columnChooserModule.openColumnChooser(160, 240); 
}  
 
We have prepared a sample based on this for your reference. You can download it from the following link, 
 
Sample: https://www.syncfusion.com/downloads/support/forum/156310/ze/GridWithExternalColumnChooser344651831  
 
API link: https://ej2.syncfusion.com/angular/documentation/api/grid/#opencolumnchooser 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R

Abhy · Answer

Thanks, it helps :)

Sujith Kumar Rajkumar · Answer

Hi Abhy, 

We are glad to hear that. Please get back to us if you require any further assistance. 

Regards, 
Sujith R