Category / Section
How to customize or change position of grid validation message during editing?
3 mins read
This knowledge base explains how to customize or change the validation error message position during editing.
Solution
We can change the validation error message position by overriding the “errorPlacement method” of the jQuery validate.
Step 1: Render the Grid
HTML
<div id="FlatGrid"></div>
JS
<script type="text/javascript">
$(function () {
$("#FlatGrid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
actionComplete: "complete",
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "dialog", },
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
columns: [
{ field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75 },
{ field: "CustomerID", headerText: "Customer ID", width: 80, validationRules: { required: true },
{ field: "EmployeeID", headerText: "Employee ID", editType: "numericedit", width: 80 },
{ field: "ShipCity", headerText: "Ship city", width: 80, editType: "dropdownedit" }
]
});
});
</script>
MVC
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.EditSettings(s => { s.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Dialog); })
.ToolbarSettings(t =>
{
t.ShowToolbar().ToolbarItems(i =>
{
i.AddTool(ToolBarItems.Add);
i.AddTool(ToolBarItems.Edit);
i.AddTool(ToolBarItems.Delete);
});
})
.Columns(col =>
{
col.Field("OrderID").IsPrimaryKey(true).Width(90).Add();
col.Field("CustomerID").HeaderText("ShipCity").ValidationRules(v => v.AddRule("required", true)).Width(90).Add();
col.Field("EmployeeID")
.EditType(EditingType.NumericEdit).Width(90).Add();
col.Field("ShipCity").HeaderText("ShipCity")
.EditType(EditingType.DropdownEdit).Width(90).Add();
})
.ClientSideEvents(eve => { eve.ActionComplete("complete"); })
)
[CS]
public class GridController : Controller
{
public ActionResult GridFeatures()
{
var DataSource = OrderRepository.GetAllRecords();
ViewBag.datasource = DataSource;
return View();
}
}
ASP
<ej:Grid ID="FlatGrid" runat="server" AllowPaging="True"> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" Width="90" /> <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80"> <ValidationRule> <ej:KeyValue Key="required" Value="true" /> </ValidationRule> </ej:Column> <ej:Column Field="EmployeeID" HeaderText="Employee ID" EditType="Numeric" Width="90" /> <ej:Column Field="ShipCity" HeaderText="Ship City" Width="90" EditType="Dropdown" /> </Columns> <EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" EditMode="Dialog"></EditSettings> <ClientSideEvents ActionComplete="complete" /> <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> </ej:Grid>
[CS]
protected void Page_Load(object sender, EventArgs e)
{
this.FlatGrid.DataManager = new DataSource() { Json = OrderRepository.GetAllRecords() };
}
.Net core
<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.DataSource" action-complete="complete">
<e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="Dialog"></e-edit-settings>
<e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel","delete"}' />
<e-columns>
<e-column field="OrderID" is-primary-key="true" header-text="Order ID" width="90"></e-column>
<e-column field="CustomerID" header-text="Customer ID" validation-rules='@(new Dictionary<string,object> { {"required",true} })'></e-column>
<e-column field="EmployeeID" header-text="Employee ID" edit-type="Numeric" width="90"></e-column>
<e-column field="ShipCity" header-text="Ship City" width="90" edit-type="Dropdown"></e-column>
</e-columns>
</ej-grid>
[CS]
public ActionResult GridFeatures()
{
var DataSource = OrderRepository.GetAllRecords();
ViewBag.DataSource = DataSource;
return View();
}
Angular
<ej-grid id="Grid" #grid [dataSource]="gridData" allowPaging="true" [toolbarSettings]="toolbarItems" [editSettings]="editSettings" (actionComplete)="onActionComplete($event)" >
<e-columns>
<e-column field="OrderID" [isPrimaryKey]="true" headerText="OrderID"></e-column>
<e-column field="CustomerID" headerText="CustomerID"[validationRules]= "{ required: true}"></e-column>
<e-column field="EmployeeID" headerText="Freight" editType="numericedit" ></e-column>
<e-column field="ShipCity" headerText="ShipCountry" editType="dropdownedit" ></e-column>
</e-columns>
</ej-grid>
Ts File
export class GridComponent {
public gridData;
public editSettings;
public toolbarItems;
@ViewChild('grid') Grid: EJComponents<any, any>;
constructor()
{
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, editMode:"dialog" };
this.toolbarItems = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] };
this.gridData = window.gridData; //The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
}
onActionComplete(e: any) {
if (e.requestType == "beginedit" || e.requestType == "add") {
var validate = $("#" + this.Grid.widget._id + "EditForm").validate();
validate.settings["errorPlacement"] = function (error, element) {
var $td = element.closest("td"), $container = $(error).addClass("e-error");
$td.find(".e-error").remove();
element.hasClass("e-numerictextbox") ? $container.insertAfter(element.closest(".e-numeric")) : $container.insertAfter(element);
$container.offset({ left: element.offset().left + element.outerWidth(), top: element.offset().top });
}
}
}
}
Step 2: Change the template elements to appropriate JS controls based on column type in actionComplete event and override error placement here.
<script>
function complete(args) {
if (args.requestType == "beginedit" || args.requestType == "add") {
var validate = $("#" + this._id + "EditForm").validate();
validate.settings["errorPlacement"] = function (error, element) {
var $td = element.closest("td"), $container = $(error).addClass("e-error");
$td.find(".e-error").remove();
element.hasClass("e-numerictextbox") ? $container.insertAfter(element.closest(".e-numeric")) : $container.insertAfter(element);
$container.offset({ left: element.offset().left + element.outerWidth(), top: element.offset().top });
}
}
}
</script>
Figure: Validation message with customized position
