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. Image for the cookie policy date

Choose a column


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

1 Reply

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team 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.

Live Chat Icon For mobile
Up arrow icon