How to customize or change position of grid validation message during editing?

 
<div id="FlatGrid"></div>
 

 
<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>
 

 
@(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();
        }
 
      }
 

 
<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() };
        }
 
 
 

<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();
        }
 

 
<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 });
               }
        }
    }
}
 

 
<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>