Skip to content

Commit 066c02e

Browse files
MaithiliyKMaithiliyK
authored
Merge pull request #3229 from syncfusion-content/898958-columnchooser
documentation(898958):Column chooser and column resize topic
2 parents 92c9f3a + e408b94 commit 066c02e

File tree

135 files changed

+2094
-847
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

135 files changed

+2094
-847
lines changed

‎ej2-asp-core-mvc/code-snippet/grid/columns/customizecolumnmenu/customizecolumnmenu.cs renamed to ‎ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-contains/columnchooser.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
public IActionResult Index()
22
{
3-
var Order = OrderDetails.GetAllRecords();
3+
var Order = OrdersDetails.GetAllRecords();
44
ViewBag.DataSource = Order;
55
return View();
66
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnChooser(true).Columns(col =>
2+
{
3+
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
4+
col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
5+
col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6+
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
7+
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
8+
}).Toolbar(new List<string>() { "ColumnChooser" }).ColumnChooserSettings(choose=> { choose.Operator("Contains"); }).Render()

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnChooser='true' toolbar="@(new List<string>() { "ColumnChooser"})">
2+
<e-grid-columnChooserSettings operator='contains'></e-grid-columnChooserSettings>
3+
<e-grid-columns>
4+
<e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-grid-column>
5+
<e-grid-column field="CustomerID" headerText="Customer ID" width="130"></e-grid-column>
6+
<e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="120"></e-grid-column>
7+
<e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
8+
<e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
9+
</e-grid-columns>
10+
</ejs-grid>

‎ej2-asp-core-mvc/code-snippet/grid/columns/resizeevents/resizeevents.cs renamed to ‎ej2-asp-core-mvc/code-snippet/grid/columns/columnchooser-diacritics/columnchooser.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
public IActionResult Index()
22
{
3-
var Order = OrderDetails.GetAllRecords();
3+
var Order = OrdersDetails.GetAllRecords();
44
ViewBag.DataSource = Order;
55
return View();
66
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnChooser(true).Columns(col =>
2+
{
3+
col.Field("ÒrderID̂").HeaderText("Òrder ID̂").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
4+
col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
5+
col.Field("F̂reight").HeaderText("F̂reight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6+
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
7+
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
8+
}).Toolbar(new List<string>() { "ColumnChooser" }).ColumnChooserSettings(choose => { choose.IgnoreAccent(true); }).Render()

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnChooser='true' toolbar="@(new List<string>() { "ColumnChooser"})">
2+
<e-grid-columnChooserSettings ignoreAccent= "true"></e-grid-columnChooserSettings>
3+
<e-grid-columns>
4+
<e-grid-column field='ÒrderID̂' headerText='Òrder ID̂' textAlign='Right' width=120></e-grid-column>
5+
<e-grid-column field="CustomerID" headerText="Customer ID" width="130"></e-grid-column>
6+
<e-grid-column field="F̂reight" headerText="F̂reight" format='C' textAlign="Right" width="120"></e-grid-column>
7+
<e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
8+
<e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
9+
</e-grid-columns>
10+
</ejs-grid>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public IActionResult Index()
2+
{
3+
var Order = OrdersDetails.GetAllRecords();
4+
ViewBag.DataSource = Order;
5+
return View();
6+
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div style="padding:0px 0px 20px 0px">
2+
@Html.EJS().Button("show")..CssClass("e-primary").Content("open Column Chooser").Render()
3+
</div>
4+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnChooser(true).Columns(col =>
5+
{
6+
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
7+
col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
8+
col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
9+
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
10+
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
11+
}).Render()
12+
<script>
13+
document.getElementById('show').addEventListener('click', () => {
14+
var gridObj = document.getElementById("Grid").ej2_instances[0];
15+
gridObj.columnChooserModule.openColumnChooser(100, 40);
16+
});
17+
</script>

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div style="padding:0px 0px 20px 0px">
2+
<ejs-button class='e-primary' id='show' content="open Column Chooser"> </ejs-button>
3+
</div>
4+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnChooser='true' toolbar="@(new List<string>() { "ColumnChooser"})">
5+
<e-grid-columns>
6+
<e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-grid-column>
7+
<e-grid-column field="CustomerID" headerText="Customer ID" width="130"></e-grid-column>
8+
<e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="120"></e-grid-column>
9+
<e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
10+
<e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
11+
</e-grid-columns>
12+
</ejs-grid>
13+
14+
<script>
15+
document.getElementById('show').addEventListener('click', () => {
16+
var gridObj = document.getElementById("Grid").ej2_instances[0];
17+
gridObj.columnChooserModule.openColumnChooser(100, 40);
18+
});
19+
</script>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public IActionResult Index()
2+
{
3+
var Order = OrdersDetails.GetAllRecords();
4+
ViewBag.DataSource = Order;
5+
return View();
6+
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("270px").ShowColumnChooser(true).Columns(col =>
2+
{
3+
col.Field("OrderID").HeaderText("Order ID").Width("120").ShowInColumnChooser(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
4+
col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
5+
col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6+
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
7+
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
8+
}).Toolbar(new List<string>() { "ColumnChooser" }).Render()

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="270px" showColumnChooser='true' toolbar="@(new List<string>() { "ColumnChooser"})">
2+
<e-grid-columns>
3+
<e-grid-column field='OrderID' headerText='Order ID' showInColumnChooser="false" textAlign='Right' width=120></e-grid-column>
4+
<e-grid-column field="CustomerID" headerText="Customer ID" width="130"></e-grid-column>
5+
<e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="120"></e-grid-column>
6+
<e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
7+
<e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
8+
</e-grid-columns>
9+
</ejs-grid>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public IActionResult Index()
2+
{
3+
var Order = OrdersDetails.GetAllRecords();
4+
ViewBag.DataSource = Order;
5+
return View();
6+
}

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnChooser(true).Columns(col =>
2+
{
3+
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
4+
col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
5+
col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6+
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
7+
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
8+
}).Toolbar(new List<string>() { "ColumnChooser" }).Render()
9+
10+
<style>
11+
.e-grid .e-dialog.e-ccdlg {
12+
height: 500px;
13+
width: 200px;
14+
}
15+
.e-grid .e-ccdlg .e-cc-contentdiv {
16+
height: 200px;
17+
width: 230px;
18+
}
19+
</style>

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnChooser='true' toolbar="@(new List<string>() { "ColumnChooser"})">
2+
<e-grid-columns>
3+
<e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-grid-column>
4+
<e-grid-column field="CustomerID" headerText="Customer ID" width="130"></e-grid-column>
5+
<e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="120"></e-grid-column>
6+
<e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
7+
<e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
8+
</e-grid-columns>
9+
</ejs-grid>
10+
<style>
11+
.e-grid .e-dialog.e-ccdlg {
12+
height: 500px;
13+
width: 200px;
14+
}
15+
.e-grid .e-ccdlg .e-cc-contentdiv {
16+
height: 200px;
17+
width: 230px;
18+
}
19+
</style>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
public IActionResult Index()
22
{
3-
var Order = OrderDetails.GetAllRecords();
3+
var Order = OrdersDetails.GetAllRecords();
44
ViewBag.DataSource = Order;
55
return View();
66
}

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1-
@Html.EJS().Grid("ColumnChooser").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnChooser(true).Columns(col =>
1+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("270px").ShowColumnChooser(true).Columns(col =>
22
{
33
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
4-
col.Field("CustomerID").HeaderText("Customer Name").Width("150").ShowInColumnChooser(false).Add();
4+
col.Field("CustomerID").HeaderText("Customer ID").Width("130").Add();
5+
col.Field("Freight").HeaderText("Freight").Width("120").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
56
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6-
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
7-
col.Field("ShippedDate").HeaderText("Shipped Date").Width("140").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
8-
col.Field("ShipCity").Visible(false).HeaderText("Ship Country").Width("150").Visible(false).Add();
9-
col.Field("ShipCountry").Visible(false).HeaderText("Ship Country").Width("150").Add();
10-
11-
}).AllowPaging().Toolbar(new List<string>() { "ColumnChooser" }).Render()
7+
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
8+
}).Toolbar(new List<string>() { "ColumnChooser" }).Render()

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

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnChooser="true" toolbar="@(new List<string>() { "ColumnChooser"})">
1+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="270px" showColumnChooser='true' toolbar="@(new List<string>() { "ColumnChooser"})">
22
<e-grid-columns>
3-
<e-grid-column field="OrderID" headerText="Order ID" width="150" ></e-grid-column>
4-
<e-grid-column field="CustomerID" headerText="Customer ID" showInColumnChooser="true" width="150"></e-grid-column>
5-
<e-grid-column field="OrderDate" headerText="Order Date" format="yMd" textAlign="Right" width="130"></e-grid-column>
6-
<e-grid-column field="Freight" headerText="Freight" width="150"></e-grid-column>
7-
<e-grid-column field="ShipppedDate" headerText="Shipped Date" format="yMd" textAlign="Right" width="130"></e-grid-column>
8-
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150" ></e-grid-column>
9-
<e-grid-column field="ShipCity" headerText="Ship City" visible="false" width="150"></e-grid-column>
3+
<e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width="120"></e-grid-column>
4+
<e-grid-column field="CustomerID" headerText="Customer ID" width="130"></e-grid-column>
5+
<e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="120"></e-grid-column>
6+
<e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" type='date' format="yMd" width="130"></e-grid-column>
7+
<e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
108
</e-grid-columns>
11-
</ejs-grid>
12-
9+
</ejs-grid>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public IActionResult Index()
2+
{
3+
var Order = OrdersDetails.GetAllRecords();
4+
ViewBag.DataSource = Order;
5+
return View();
6+
}

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@{
2+
var columnMenuItems = new List<object>
3+
{
4+
"SortAscending",
5+
"SortDescending",
6+
"Group",
7+
"Ungroup",
8+
"Filter",
9+
new
10+
{
11+
text = "Sub Menu",
12+
items = new List<object>
13+
{
14+
new { text = "Option 1", id = "option1" },
15+
new { text = "Option 2", id = "option2" },
16+
new { text = "Option 3", id = "option3" },
17+
new
18+
{
19+
text = "Nested Sub Menu",
20+
items = new List<object>
21+
{
22+
new { text = "Nested Option 1", id = "nestedoption1" },
23+
new { text = "Nested Option 2", id = "nestedoption2" }
24+
}
25+
}
26+
}
27+
}
28+
};
29+
}
30+
31+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnMenu(true).AllowSorting().AllowFiltering(true).AllowGrouping().Columns(col =>
32+
{
33+
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
34+
col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add();
35+
col.Field("Freight").HeaderText("Freight").Width("130").Format("C").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
36+
col.Field("ShipCity").HeaderText("Ship City").Width("130").Add();
37+
col.Field("ShipCountry").HeaderText("Ship Country").Width("130").Add();
38+
}).ColumnMenuItems(columnMenuItems).ColumnMenuClick("columnMenuClick").FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox); }).GroupSettings(group => { group.ShowGroupedColumn(true); }).AllowPaging().Render()
39+
40+
<script>
41+
function columnMenuClick(args) {
42+
if (args.item.id === 'option1') {
43+
// custom function
44+
}
45+
}
46+
</script>

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
@{
2+
3+
var columnMenuItems = new List<object>
4+
{
5+
"SortAscending",
6+
"SortDescending",
7+
"Group",
8+
"Ungroup",
9+
"Filter",
10+
new
11+
{
12+
text = "Sub Menu",
13+
items = new List<object>
14+
{
15+
new { text = "Option 1", id = "option1" },
16+
new { text = "Option 2", id = "option2" },
17+
new { text = "Option 3", id = "option3" },
18+
new
19+
{
20+
text = "Nested Sub Menu",
21+
items = new List<object>
22+
{
23+
new { text = "Nested Option 1", id = "nestedoption1" },
24+
new { text = "Nested Option 2", id = "nestedoption2" }
25+
}
26+
}
27+
}
28+
}
29+
};
30+
31+
}
32+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' allowSorting='true' columnMenuItems='columnMenuItems'
33+
showColumnMenu='true' allowFiltering='true' allowGrouping='true' columnMenuClick='columnMenuClick'>
34+
<e-grid-filtersettings type="CheckBox"></e-grid-filtersettings>
35+
<e-grid-groupsettings showGroupedColumn="true"></e-grid-groupsettings>
36+
<e-grid-columns>
37+
<e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width="120"></e-grid-column>
38+
<e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
39+
<e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="130"></e-grid-column>
40+
<e-grid-column field="ShipCountry" headerText="Ship Country" width="130"></e-grid-column>
41+
<e-grid-column field="ShipCity" headerText="Ship City" width="130"></e-grid-column>
42+
</e-grid-columns>
43+
</ejs-grid>
44+
<script>
45+
function columnMenuClick(args) {
46+
if (args.item.id === 'option1') {
47+
// custom function
48+
}
49+
}
50+
</script>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
public IActionResult Index()
22
{
3-
var Order = OrderDetails.GetAllRecords();
3+
var Order = OrdersDetails.GetAllRecords();
44
ViewBag.DataSource = Order;
55
return View();
66
}

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

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

0 commit comments

Comments
 (0)