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.
Unfortunately, activation email could not send to your email. Please try again.

Choose a column

Thread ID:





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


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 05:08 AM

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.

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.