How to open the column chooser dialog externally?

 
    <input id="btn" type="button"> <!--On this button click Column Chooser Dialog will be opened-->
 
    <div id="Grid"></div>

    <script type="text/javascript">
        $(function () {
            $("#Grid").ejGrid({
                dataSource: window.gridData,
                allowPaging: true,
                showColumnChooser: true,
                /*   dataBound: "dataBound", 
                 *   dataBound event needed only if you would like to remove the default 
                 *   column chooser button
                 */// dataBound event needed only if you would like to remove the default column chooser button
                dataBound: "dataBound",
                columns: [
                        { field: "OrderID" },
                        { field: "CustomerID" },
                        { field: "EmployeeID" },
                        { field: "Freight", format: "{0:C}" },
                        { field: "OrderDate", format: "{0:MM/dd/yyyy}" }
                ]
            });
            $("#btn").ejButton({
                text: "Choose Columns",
                click: "onClick"
            })
        });
    </script>

@Html.EJ().Button("btn").Text("Choose Columns").ClientSideEvents(e => e.Click("onClick"))
 
@(Html.EJ().Grid<object>("Grid")
        .Datasource((IEnumerable<object>)ViewBag.datasource)
        .AllowPaging()
        .ShowColumnChooser()
         /* DataBound event needed only if you would like to remove the default column chooser button  */
        /*   .ClientSideEvents(events => events.DataBound("dataBound"))
         *   DataBound event needed only if you would like to remove the default
         *   column chooser button
        */
        .Columns(col =>
        {
            col.Field("OrderID").Add();
            col.Field("CustomerID").Add();
            col.Field("EmployeeID").Add();
            col.Field("Freight").Format("{0:C}").Add();
            col.Field("OrderDate").Format("{0:MM/dd/yyyy}").Add();
        })
)

namespace MvcApplication66.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.datasource = order;
            return View();
        }
    }
}

    <ej:Button ID="btn" runat="server" Type="Button" ClientSideOnClick="onClick" Text="Choose Columns"></ej:Button>
 
    <ej:Grid ID="Grid" runat="server" AllowPaging="True">
        <Columns>
            <ej:Column Field="OrderID" />
            <ej:Column Field="CustomerID" />
            <ej:Column Field="EmployeeID" />
            <ej:Column Field="Freight" Format="{0:C}" />
            <ej:Column Field="OrderDate" Format="{0:MM/dd/yyyy}" />
        </Columns>
        <%--<ClientSideEvents DataBound="dataBound" />
        <%--DataBound event needed only if would like to 
        remove the default Column chooser button--%>
 
       <ClientSideEvents DataBound="dataBound" />
    </ej:Grid>

namespace Sample
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Grid.DataSource = new MyDataDataContext().Orders.ToList();
            this.Grid.DataBind();
        }
 
    }
}

    <script type="text/javascript">
        function onClick(args) {
            var proxy = $("#Grid").ejGrid("instance");
            var top = this.element.offset().top, left = this.element.offset().left + 250;
            var dlgWidth = 230;
            if ($("#" + proxy._id + "ccDiv").length && proxy.element.find(".e-ccButton").length) {
                //check whether column chooser elements exisiting or not
                $("#" + proxy._id + "ccDiv").ejDialog({//id of column chooser dialog Grid’s ID + ccDiv
                    width: '230px',
                    height: '309px',
                    position: {
                        X: (proxy.model.enableRTL ? (left - dlgWidth + 143) : (left - dlgWidth)),
                        Y: top + this.element.height() + 10
                    }
                }).ejDialog("open");
                $("#" + proxy._id + "liScrollerDiv").ejScroller({ height: '228', width: '228', buttonSize: 0 });
                $("#" + proxy._id + "liScrollerDiv").ejScroller('refresh');
            }
        }
    </script>

<script>
    function dataBound(args) {
        var proxy = this;
        setTimeout(function () {
            $(".e-ccButton").addClass("e-hide");
            proxy.element.css("margin-top", "0px")
        }, 0)
    }
</script>