documentation(898958):Column chooser and column resize topic

ej2-asp-core-mvc/code-snippet/grid/columns/customizecolumnmenu/customizecolumnmenu.cs → ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-contains/columnchooser.cs

@@ -1,6 +1,6 @@
 public IActionResult Index()
 {
-    var Order = OrderDetails.GetAllRecords();
+    var Order = OrdersDetails.GetAllRecords();
     ViewBag.DataSource = Order;
     return View();
 } 

ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-contains/razor

@@ -0,0 +1,8 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnChooser(true).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
+    col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
+}).Toolbar(new List<string>() { "ColumnChooser" }).ColumnChooserSettings(choose=> { choose.Operator("Contains"); }).Render()

ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-contains/tagHelper

@@ -0,0 +1,10 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnChooser='true' toolbar="@(new List<string>() { "ColumnChooser"})">
+    <e-grid-columnChooserSettings operator='contains'></e-grid-columnChooserSettings>
+    <e-grid-columns>
+        <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID"  width="130"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date"  textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>

ej2-asp-core-mvc/code-snippet/grid/columns/resizeevents/resizeevents.cs → ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-diacritics/columnchooser.cs

@@ -1,6 +1,6 @@
 public IActionResult Index()
 {
-    var Order = OrderDetails.GetAllRecords();
+    var Order = OrdersDetails.GetAllRecords();
     ViewBag.DataSource = Order;
     return View();
 } 

ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-diacritics/razor

@@ -0,0 +1,8 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnChooser(true).Columns(col =>
+{
+    col.Field("ÒrderID̂").HeaderText("Òrder ID̂").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
+    col.Field("F̂reight").HeaderText("F̂reight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
+}).Toolbar(new List<string>() { "ColumnChooser" }).ColumnChooserSettings(choose => { choose.IgnoreAccent(true); }).Render()

ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-diacritics/tagHelper

@@ -0,0 +1,10 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnChooser='true' toolbar="@(new List<string>() { "ColumnChooser"})">
+    <e-grid-columnChooserSettings ignoreAccent= "true"></e-grid-columnChooserSettings>
+    <e-grid-columns>
+        <e-grid-column field='ÒrderID̂' headerText='Òrder ID̂' textAlign='Right' width=120></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID"  width="130"></e-grid-column>
+        <e-grid-column field="F̂reight" headerText="F̂reight" format='C' textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date"  textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>

ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-external/columnchooser.cs

@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 

ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-external/razor

@@ -0,0 +1,17 @@
+<div style="padding:0px 0px 20px 0px">
+    @Html.EJS().Button("show")..CssClass("e-primary").Content("open Column Chooser").Render()
+</div>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnChooser(true).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
+    col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
+}).Render()
+<script>
+    document.getElementById('show').addEventListener('click', () => {
+        var gridObj = document.getElementById("Grid").ej2_instances[0];
+        gridObj.columnChooserModule.openColumnChooser(100, 40);
+    });
+</script>

ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-external/tagHelper

@@ -0,0 +1,19 @@
+<div style="padding:0px 0px 20px 0px">
+<ejs-button class='e-primary' id='show'  content="open Column Chooser"> </ejs-button>
+</div>
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnChooser='true' toolbar="@(new List<string>() { "ColumnChooser"})">
+    <e-grid-columns>
+        <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="130"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+
+<script>
+    document.getElementById('show').addEventListener('click', () => {
+        var gridObj = document.getElementById("Grid").ej2_instances[0];
+        gridObj.columnChooserModule.openColumnChooser(100, 40);
+    });
+</script>

ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-hide/columnchooser.cs

@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 

ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-hide/razor

@@ -0,0 +1,8 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("270px").ShowColumnChooser(true).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").ShowInColumnChooser(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
+    col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
+}).Toolbar(new List<string>() { "ColumnChooser" }).Render()

ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-hide/tagHelper

@@ -0,0 +1,9 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="270px" showColumnChooser='true' toolbar="@(new List<string>() { "ColumnChooser"})">
+    <e-grid-columns>
+        <e-grid-column field='OrderID' headerText='Order ID' showInColumnChooser="false" textAlign='Right' width=120></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="130"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>

ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-size/columnchooser.cs

@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 

ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-size/razor

@@ -0,0 +1,19 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnChooser(true).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
+    col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
+}).Toolbar(new List<string>() { "ColumnChooser" }).Render()
+
+<style>
+    .e-grid .e-dialog.e-ccdlg {
+        height: 500px;
+        width: 200px;
+    }
+    .e-grid .e-ccdlg .e-cc-contentdiv {
+            height: 200px;
+            width: 230px;
+    }
+</style>

ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-size/tagHelper

@@ -0,0 +1,19 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnChooser='true' toolbar="@(new List<string>() { "ColumnChooser"})">
+    <e-grid-columns>
+        <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID"  width="130"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date"  textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<style>
+    .e-grid .e-dialog.e-ccdlg {
+        height: 500px;
+        width: 200px;
+    }
+    .e-grid .e-ccdlg .e-cc-contentdiv {
+        height: 200px;
+        width: 230px;
+    }
+</style>

ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser/columnchooser.cs

@@ -1,6 +1,6 @@
 public IActionResult Index()
 {
-    var Order = OrderDetails.GetAllRecords();
+    var Order = OrdersDetails.GetAllRecords();
     ViewBag.DataSource = Order;
     return View();
 } 

ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser/razor

