Remote Validation in Popup Edit window

5 posts, 0 answers
  1. Dan
    Dan avatar
    3 posts
    Member since:
    Aug 2012

    Posted 30 Oct 2012 Link to this post

    I can't seem to get remote validation to work in my popup edit window.  Normal validation ([Required] etc) seems to work fine, but the remote call to the JsonResult method isn't working.  In a plain MVC view for the same model the remote validator works as expected.

    Here is the grid (most irrelevant columns removed)
          .ToolBar(commands => { commands.Create().Text("Create new User"); })
          .Columns(columns =>
              columns.Bound(o => o.uidIdentity).Hidden();
              columns.Bound(o => o.UserName).Title("Users Name").Sortable(true).Filterable(true).Width(200)
                  .HeaderHtmlAttributes(new { style = "text-align:center;align=center" }).HtmlAttributes(new { style = "text-align:center;align=center" });
              columns.Bound(o => o.Email).Title("Email Address ").Sortable(true).Filterable(true).Width(175)
                  .HeaderHtmlAttributes(new { style = "text-align:center;align=center" }).HtmlAttributes(new { style = "text-align:center;align=center" });
          .Events(events => events.DataBound("UserGrid_DataBound").Edit("UserGrid_edit"))
          .Editable(editing =>
              editing.Mode(GridEditMode.PopUp).Window(w => w.HtmlAttributes(new { })))
          .DataSource(dataSource => dataSource
            .Events(e => e.Error("error_handler"))
            .Read("_GetTpaUser", "User")
            .Create("_InsertUser", "User")
            .Update("_EditUser", "User")
            .Destroy("_DeleteUser", "User")
            .Model(model => model.Id(o => o.UserName))
          .Scrollable(scroll => scroll.Enabled(true).Height(500))
          .Resizable(resize => resize.Columns(true))
          .Pageable(pager => pager.PageSizes(true))

    Here is the controller JsonResult:

    public JsonResult UserNameExists(string UserName)
        AccountRepository _repository = new AccountRepository();
        if (!(_repository.CheckUserNameExists(UserName)))
            return Json(true, JsonRequestBehavior.AllowGet);
            return Json(string.Format("User name: {0} is already in use.", UserName), JsonRequestBehavior.AllowGet);

    Here is the model (irrelevant fields removed):

    public class UserModel
            #region Constructor
            public UserModel()
            private AccountRepository _reposAcct = new AccountRepository();
            private spGetUserProfileResult _UserProfile = new spGetUserProfileResult();
            public Guid UserGuiD { get; set; }
            public int UserID { get; set; }
            [Required(ErrorMessage = "First Name Required")]
            [DisplayName("First Name:")]
            public string FirstName
                    return _UserProfile.FirstName;
                    _UserProfile.FirstName = value;
            [Required(ErrorMessage = "Last Name Required")]
            [DisplayName("Last Name:")]
            public string LastName
                    return _UserProfile.LastName;
                    _UserProfile.LastName = value;
            [Required(ErrorMessage = "User Name Required")]
            [Remote("UserNameExists", "AddUserLogin", "Administration")]
            [DisplayName("User Name:")]      
            public string UserName { get; set; }
            [Required(ErrorMessage = "Email Address Required")]
            [ValidateEmail(ErrorMessage = "A valid email address is required")]
            [DisplayName("Email Address:")]
            public string Email { get; set; }

    This identical model works fine in a standard scaffold generated view.  Any ideas?
  2. Dan
    Dan avatar
    3 posts
    Member since:
    Aug 2012

    Posted 01 Nov 2012 Link to this post

    In the abscence of any responses I also submitted a trouble ticket on this, and found that the Kendo grid doesn't support Remote Validation at all, so if you're someone with a similar problem, there you go.

    I ended up having to use another view for editing.
  3. Vidhin
    Vidhin avatar
    6 posts
    Member since:
    Nov 2012

    Posted 25 Mar 2013 Link to this post

    I am facing the same issue with my Kendo grid edit popup window. 
  4. Vesselin Obreshkov
    Vesselin Obreshkov avatar
    81 posts
    Member since:
    Jan 2010

    Posted 11 Apr 2013 Link to this post

    The way I have been able to add remote validation is like this. In this example I am validating a ComboBox and making sure that if you enter a numeric value instead of selecting an item from the list that value is valid 

    var validator = form.kendoValidator().data('kendoValidator');
    validator.options.rules.mycustomrule = function (input) {
      var isValid = true;
      if ('[name="MyControlName"]')) {
        var _value = $(input).data('kendoComboBox').value();
        if (_value > 0) {
            // This is key, otherwise request will be made asynchronously and you won't get your response from the server when needed
            async: false,
            type: 'GET',
            url: '@Url.Action("ValidationAction", "Controller")',
            data: {
              id: _value
          // My action is a JsonResult that returns either true or false (no quotes, etc.)
          .done(function (data) {
            isValid = data;
          .fail(function (request, status, error) {
            isValid = false;
        else {
          isValid = false;
      return isValid;
    validator.options.messages.mycustomrule = "My custom error message";

  5. Henrik
    Henrik avatar
    40 posts
    Member since:
    Jan 2009

    Posted 16 Jun 2013 Link to this post

    Vesselin could you please post the complete code?

    I cannot figure out where to put the code you posted. Im using a kendo grid, with popup editing and a custom editor template.

    I need to validate a field inside the popup editor modal window.

    A little more direction would be greatly appreciated! :)
Back to Top