Choose a column

[Nicolas Siatras]

Hi,

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.

Regards

Nikolas Siatras

[Seeni Sakthi Kumar Seeni Raj]

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.

http://jsplayground.syncfusion.com/1snsk5ns

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>

            </div>

    <script type="text/javascript">

        $(function () {

                  $("#basicDialog").ejDialog({

                               showOnInit: true,

                });

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

            $("#Grid").ejGrid({

                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" }

                ];

                $('#columnChooser').ejDropDownList({

                    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");

                     if(!args.isChecked)

                           obj.hideColumns(args.value);

                     else

                           obj.showColumns(args.value);

              }
    </script>

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

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

Regards,
Seeni Sakthi Kumar S.