Remote Validation in Popup Edit window

[Dan]

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)

@(Html.Kendo().Grid<UserModel>()

      .Name("Users")

      .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"))

      .ClientDetailTemplateId("roleTemplate")

      .Sortable()

      .Editable(editing =>

          editing.Mode(GridEditMode.PopUp).Window(w => w.HtmlAttributes(new { })))

      .DataSource(dataSource => dataSource

        .Ajax()

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

        )

      .Filterable()

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

    else

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

        {

            

        }

        #endregion

        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

        {

            get

            {

                return _UserProfile.FirstName;

            }

            set

            {

                _UserProfile.FirstName = value;

            }

        }

        [Required(ErrorMessage = "Last Name Required")]

        [DisplayName("Last Name:")]

        public string LastName

        {

            get

            {

                return _UserProfile.LastName;

            }

            set

            {

                _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")]

        [DataType(DataType.EmailAddress)]

        [DisplayName("Email Address:")]

        public string Email { get; set; }

}

This identical model works fine in a standard scaffold generated view.  Any ideas?

[Dan]

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.

[Vidhin]

I am facing the same issue with my Kendo grid edit popup window. 

[Vesselin Obreshkov]

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 (input.is('[name="MyControlName"]')) {
    var _value = $(input).data('kendoComboBox').value();

    if (_value > 0) {
      $.ajax({
        // 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";

[Henrik]

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! :)