Skip to content

documentation(936948):Resolved issue #3842

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Feb 3, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Height("348px").Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("140").Add();
col.Field("Freight").HeaderText("Freight").Width("130").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("130").Add();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,5 +30,4 @@
selectedRecord['Freight'] = args.value;
gridInstance.aggregateModule.refresh(selectedRecord);
}

</script>
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@Html.EJS().Grid("Auto").DataSource((IEnumerable<object>)ViewBag.dataSource).DataBound("dataBound").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Render()

<script>
function dataBound() {
document.getElementById('Auto').ej2_instances[0].columns[0].isPrimaryKey = 'true';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true">
</e-grid-editSettings>
</ejs-grid>

<script>
function dataBound() {
document.getElementById('Auto').ej2_instances[0].columns[0].isPrimaryKey = 'true';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" dataBound="dataBound">

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" dataBound="dataBound">
</ejs-grid>

<script>
function dataBound() {
const grid = document.getElementById('Auto').ej2_instances[0];
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="315px" >
<e-grid-columns>
<e-grid-column field="EmployeeID" headerText="Employee ID" width="120" textAlign="Right"></e-grid-column>
<e-grid-column field="Names.0.FirstName" headerText="Last Name" width="120"></e-grid-column>
<e-grid-column field="Names.0.LastName" headerText="Last Name" width="120"></e-grid-column>
<e-grid-column field="Title" headerText="Title" width="150"></e-grid-column>
<e-grid-column field="Names.0.FirstName" headerText="Last Name" width="120"></e-grid-column>
<e-grid-column field="Names.0.LastName" headerText="Last Name" width="120"></e-grid-column>
<e-grid-column field="Title" headerText="Title" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
@{
var valueAccess = "valueAccessFn";
}

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height(350).Columns(col =>
{
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
col.Field("Name").HeaderText("Full Name").ValueAccessor(valueAccess).Width("150").Add();
col.Field("Title").HeaderText("Title").Width("150").Add();
}).Render()

<script>
function valueAccessFn(field, data) {
return data[field].map((s) => { return s.LastName || s.FirstName; }).join(' ');
Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
@{
var valueAccess = "valueAccessFn";
}

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="350" >
<e-grid-columns>
<e-grid-column field="EmployeeID" headerText="Employee ID" width="150" ></e-grid-column>
<e-grid-column field="Name" headerText="Full Name" width="150"></e-grid-column>
<e-grid-column field="Title" headerText="Title" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>

<script>
function valueAccessFn(field, data) {
return data[field].map((s) => { return s.LastName || s.FirstName; }).join(' ');
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<ejs-grid id="Grid" allowPaging='true' query="new ej.data.Query().expand('Employee')" >
<e-data-manager url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders/" crossdomain="true" adaptor="ODataV4Adaptor"></e-data-manager>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" width="100" ></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="130"></e-grid-column>
<e-grid-column field="Employee.City" headerText="City" width="130"></e-grid-column>
<e-grid-column field="OrderID" headerText="Order ID" width="100"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="130"></e-grid-column>
<e-grid-column field="Employee.City" headerText="City" width="130"></e-grid-column>
</e-grid-columns>
</ejs-grid>

Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<e-grid-column field="OrderID" headerText="Order ID" width="100" textAlign="Right"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" width="120" ></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
var concatenateFields = "concatenateFieldsFn";
}

@Html.EJS().Grid("ValueAccessor").DataSource((IEnumerable<object>)ViewBag.DataSource).Height(350).Columns(col =>
@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height(350).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
var currencyFormatter = "currencyFormatterFn";
var concatenateFields = "concatenateFieldsFn";
}

<ejs-grid id="ValueAccessor" dataSource="@ViewBag.DataSource" height="350">
<ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="350">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" width="100" textAlign="Right"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add();
col.Field("Freight").HeaderText("Freight").Width("80").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("OrderDate").HeaderText("Order Date").Width("80").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCity").HeaderText("Ship Country").Width("120").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();

}).Render()
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,6 @@
<e-grid-column field='CustomerID' headerText='Customer ID' width="120"></e-grid-column>
<e-grid-column field='Freight' headerText='Freight' format='C2' textAlign='Right' width="80"></e-grid-column>
<e-grid-column field='OrderDate' headerText='Order Date' format='yMd' textAlign='Right' width="80"></e-grid-column>
<e-grid-column field='ShipCountry' headerText='Ship Country' width="80"></e-grid-column>
</e-grid-columns>
</ejs-grid>
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div style="padding:0px 0px 20px 0px">
@Html.EJS().Button("show")..CssClass("e-primary").Content("open Column Chooser").Render()
@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 =>
{
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div style="padding:0px 0px 20px 0px">
<ejs-button class='e-primary' id='show' content="open Column Chooser"> </ejs-button>
<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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@
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') {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ showColumnMenu='true' allowFiltering='true' allowGrouping='true' columnMenuClick
<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-column field="ShipCountry" headerText="Ship Country" width="130"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' allowGrouping='true' allowSorting='true'
showColumnMenu='true' allowFiltering='true' >
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' allowGrouping='true' allowSorting='true' showColumnMenu='true' allowFiltering='true' >
<e-grid-groupsettings showGroupedColumn="true"></e-grid-groupsettings>
<e-grid-filtersettings type="CheckBox"></e-grid-filtersettings>
<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-column field="ShipCountry" headerText="Ship Country" width="130"></e-grid-column>
</e-grid-columns>
</ejs-grid>
39 changes: 17 additions & 22 deletions ej2-asp-core-mvc/code-snippet/grid/columns/columnmenuevents/razor
Original file line number Diff line number Diff line change
@@ -1,22 +1,17 @@
<div id="message" style="color: red; text-align: center;padding-bottom:20px"></div>

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnMenu(true).AllowSorting().AllowFiltering(true).AllowGrouping(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("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();
}).AllowPaging().ColumnMenuClick("columnMenuClick").ColumnMenuOpen("columnMenuOpen").FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox); }).GroupSettings(group => group.ShowGroupedColumn(true)).Render()