@@ -1,11 +1,8 @@
-@Html.EJS().Grid("ColumnChooser").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnChooser(true).Columns(col =>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("270px").ShowColumnChooser(true).Columns(col =>
 {
     col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("CustomerID").HeaderText("Customer Name").Width("150").ShowInColumnChooser(false).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
+    col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
     col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("ShippedDate").HeaderText("Shipped Date").Width("140").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-    col.Field("ShipCity").Visible(false).HeaderText("Ship Country").Width("150").Visible(false).Add();
-    col.Field("ShipCountry").Visible(false).HeaderText("Ship Country").Width("150").Add();
-
-}).AllowPaging().Toolbar(new List<string>() { "ColumnChooser" }).Render()
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
+}).Toolbar(new List<string>() { "ColumnChooser" }).Render()

ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser/tagHelper

@@ -1,12 +1,9 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnChooser="true" toolbar="@(new List<string>() { "ColumnChooser"})">    
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="270px" showColumnChooser='true' toolbar="@(new List<string>() { "ColumnChooser"})">
     <e-grid-columns>
-        <e-grid-column field="OrderID" headerText="Order ID" width="150" ></e-grid-column>
-        <e-grid-column field="CustomerID" headerText="Customer ID" showInColumnChooser="true" width="150"></e-grid-column>
-        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" textAlign="Right" width="130"></e-grid-column>
-        <e-grid-column field="Freight" headerText="Freight" width="150"></e-grid-column>
-        <e-grid-column field="ShipppedDate" headerText="Shipped Date" format="yMd" textAlign="Right" width="130"></e-grid-column>
-        <e-grid-column field="ShipCountry"  headerText="Ship Country" width="150" ></e-grid-column>
-        <e-grid-column field="ShipCity" headerText="Ship City" visible="false" width="150"></e-grid-column>
+        <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width="120"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="130"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
     </e-grid-columns>
-</ejs-grid>
-
+</ejs-grid>

ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu-stacked/columnmenu.cs

@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrdersDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 

ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu-stacked/razor

@@ -0,0 +1,46 @@
+@{
+    var columnMenuItems = new List<object>
+        {
+            "SortAscending",
+            "SortDescending",
+            "Group",
+            "Ungroup",
+            "Filter",
+            new
+            {
+                text = "Sub Menu",
+                items = new List<object>
+                {
+                    new { text = "Option 1", id = "option1" },
+                    new { text = "Option 2", id = "option2" },
+                    new { text = "Option 3", id = "option3" },
+                    new
+                    {
+                        text = "Nested Sub Menu",
+                        items = new List<object>
+                        {
+                            new { text = "Nested Option 1", id = "nestedoption1" },
+                            new { text = "Nested Option 2", id = "nestedoption2" }
+                        }
+                    }
+                }
+            }
+        };
+}
+
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnMenu(true).AllowSorting().AllowFiltering(true).AllowGrouping().Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add();
+    col.Field("Freight").HeaderText("Freight").Width("130").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipCity").HeaderText("Ship City").Width("130").Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("130").Add();
+}).ColumnMenuItems(columnMenuItems).ColumnMenuClick("columnMenuClick").FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox); }).GroupSettings(group => { group.ShowGroupedColumn(true); }).AllowPaging().Render()
+
+<script>
+   function columnMenuClick(args) {
+        if (args.item.id === 'option1') {
+            // custom function
+        }
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu-stacked/tagHelper

@@ -0,0 +1,50 @@
+@{
+
+    var columnMenuItems = new List<object>
+        {
+            "SortAscending",
+            "SortDescending",
+            "Group",
+            "Ungroup",
+            "Filter",
+            new
+            {
+                text = "Sub Menu",
+                items = new List<object>
+                {
+                    new { text = "Option 1", id = "option1" },
+                    new { text = "Option 2", id = "option2" },
+                    new { text = "Option 3", id = "option3" },
+                    new
+                    {
+                        text = "Nested Sub Menu",
+                        items = new List<object>
+                        {
+                            new { text = "Nested Option 1", id = "nestedoption1" },
+                            new { text = "Nested Option 2", id = "nestedoption2" }
+                        }
+                    }
+                }
+            }
+        };
+
+}
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' allowSorting='true' columnMenuItems='columnMenuItems' 
+showColumnMenu='true' allowFiltering='true' allowGrouping='true' columnMenuClick='columnMenuClick'>
+    <e-grid-filtersettings type="CheckBox"></e-grid-filtersettings>
+    <e-grid-groupsettings showGroupedColumn="true"></e-grid-groupsettings>
+    <e-grid-columns>
+        <e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width="120"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="130"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="130"></e-grid-column>
+        <e-grid-column field="ShipCity" headerText="Ship City" width="130"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script>
+    function columnMenuClick(args) {
+        if (args.item.id === 'option1') {
+                // custom function
+        }
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu/columnmenu.cs

@@ -1,6 +1,6 @@
 public IActionResult Index()
 {
-    var Order = OrderDetails.GetAllRecords();
+    var Order = OrdersDetails.GetAllRecords();
     ViewBag.DataSource = Order;
     return View();
 } 

ej2-asp-core-mvc/code-snippet/grid/columns/columnmenu/razor

@@ -1,9 +1,8 @@
-@Html.EJS().Grid("ColumnMenu").DataSource((IEnumerable<object>)ViewBag.dataSource).ShowColumnMenu(true).AllowSorting().AllowFiltering(true).AllowGrouping().Columns(col => {
-
-  col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-  col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
-  col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-  col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
-  col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
-
-}).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox); }).GroupSettings(group => { group.ShowGroupedColumn(true); }).AllowPaging().Render()
+   @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnMenu(true).AllowSorting().AllowFiltering(true).AllowGrouping().Columns(col =>
+   {
+      col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+      col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add();
+      col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+      col.Field("ShipCity").HeaderText("Ship City").Width("130").Add();
+      col.Field("ShipCountry").HeaderText("Ship Country").Width("130").Add();
+   }).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox); }).GroupSettings(group => { group.ShowGroupedColumn(true); }).AllowPaging().Render()