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

EjDialog for Column Chooser Disappears After Opening

Thread ID:





131373 Jul 6,2017 08:10 PM UTC Jul 12,2017 04:40 AM UTC JavaScript 3
Tags: ejGrid
Matt Abercrombie
Asked On July 6, 2017 08:10 PM UTC

I'm trying to implement a custom toolbar item that opens a "Column Chooser" dialog. It seems to almost be working, but when the dialog opens it immediately closes again.

Here is a link to demonstrate:

Please advise as to what could possibly be causing this behavior.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On July 7, 2017 12:24 PM UTC

Hi Matt,  
We can reproduce the problem at our end.  
Columnchooser dialog will be closed instantly if it is opened by an element placed with in the Grid other than its e-ccButton which is the default behavior of the Grid to prevent the multiple column chooser dialog opening in the Hierarchy level of the Grid. So, we recommend to add the e-ccButton class to the toolbar template. Refer to the following code example.  
    <div id="Grid"></div> 
    <script type="text/x-jsrender" id="gridColumnChooserTemplate"> 
        <a class="e-toolbaricons">CC</a> 
    <script type="text/javascript"> 
        $(function () { 
                dataSource: window.gridData, 
                toolbarSettings: { showToolbar: true, customToolbarItems: [{ templateID: "#gridColumnChooserTemplate" }] }, 
                toolbarClick: "onToolBarClick", 
                showColumnChooser: true, 
                dataBound: function (args) { 
                    setTimeout(ej.proxy(function (e) { 
                        var elem = this.element.attr("id"); 
                        //add e-ccButton to the column chooser button template 
                        //after hiding the default button 
                        $("#" + elem + "_gridColumnChooserTemplate").addClass("e-ccButton"); 
                        this.element.css("margin-top", "0px"); 
                        $("#" + elem + "ccDiv").ejDialog({ 
                            width: '230px', 
                            height: '309px', 
                            showOnInit: false, 
                        $("#" + elem + "liScrollerDiv").ejScroller({ height: '228', width: '228', buttonSize: 0 }); 
                        $("#" + elem + "liScrollerDiv").ejScroller('refresh'); 
                    }, this,args), 0); 
        function onToolBarClick(sender) { 
                    . . . 
                          . . . 
            else if (sender.itemName == "gridColumnChooserTemplate") 
                $("#" + this.element.attr("id") + "ccDiv").ejDialog("open"); 
Refer to the following jsPlayground sample.  
Seeni Sakthi Kumar S. 

Matt Abercrombie
Replied On July 10, 2017 11:51 AM UTC

Your solution worked perfectly. Thanks!

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On July 12, 2017 04:40 AM UTC

Hi Matt,  
Thanks for the update.  
We are happy to hear that the issue has been resolved at your end. Please get back to us, if you require further assistance on this.  
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