Category / Section
How to resolve validation message appears even after value change on the drop down?
1 min read
This KB showcase the example to disappear the Validation Message shown even after the value is changed in the dropdown list using valid method.
Solution:
In dropdown list, we have maintained the hidden input element. The jQuery validation is not works for hidden element. Due to this the default validation is not working in dropdown list to overcome this, use the valid method in the dropdown change event.
Step 1: Render the grid control.
HTML
<div id="Grid"></div>
JS
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource: window.gridData, //The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
allowPaging: true,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode:"Normal" },
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", isPrimaryKey: true, headerText: "Order ID", width: 90 },
{ field: "EmployeeID", headerText: "Employee ID", editType: ej.Grid.EditingType.Dropdown, validationRules: { required: true },width: 80}
],
actionComplete:"actionComplete"
});
});
</script>
MVC
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging() /*Paging Enabled*/
.ClientSideEvents(eve => eve.ActionComplete ("actionComplete"))
.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Normal); })
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Cancel);
});
})
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(90).Add();
col.Field("EmployeeID").HeaderText("Employee ID").EditType(EditingType.Dropdown).Width(80).ValidationRules(v => v.AddRule("required", true)).Add();
}))
[CS]
namespace EJGrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var DataSource = OrderRepository.GetAllRecords();
ViewBag.datasource = DataSource;
return View();
}
}
}
ASP
<ej:Grid ID="Grid" runat="server" AllowPaging="True" > <ClientSideEvents ActionComplete="actionComplete " /> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" Width="90" /> <ej:Column Field="EmployeeID" HeaderText="Employee ID" EditType="Dropdown" Width="80" > < ValidationRule > <ej:KeyValue key="required" Value="true" / > < /ValidationRule > </ej:Column> </Columns> <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Normal"></EditSettings> <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> </ej:Grid>
[CS]
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.Grid.DataSource = OrderRepository.GetAllRecords();
this.Grid.DataBind();
}
}
.Net core
<ej-grid id="Grid" allow-paging="true" datasource="ViewBag.DataSource" action-complete="actionComplete ">
<e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="@(EditMode.Normal)"></e-edit-settings>
<e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' />
<e-columns>
<e-column field="OrderID" is-primary-key="true" header-text="Order ID" width="90"></e-column>
<e-column field="EmployeeID" header-text="Employee ID" width="80" edit-type="DropdownEdit" validation-rules="new Dictionary<string, object>(){"required",true}"></e-column>
</e-columns>
</ej-grid>
[CS]
namespace EJGrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var DataSource = OrderRepository.GetAllRecords();
ViewBag.DataSource = DataSource
return View();
}
}
}
Angular
<ej-grid #grid id="Grid" [dataSource]="gridData" allowPaging="true" (actionComplete)="actionComplete($event)" [toolbarSettings]="toolbarItems" [editSettings]="editSettings">
<e-columns>
<e-column field="OrderID" [isPrimaryKey]="true" headerText="OrderID" width="90"></e-column>
<e-column field="EmployeeID" headerText="EmployeeID" editType="dropdownedit" width="80" [validationRules ]= "{ required: true }"></e-column>
</e-columns>
</ej-grid>
[ts file]
public gridData;
public editSettings;
public toolbarItems;
@ViewChild('grid') GridModel: 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'
actionComplete (e:any){
if (e.requestType == "add"){
$("#GridEmployeeID").ejDropDownList({
change: function (args) {
this.element.valid(); // validation message removed once value selected.
}
});
}
}
}
Step 2: In the actionComplete event while adding the records, we have removed the validation message using valid method in the dropdown change event.
<script>
function actionComplete(args)
{
if (args.requestType == "add"){
$("#GridEmployeeID ").ejDropDownList({
change: function (args) {
this.element.valid(); // validation message removed once value selected.
}
});
}
};
</script>
Figure 1: Before using valid method, Validation Message is shown even after the value is changed in the drop down.
Figure 2: After using valid method, Validation Message is disappeared when value is changed in dropdown.
