Skip to content

Commit 15465d2

Browse files
MaithiliyKMaithiliyK
authored
Merge pull request #3747 from syncfusion-content/929925-dialog
documentation(929925):Revamped dialog and how to topic
2 parents a057467 + e0f3df3 commit 15465d2

File tree

108 files changed

+837
-2673
lines changed

Some content is hidden

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

108 files changed

+837
-2673
lines changed

‎ej2-asp-core-mvc/code-snippet/grid/edit/custombutton/custombutton.cs

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

‎ej2-asp-core-mvc/code-snippet/grid/edit/custombutton/razor

Lines changed: 37 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,40 @@
1-
@Html.EJS().Grid("DialogTemplateEdit").DataSource((IEnumerable<object>)ViewBag.DataSource).ActionComplete("actionComplete").Columns(col =>
2-
{
3-
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
4-
col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = true, minLength = 3 }).Add();
5-
col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add();
6-
}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete" }).Render()
7-
1+
@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("348px").Columns(col =>
2+
{
3+
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
4+
col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true" }).Add();
5+
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").ValidationRules(new { required = "true",min=1, max=1000 }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6+
col.Field("ShipName").HeaderText("Ship Name").Width("150").ValidationRules(new { required = "true" }).Add();
7+
col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").ValidationRules(new { required = "true" }).Width("150").Add();
8+
}).ActionComplete("actionComplete").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
89
<script>
9-
function actionComplete(args) {
10-
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
11-
let newFooterButton = {
12-
buttonModel: { content: 'custom' },
13-
click: onCustomButtonClick
14-
};
15-
args.dialog.buttons.push(newFooterButton);
16-
args.dialog.refresh();
17-
}
10+
function actionComplete(args) {
11+
var grid = document.getElementById('grid').ej2_instances[0];
12+
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
13+
args.dialog.buttons = [
14+
{
15+
buttonModel: { content: 'Discard', cssClass: 'e-primary custom-button-style' },
16+
click: () => {
17+
grid.editModule.closeEdit();
18+
}
19+
},
20+
{
21+
buttonModel: { content: 'Submit', cssClass: 'e-success custom-button-style' },
22+
click: () => {
23+
grid.editModule.endEdit();
24+
}
25+
}
26+
];
27+
args.dialog.refresh();
1828
}
19-
function onCustomButtonClick() {
20-
alert('Add/Edit dialog custom footer button clicked');
29+
}
30+
</script>
31+
<style>
32+
.e-footer-content .e-btn.custom-button-style {
33+
border-radius: 4px;
34+
font-size: 15px;
2135
}
22-
</script>
36+
37+
.e-footer-content .e-btn.e-success.custom-button-style {
38+
background: #a1c595;
39+
}
40+
</style>

‎ej2-asp-core-mvc/code-snippet/grid/edit/custombutton/tagHelper

Lines changed: 37 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,42 @@
1-
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" actionComplete="actionComplete" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true">
1+
<ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="273px" toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update","Cancel" })" actionComplete="actionComplete">
22
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings>
3-
<e-grid-pagesettings pageCount="5"></e-grid-pagesettings>
4-
<e-grid-columns>
5-
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column>
6-
<e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" width="150"></e-grid-column>
7-
<e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-grid-column>
8-
</e-grid-columns>
3+
<e-grid-columns>
4+
<e-grid-column field="OrderID" headerText="Order ID" validationRules="@(new { required=true})" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
5+
<e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" type="string" width="120"></e-grid-column>
6+
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" validationRules="@(new { required=true, min=1,max=1000})" editType="numericedit" width="120"></e-grid-column>
7+
<e-grid-column field="ShipName" headerText="Ship Name" width="150" validationRules="@(new { required=true})"></e-grid-column>
8+
<e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150" validationRules="@(new { required=true})"></e-grid-column>
9+
</e-grid-columns>
910
</ejs-grid>
10-
1111
<script>
12-
function actionComplete(args) {
13-
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
14-
let newFooterButton = {
15-
buttonModel: { content: 'custom' },
16-
click: onCustomButtonClick
17-
};
18-
args.dialog.buttons.push(newFooterButton);
19-
args.dialog.refresh();
20-
}
21-
}
22-
function onCustomButtonClick() {
23-
alert('Add/Edit dialog custom footer button clicked');
12+
function actionComplete(args) {
13+
var grid = document.getElementById('grid').ej2_instances[0];
14+
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
15+
args.dialog.buttons = [
16+
{
17+
buttonModel: { content: 'Discard', cssClass: 'e-primary custom-button-style' },
18+
click: () => {
19+
grid.editModule.closeEdit();
20+
}
21+
},
22+
{
23+
buttonModel: { content: 'Submit', cssClass: 'e-success custom-button-style' },
24+
click: () => {
25+
grid.editModule.endEdit();
26+
}
27+
}
28+
];
29+
args.dialog.refresh();
2430
}
31+
}
2532
</script>
33+
<style>
34+
.e-footer-content .e-btn.custom-button-style {
35+
border-radius: 4px;
36+
font-size: 15px;
37+
}
38+
39+
.e-footer-content .e-btn.e-success.custom-button-style {
40+
background: #a1c595;
41+
}
42+
</style>

‎ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/dialog.cs

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

‎ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/razor

