Skip to content

Commit 066c02e

Browse files
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
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
}
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()
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>
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
}
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()
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>
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+
}
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>
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>
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+
}

0 commit comments

Comments
 (0)