<script>
function columnMenuOpen(args) {
document.getElementById("message").innerText = 'columnMenuOpen event is triggered';
}

function columnMenuClick(args) {

document.getElementById("message").innerText = 'columnMenuClick event is triggered';

}
</script>
<div id="message" style="color: red; text-align: center;padding-bottom:20px"></div>
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnMenu(true).AllowSorting().AllowFiltering(true).AllowGrouping(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("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();
}).AllowPaging().ColumnMenuClick("columnMenuClick").ColumnMenuOpen("columnMenuOpen").FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox); }).GroupSettings(group => group.ShowGroupedColumn(true)).Render()
<script>
function columnMenuOpen(args) {
document.getElementById("message").innerText = 'columnMenuOpen event is triggered';
}
function columnMenuClick(args) {
document.getElementById("message").innerText = 'columnMenuClick event is triggered';
}
</script>
Original file line number Diff line number Diff line change
@@ -1,24 +1,19 @@
<p style="color: red; text-align: center;" id="message"></p>

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' allowSorting='true'
showColumnMenu='true' allowFiltering='true' allowGrouping='true' columnMenuClick='columnMenuClick' columnMenuOpen='columnMenuOpen'>
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' allowSorting='true' showColumnMenu='true' allowFiltering='true' allowGrouping='true' columnMenuClick='columnMenuClick' columnMenuOpen='columnMenuOpen'>
<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-column field="ShipCountry" headerText="Ship Country" width="130"></e-grid-column>
</e-grid-columns>
</ejs-grid>

<script>
function columnMenuOpen() {
document.getElementById("message").innerText = 'columnMenuOpen event is Triggered';
}

function columnMenuClick() {
document.getElementById("message").innerText = 'columnMenuClick event is Triggered';
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<ejs-grid id="Grid" dataSource="@ViewBag.data" height="315" >
<e-grid-columns>
<e-grid-column field="EmployeeID" headerText="Employee ID" width="120" textAlign="Right"></e-grid-column>
<e-grid-column field="Name.FirstName" headerText="Last Name" width="120"></e-grid-column>
<e-grid-column field="Name.LastName" headerText="Last Name" width="120"></e-grid-column>
<e-grid-column field="Title" headerText="Title" width="150"></e-grid-column>
<e-grid-column field="EmployeeID" headerText="Employee ID" width="120" textAlign="Right"></e-grid-column>
<e-grid-column field="Name.FirstName" headerText="Last Name" width="120"></e-grid-column>
<e-grid-column field="Name.LastName" headerText="Last Name" width="120"></e-grid-column>
<e-grid-column field="Title" headerText="Title" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();

}).Render()

}).Render()
<style>
.e-grid .e-columnheader .e-icons.e-columnmenu::before {
content: "\e799";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnMenu="true">
<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="150"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
<e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" fromat="yMd" width="150"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" format="C2" width="150"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>

<style>
.e-grid .e-columnheader .e-icons.e-columnmenu::before {
content: "\e799";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@
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();
}).AllowPaging().ColumnMenuClick("columnMenuClick").SortSettings(sort => sort.Columns(cols)).ColumnMenuItems(columnMenuitems).Render()

}).AllowPaging().ColumnMenuClick("columnMenuClick").SortSettings(sort => sort.Columns(cols)).ColumnMenuItems(columnMenuitems).Render()
<script>
function columnMenuClick(args) {
if (args.item.id === 'gridclearsorting') {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,8 @@
List<object> cols = new List<object>();
cols.Add(new { field = "OrderID", direction = "Ascending" });
}


<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' allowSorting='true'
showColumnMenu='true' columnMenuItems='columnMenuitems' columnMenuClick='columnMenuClick'>
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' allowSorting='true' showColumnMenu='true' columnMenuItems='columnMenuitems' columnMenuClick='columnMenuClick'>
<e-grid-sortsettings columns='cols'></e-grid-sortsettings>

<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>
Expand All @@ -18,7 +14,6 @@
<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 === 'gridclearsorting') {
Expand Down
Loading