Remote validation with AdditionalFields when editing the Grid

[serge]

In a Grid, I try to edit a Product, that should have a unique Code.

In that case, I need the remote validation, to test, if the edited code would exist already in the database, different, from the edited product, of course. 

For that, I need to send to the server the edited product Code, along with its Id.

In such cases, I would have an action like this, in the controller (documented here):

DTO:

[Remote(action: "VerifyCode", controller: "Products", AdditionalFields = nameof(ProductId))]
[Display(Name = "Product Code")]
public string Code { get; set; }

Controller:

[AcceptVerbs("GET", "POST")]
public IActionResult VerifyCode(string code, int id)
{
    if (!_productService.VerifyCode(code, id))
    {
        return Json($"The code {code} is already taken by another product but shoud be unique, please change the code.");
    }

    return Json(true);
}

how to perform such validation when editing the Grid? Ideally inCell edit, but at least in Popup Mode....

[Mihaela]

Hello Serge,

Thank you for the provided code snippets.

You could send the product's id and the entered code via AJAX request to the Action method "VerifyCode" 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("VerifyCode", "Products")',
          type: "GET",
          async: false,
          data: { "ProductCode": productCode, "id": productId},
          success: function (data) {
            if (data == true) {
                input.attr("data-val-remote", "");
            } else {
                 input.attr("data-val-remote", data);
            }
           },
           error: function () {...}
         });
         return true
       }
       return true
      }  
    },
    messages: {
      remote: function (input) {
        return input.attr("data-val-remote");
      }
   }
});

 

Attached you can find a runnable demo project based on this example.

If you would like to validate the fields in the "InCell" editable grid, follow the instruction in the article below:

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

In case of any further queries, don't hesitate to contact me back.

 

Best, Mihaela Lukanova Progress Telerik

[serge]

how about InCell Mode? My problem is that AdditionalField "id" is not bound along with the "code"

[serge]

more details about the question here https://stackoverflow.com/questions/67664811/telerik-grid-bind-additionalfileds-to-remote-validation

[Mihaela]

When the grid's edit mode is "InCell" and a specified cell is edited, you could get the "Id" of that row/record as follows:

var grid = $("#grid").data("kendoGrid");
var dataItem = grid.dataItem($(input).closest('tr')); //$(input) is the current edited data cell
var productId = dataItem.Id;

$.ajax({
   ...
  data: { "Code":  input.val(), "id": productId},
  ...

});

Also, please make sure that the name of the property "id" is the same in the AJAX request, AdditionalFields property, and the Action method.

On a separate note, the batch (incell) editing mode does not support remote validation since the handling of the input element's blur event closes the cell for editing. For more information, review here.