column chooser outside of the grid

[Ananya Juhi]

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 ?

<div class="control-section">

    <ej-grid [dataSource]='data' allowPaging='true' showColumnChooser='true' [toolbar]="toolbar" [pageSettings]='pageSettings'>

        <e-columns>

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign="right"></e-column>

            <e-column field='CustomerName' headerText='Customer Name' width='150' showInColumnChooser='false'></e-column>

            <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign="right"></e-column>

            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign="right"></e-column>

            <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign="right"></e-column>

            <e-column field='ShipCountry' headerText='Ship Country' [visible]='false' width='150'></e-column>

            <e-column field='ShipCity' headerText='Ship City' [visible]='false' width='150'></e-column>

        </e-columns>

    </ej-grid>

</div>

[Thavasianand Sankaranarayanan]

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. 

<button id="start" ej-button e-showroundedcorner="true" e-size="large" e-text="Choose Columns" e-click="columnChooserclick"></button>  

 

            <div class="cols-sample-area"> 

                <div id="Gridsds" ej-grid e-datasource="data" e-showcolumnchooser="true" e-databound="GriddataBound" e-allowpaging="true" >                  

                    <div e-columns> 

                          

                       ---- 

 

                    </div> 

                </div> 

            </div> 

 

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]

Hello,

Thank you very much for your quick response. 

[Prasanna Kumar Viswanathan]

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]

How can i do the same thing in Angular 9 ?

[Pon Selva Jeganathan]

Hi Abhy, 

 

Thanks for contacting Syncfusion support.  

 

Please share the following details before proceeding with your query. 

1. Confirm whether are you using Essential javascript 1 or Essential javascript2.
2. 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]

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

[Sujith Kumar Rajkumar]

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]

Thanks, it helps :)

[Sujith Kumar Rajkumar]

Hi Abhy, 

We are glad to hear that. Please get back to us if you require any further assistance. 

Regards, 

Sujith R