Lines changed: 25 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,27 @@
1-
@using Syncfusion.EJ2
2-
3-
@section ControlsSection{
4-
<div class="control-section">
5-
@Html.EJS().Grid("DialogTemplateEdit").DataSource((IEnumerable<object>)ViewBag.dataSource).ActionComplete("actionComplete").Columns(col =>
6-
{
7-
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
8-
col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = true, minLength = 3 }).Add();
9-
col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add();
10-
}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
11-
</div>
12-
13-
<script>
14-
15-
ej.base.L10n.load({
16-
'en-US': {
17-
'grid': {
18-
'SaveButton': 'Submit',
19-
'CancelButton': 'Discard'
20-
}
21-
}
22-
});
23-
24-
function actionComplete(args) {
25-
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
26-
var dialog = args.dialog;
27-
dialog.showCloseIcon = false;
28-
dialog.height = 400;
29-
// change the header of the dialog
30-
dialog.header = args.requestType === 'beginEdit' ? 'Edit Record of ' + args.rowData['CustomerID'] : 'New Customer';
1+
@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("348px").Columns(col =>
2+
{
3+
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
4+
col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true" }).Add();
5+
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").ValidationRules(new { required = "true",min=1, max=1000 }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6+
col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").ValidationRules(new { required = "true" }).Width("150").Add();
7+
}).ActionComplete("actionComplete").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
8+
<script>
9+
ej.base.L10n.load({
10+
'en-US': {
11+
'grid': {
12+
'SaveButton': 'Submit',
13+
'CancelButton': 'Discard'
3114
}
3215
}
33-
</script>
34-
}
16+
});
17+
function actionComplete(args) {
18+
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
19+
var dialog = args.dialog;
20+
dialog.showCloseIcon = false;
21+
dialog.height = 360;
22+
dialog.width = 300;
23+
dialog.header = args.requestType === 'beginEdit' ? 'Edit Record of ' + args.rowData['CustomerID'] : 'New Customer';
24+
}
25+
}
26+
</script>
27+

‎ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/tagHelper

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,28 @@
1-
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" actionComplete="actionComplete" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true">
1+
<ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="273px" toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update","Cancel" })" actionComplete="actionComplete">
22
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings>
3-
<e-grid-pagesettings pageCount="5"></e-grid-pagesettings>
43
<e-grid-columns>
5-
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column>
6-
<e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" width="150"></e-grid-column>
7-
<e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-grid-column>
4+
<e-grid-column field="OrderID" headerText="Order ID" validationRules="@(new { required=true})" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
5+
<e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" type="string" width="120"></e-grid-column>
6+
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" validationRules="@(new { required=true, min=1, max=1000})" editType="numericedit" width="120"></e-grid-column>
7+
<e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150" validationRules="@(new { required=true})"></e-grid-column>
88
</e-grid-columns>
99
</ejs-grid>
10-
11-
1210
<script>
13-
14-
ej.base.L10n.load({
11+
ej.base.L10n.load({
1512
'en-US': {
1613
'grid': {
1714
'SaveButton': 'Submit',
1815
'CancelButton': 'Discard'
1916
}
2017
}
2118
});
22-
2319
function actionComplete(args) {
2420
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
25-
var dialog = args.dialog;
26-
dialog.showCloseIcon = false;
27-
dialog.height = 400;
28-
// change the header of the dialog
29-
dialog.header = args.requestType === 'beginEdit' ? 'Edit Record of ' + args.rowData['CustomerID'] : 'New Customer';
30-
}
21+
var dialog = args.dialog;
22+
dialog.showCloseIcon = false;
23+
dialog.height = 360;
24+
dialog.width = 300;
25+
dialog.header = args.requestType === 'beginEdit' ? 'Edit Record of ' + args.rowData['CustomerID'] : 'New Customer';
26+
}
3127
}
32-
3328
</script>

‎ej2-asp-core-mvc/code-snippet/grid/edit/dialog/dialog.cs

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

‎ej2-asp-core-mvc/code-snippet/grid/edit/dialog/razor

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
@Html.EJS().Grid("DialogEdit").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
1+
@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("348px").Columns(col =>
22
{
33
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
4-
col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true", minLength=3 }).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("ShipCountry").HeaderText("Ship Country").Width("150").Add();
8-
9-
}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
4+
col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true" }).Add();
5+
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").ValidationRules(new { required = "true",min=1, max=1000 }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6+
col.Field("ShipName").HeaderText("Ship Name").Width("150").ValidationRules(new { required = "true" }).Add();
7+
col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").ValidationRules(new { required = "true" }).Width("150").Add();
8+
}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()

‎ej2-asp-core-mvc/code-snippet/grid/edit/dialog/tagHelper

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="273" toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update","Cancel" })">
1+
<ejs-grid id="grid" dataSource="@ViewBag.DataSource" height="273px" toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update","Cancel" })">
22
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings>
33
<e-grid-columns>
44
<e-grid-column field="OrderID" headerText="Order ID" validationRules="@(new { required=true})" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
5-
<e-grid-column field="CustomerID" headerText="Customer ID" validationRules="@(new { required=true, minLength=3})" type="string" width="120"></e-grid-column>
6-
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>
7-
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
5+
<e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" type="string" width="120"></e-grid-column>
6+
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" validationRules="@(new { required=true, min=1, max=1000})" editType="numericedit" width="120"></e-grid-column>
7+
<e-grid-column field="ShipName" headerText="Ship Name" width="150" validationRules="@(new { required=true})"></e-grid-column>
8+
<e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150" validationRules="@(new { required=true})"></e-grid-column>
89
</e-grid-columns>
910
</ejs-grid>

‎ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs

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

0 commit comments

Comments
 (0)