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

Choose a column

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 [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.

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.

CONFIRMATION

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.

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

;