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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Choose a column

Thread ID:





120936 Oct 28,2015 05:43 PM UTC Oct 29,2015 09:08 AM UTC JavaScript 1
Tags: ejGrid
Nicolas Siatras
Asked On October 28, 2015 05:43 PM UTC


Can you pls tell me how i can open the 'Choose Column' dialog from any button that is inside my dialog? The example you have with that button on the right top is not suits me. Assume that inside my dialog there is a grid and inside the title of the dialog i will put an icon for users to click and select columns.


Nikolas Siatras

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On October 29, 2015 09:08 AM UTC

Hi Nikolas,

As per quotes, you would like to open the column chooser dialog by clicking the button externally.  But the column chooser is built-in and we cannot not use it out of Grid. So render an external column chooser and use Essential Grid’s APIs such as showColumns and hideColumns to hide/show columns. We have prepared a sample with this requirement.


In the above sample, we have rendered a Grid inside a dialog and appended a dropdown(to select columns) in the dialog’s title. In checkChange event of ejDropDownList, we will show/hide the Grid columns using the Grid APIs. Please refer to the code example and Help Document show/hide APIs of ejGrid.

<div id="basicDialog" >

                <div id="Grid" style="margin-top:10px;"></div>


    <script type="text/javascript">

        $(function () {


                               showOnInit: true,


            var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));


                dataSource: data,

                columns: [

                        { field: "OrderID", headerText: "Order ID", width: 75, textAlign: ej.TextAlign.Right },

                        .  . . .




                  $("#basicDialog_title").append("<input type="+"text"+" id="+"columnChooser"+" />");//appending a dropdown in the dialog's title

                   var columns = [//Datasource for the dropdown

                    { skill: "Order ID", id: "OrderID" },

                    . .  . .

                    { skill: "OrderDate", id: "Order Date" }



                    dataSource: columns,

                    fields: { text: "skill",value:"id" },

                    showCheckbox: true,

                    checkAll: true, //Checks all the dropdown list at initial render

                    checkChange: "change"



              function change(args){

                     var obj = $("#Grid").ejGrid("instance");






ShowColumns: http://help.syncfusion.com/js/api/ejgrid#methods:showcolumns

HideColumns: http://help.syncfusion.com/js/api/ejgrid#methods:hidecolumns

Seeni Sakthi Kumar S.


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