Show or Hide columns in Dialog editing
17 Feb 20224 minutes to read
You can show hidden columns or hide visible column’s editor in the dialog while editing the grid record using ActionBegin
and ActionComplete
events.
In the ActionBegin
event, based on requestType as beginEdit or add. We can show or hide the editor by using Visible
property of Column
.
In the ActionComplete
event, based on requestType as save. We can reset the properties back to the column state.
In the below example, we have rendered the grid columns CustomerID as hidden column and ShipCountry as visible column. In the edit mode, we have changed the CustomerID column to visible state and ShipCountry column to hidden state.
@using Syncfusion.EJ2
@Html.EJS().Grid("DialogTemplateEdit").DataSource((IEnumerable<object>)ViewBag.DataSource).ActionBegin("actionBegin").ActionComplete("actionComplete").Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Visible(false).Add();
col.Field("Freight").HeaderText("Freight").EditType("numericedit").Format("C2").Width("150").Add();
col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add();
}).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()
<script>
function actionBegin(args) {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
for (var i = 0; i < this.columns.length; i++) {
if (this.columns[i].field == "CustomerID") {
this.columns[i].visible = true;
}
else if (this.columns[i].field == "ShipCountry") {
this.columns[i].visible = false;
}
}
}
}
function actionComplete(args) {
if (args.requestType === 'save') {
for (var i = 0; i < this.columns.length; i++) {
if (this.columns[i].field == "CustomerID") {
this.columns[i].visible = false;
}
else if (this.columns[i].field == "ShipCountry") {
this.columns[i].visible = true;
}
}
}
}
</script>
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}