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

EjDialog for Column Chooser Disappears After Opening

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.

3 Replies

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

MA Matt Abercrombie July 10, 2017 11:51 AM UTC

Your solution worked perfectly. Thanks!

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

Live Chat Icon For mobile
Up arrow icon