Perform validation in grid, cell edit

[serge]

I have a list of Countries in my Grid, a country has a Code, that is unique. The Grid is in EditCell mode. 

I need to perform a check, if newly inserted Country Code is Unique. 

So, on the controller I have

[AcceptVerbs("GET", "POST")]
public IActionResult KeyExist(string key)
{
	if (_countryService.CodeExists(key))
	{
		return Json($"The Code '{key}' is already used, please try another one!");
	}

	return Json(true);
}

how should I bind the KeyExist method to the grid's validation?

[serge]

for the initial procedure, see here, but for me that does not work, a fix should be applied to that code, see here

[Mihaela]

Hello Serge,

Thank you for the provided code snippet and the shared article.

Since the "InCell" edit mode doesn't support remote validation, as is stated in the article, I would suggest the following approaches:

• Implement an AJAX request to send the entered code to the "KeyExist" Action method:

 

        $(document).ready( function () {
            $.extend(true, kendo.ui.validator, {
                rules: {
                    codevalidation: function (input) {
                        //check if it is the Code field
                        if (input.is("[name=Code]") && input.val()) {
                          var currentInput = input.val();
                          $.ajax({
                                url: '@Url.Action("KeyExist", "ControllerName")',
                                type: "POST",
                                data: { "key": currentInput },
                                success: function (result) {
                                  if (result != true) {
                                    input.attr("data-codevalidation-msg", result);
                                    return false;
                                  }
                                  return true;
                                },
                                error: function () { ... }
                           });
                        }
                        return true;
                    }
                }
            });
        });

 

• Review the demo below, which demonstrates how to validate the field "ProductName" by extending the built-in Kendo UI Validator with a custom rule:

https://demos.telerik.com/aspnet-core/grid/editing-custom-validation

In case you would like to update the grid's edit mode to "InLine", check out the article below that describes how to handle ModelState errors:

https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/editing/inline#handling-modelstate-errors

Would you please give a try to any of these suggestions and let me know if you need further assistance?

 

Best, Mihaela Lukanova Progress Telerik

[serge]

Thanks, Mihaela, in my case I need not only to perform an action with the "ProductName", I need to test in the database, if there is already another "ProductCode", that should be unique. Of course, if the product is Edited, not created, I need to send a ProductId, because the ProductCode should exist for the edited product. To test if is another product than the edited one, I need to send to the Action not only the modified input Code, but also its ProductId... Having two parameters, not one. In Remote attribute there is "AdditionalFields" parameter to add them... Here, I don't know, probably to add the ID to the code... seem tricky

[serge]

I see, that is a probably an other question, this is why I added a new one, here https://www.telerik.com/forums/remote-validation-with-additionalfields-when-editing-the-grid

[serge]

PS. Please add link detection in comments here ;)

[Mihaela]

Hi Serge,

Thank you for your feedback.

You could send the product's id and the entered code via AJAX request to the Action method as follows (if the grid is in "Popup" edit mode):

$.extend(true, kendo.ui.validator, {
  rules: {
    remote: function (input) {
      if (input.is("[name=Code]") && input.val()) {
        var productId = $("input[name='Id']").val();
        var productCode = input.val();
        $.ajax({
          url: '@Url.Action("ActionMethod", "ControllerName")',
          type: "GET",
          async: false,
          data: { "ProductCode": productCode, "id": productId},
          success: function (data) {...},
           error: function () {...}
         });
         return true
       }
       return true
      }  
    },
    messages: {
      remote: function (input) {...}
   }
});

 

For more information, check out the forum thread: https://www.telerik.com/forums/remote-validation-with-additionalfields-when-editing-the-grid

 

Best,
Mihaela Lukanova
Progress Telerik