Custom Validate in Insert/Edit PopPup

[ziental]

I have a method that validates if the registry is duplicated. How can I use this validation in the edit / insert popup?

 

 

 

@(Html.Kendo().Grid<Site.Models.BreedViewModel>()                                                             .Name("grid")                                                             .Columns(columns =>                                                             {                                                                 columns.Bound(b => b.BreedId).Title("ID")                                                                     .Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(true))).Width(120);                                                                 columns.Bound(b => b.BreedCode).Width(140).Title("Code");                                                                 columns.Bound(b => b.BreedName).Width(220).Title("Name");                                                                 columns.Bound(b => b.Type)                                                                     .ClientTemplate("# if( Type === 1) { # <span>Beef</span> # } else { # <span>Dairy</span> # } #").Width(140);                                                                 columns.Bound(b => b.Active)                                                                     .ClientTemplate("# if( Active ) { # <span class='k-icon k-i-check-outline'></span> # } else { # <span class='k-icon k-i-close-outline'></span> # } #").Width(145);                                                                 columns.Bound(b => b.Description).Width(220).Title("Description");                                                                 columns.Command(command =>                                                                 {                                                                     command.Edit().CancelText("Cancel").UpdateText("Save").Text(" ");                                                                     command.Custom("wnDelete").Click("wnDelete").Text(" ").IconClass("k-icon k-i-delete");                                                                     command.Custom("ViewDetails").Click("ViewDetails").Text(" ").IconClass("k-icon k-i-zoom-in");                                                                 }).Width(100);                                                             })                                                             .ToolBar(t => { t.Create().Text("Add"); t.Excel(); })                                                             .Editable(editable => editable.Mode(GridEditMode.PopUp)                                                                 .DisplayDeleteConfirmation(false)                                                                 .TemplateName("BreedEdit").Window(w => w.Title("Breed")))                                                             .Scrollable(s => s.Height("auto"))                                                             .Pageable(pageable => pageable                                                                 .Refresh(true)                                                                 .PageSizes(true)                                                                 .ButtonCount(5))                                                             .Events(events => events                                                                 //.Change("onChange")                                                                 .DataBound("onDataBound")                                                                                                                                  //.Save("onSave")                                                             //.DataBinding("onDataBinding")                                                             )                                                             .Sortable()                                                             .Scrollable()                                                             .Excel(excel => excel.FileName("export.xlsx").AllPages())                                                             .Filterable()                                                             .DataSource(dataSource => dataSource                                                                 .Ajax()                                                                 .PageSize(20)                                                                 .Events(e =>{                                                                     e.Error("onGridError");                                                                                                                                          //e.RequestEnd("wasSaveSuccessful");                                                                 })                                                             .Model(model => model.Id(p => p.BreedId))                                                             .Create(update => update.Action("EditingPopup_Create", "Breed"))                                                             .Read(read => read.Action("EditingPopup_Read", "Breed"))                                                             .Update(update => update.Action("EditingPopup_Update", "Breed"))                                                             .Destroy(update => update.Action("EditingPopup_Destroy", "Breed"))                                                     ) )@(Html.Kendo().Window().Name("Details")                                             .Title("Details")                                             .Visible(false)                                             .Modal(true)                                             .Draggable(true)                                             .Width(500) )@(Html.Kendo().Notification()                     .Name("notification")                                     .Position(p => p.Pinned(true).Top(30).Right(30))                                      )

[Georgi]

Hi Zdzislaw,

A possible solution is to create a custom validation rule and within that rule request the server via AJAX.

e.g.

    (function ($, kendo) {
    $.extend(true, kendo.ui.validator, {
        rules: { // custom rules
           registryvalidation: function (input, params) {
                if (input.is("[name='Registry']") && input.val() != "") {
                    var valid;
                    $.ajax({
                        url: "/ValidationController/ValidationAction?registry=" + input.val(),
                        method: 'GET',
                        success: function (result) {
                            valid = result.valid;
                            input.attr("data-registryvalidation-msg", result.message);
                        },
                        async: false
                    })
                    return valid;
                }

                return true;
            }
        },
        messages: { //custom rules messages
            registryvalidation: function (input) {
                // return the message text
                return input.attr("data-val-registryvalidation");
            }
        }
    });
})(jQuery, kendo);

For your convenience I am attaching a small sample which demonstrates how to validate unique values using the above approach. Please note that the sample is MVC 5 but the very same approach is applicable in ASP.Net Core.


Regards,
Georgi
Progress Telerik

[ziental]

When the user is entering I only validate the name but when the user is editing I need to send the id and the name. How can I do this?

[Georgi]

Hello Zdzislaw,

A possible solution is to check whether the current item is new via the isNew method of the dataItem.

e.g.

idvalidation: function (input, params) {
    if (input.is("[name='ID']") && input.val() != "") {
        var grid = $('#grid').data('kendoGrid');
        var dataItem = grid.dataItem(input.parents('tr'));

        if (!dataItem.isNew()) {
            var valid;
            $.ajax({
                url: "/Home/ValidateID?id=" + input.val(),
                method: 'GET',
                success: function (result) {
                    valid = result.valid;
                    input.attr("data-idvalidation-msg", result.message);
                },
                async: false
            })
            return valid;
        }
    }

    return true;
}

Regards,
Georgi
Progress Telerik

[ziental]

This approach works when using edit template to edit as show in picture attached ?Do you have an example with this senario?

[Georgi]

Hi Zdzislaw,

I have investigated the provided screenshot and I did not notice anything that might cause an issue.

Doesn't the request trigger only when the user edits a field?


Regards,
Georgi
Progress Telerik

[ziental]

Yes, the request trigger only when the user edits a field.
I need to validate the field on user edit and insert. That's why I need to know a way that I can identify if the user is editing or inserting data.

[Georgi]

Hi Zdzislaw,

 You can still use the isNew method to determine whether the user is creating or editing.

e.g.

var isUserInserting = dataItem.isNew()

Regards,
Georgi
Progress Telerik