How to Implement Show Column Choser On Dynamic Binding Grid.

[Mithun Revankar]

Hie,

I Am Trying To Implement Dynamic Columnchoser for dynamically binded Ejgrid, still I am Unable to do it. Please let me help To find the solution.

my code is as follows
------------------------------------------------------------------------------------------------------------------------------------------------------------------------


 @(Html.EJ().Grid<CRM.ViewModel.CustomerIndexVM>("FlatGrid1")
                                     .Datasource(ds => ds.URL("../Customer/DataSource?Type=" + @ViewBag.Type + "&IsActive=" + @ViewBag.IsActive + "").Adaptor("UrlAdaptor").Offline(true))
                                     .AllowSorting()
                                     .AllowPaging().PageSettings(p => { p.PageSize(19); })
                                     .ShowColumnChooser()
                                     .AllowFiltering()
                                     .FilterSettings(filter => { filter.FilterType(FilterType.Menu); })
                                     .AllowSearching()
                                     .AllowSelection()
                                     .AllowResizeToFit()

                                             .ToolbarSettings(toolBar => toolBar.ShowToolbar(true).ToolbarItems(items =>
                                                    {
                                                        items.AddTool(ToolBarItems.Add);
                                                        items.AddTool(ToolBarItems.ExcelExport);
                                                        items.AddTool(ToolBarItems.WordExport);
                                                        items.AddTool(ToolBarItems.PdfExport);
                                                        items.AddTool(ToolBarItems.PrintGrid);
                                                    }))
                                 
                                    .ClientSideEvents(eve => eve.ActionComplete("actionComplete"))
                                    .ClientSideEvents(eve => eve.DataBound("DataBound"))
                                    .ClientSideEvents(eve => { eve.ActionBegin("begin"); })
                                    .ClientSideEvents(evt => evt.ToolbarClick("OnToolbarClick")))

[Balaji Marimuthu]

Hi Mithun, 

 

Thanks for contacting Syncfusion support. 

 

We have considered “Column chooser does not render properly when bind the remote data with auto generated columns in Grid” as an issue and the fix will be included in our Vol 2, Service Pack 1 release.   

Until then, we suggest you to render the column chooser using client side events in Grid. Refer to the Sample, code example and help document as below. 

 

Sample: Sample-124274 

 

Help Documents: http://help.syncfusion.com/js/api/ejgrid#members:showcolumnchooser 

http://help.syncfusion.com/js/api/ejgrid#events:databound 

 

 

Note: Please remove the ShowColumnChooser property in Grid properties and use only client side events. 

 

 

@(Html.EJ().Grid<object>("FlatGrid") 

             .Datasource(ds => ds.URL("/Grid/DataSource").Adaptor(AdaptorType.UrlAdaptor).Offline(true)) 

         .AllowSorting() 

         .AllowPaging().PageSettings(p => { p.PageSize(19); }) 

             //.ShowColumnChooser() 

         .AllowFiltering() 

         .FilterSettings(filter => { filter.FilterType(FilterType.Menu); }) 

         .AllowSearching() 

         .AllowSelection() 

         .AllowResizeToFit() 

 

                 .ToolbarSettings(toolBar => toolBar.ShowToolbar(true).ToolbarItems(items => 

                                                    { 

                                                        items.AddTool(ToolBarItems.Add); 

                                                        items.AddTool(ToolBarItems.ExcelExport); 

                                                        items.AddTool(ToolBarItems.WordExport); 

                                                        items.AddTool(ToolBarItems.PdfExport); 

                                                        items.AddTool(ToolBarItems.PrintGrid); 

                                                    })) 

 

                                    .ClientSideEvents(eve => eve.ActionComplete("actionComplete")) 

                                    .ClientSideEvents(eve => eve.DataBound("DataBound")) 

                                    .ClientSideEvents(eve => { eve.ActionBegin("begin"); }) 

                                    .ClientSideEvents(evt => evt.ToolbarClick("OnToolbarClick"))) 

 

<script type="text/javascript"> 

 

    function DataBound(args) { 

        $("#FlatGrid").ejGrid({ 

            showColumnChooser: true 

        }); 

    } 

</script> 

 

 

 

 

Regards, 

Balaji Marimuthu