Remote validation with AdditionalFields when editing the Grid

1 Answer 500 Views
Grid Notification
serge
Top achievements
Rank 2
Bronze
Iron
Iron
serge asked on 12 May 2021, 07:51 AM | edited on 12 May 2021, 07:51 AM

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

1 Answer, 1 is accepted

Sort by
0
Mihaela
Telerik team
answered on 13 May 2021, 06:09 PM | edited on 14 May 2021, 07:29 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

serge
Top achievements
Rank 2
Bronze
Iron
Iron
commented on 23 May 2021, 09:42 PM

how about InCell Mode? My problem is that AdditionalField "id" is not bound along with the "code"
serge
Top achievements
Rank 2
Bronze
Iron
Iron
commented on 24 May 2021, 08:05 AM

more details about the question here https://stackoverflow.com/questions/67664811/telerik-grid-bind-additionalfileds-to-remote-validation
Mihaela
Telerik team
commented on 26 May 2021, 01:45 PM

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.

Tags
Grid Notification
Asked by
serge
Top achievements
Rank 2
Bronze
Iron
Iron
Answers by
Mihaela
Telerik team
Share this question
or