Custom Validate in Insert/Edit PopPup

8 posts, 1 answers
  1. Zdzislaw Ziental
    Zdzislaw Ziental avatar
    30 posts
    Member since:
    Mar 2018

    Posted 14 Jun 2018 Link to this post

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

  2.
  3. Answer
    Georgi
    Admin
    Georgi avatar
    684 posts

    Posted 19 Jun 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Zdzislaw Ziental
    Zdzislaw Ziental avatar
    30 posts
    Member since:
    Mar 2018

    Posted 09 Aug 2018 in reply to Georgi Link to this post

    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?
  7. Georgi
    Admin
    Georgi avatar
    684 posts

    Posted 14 Aug 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8.
  9. Zdzislaw Ziental
    Zdzislaw Ziental avatar
    30 posts
    Member since:
    Mar 2018

    Posted 17 Aug 2018 in reply to Georgi Link to this post

    This approach works when using edit template to edit as show in picture attached ?Do you have an example with this senario?
  11. Georgi
    Admin
    Georgi avatar
    684 posts

    Posted 22 Aug 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  13. Zdzislaw Ziental
    Zdzislaw Ziental avatar
    30 posts
    Member since:
    Mar 2018

    Posted 27 Aug 2018 in reply to Georgi Link to this post

    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.
  14.
  15. Georgi
    Admin
    Georgi avatar
    684 posts

    Posted 30 Aug 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Back to Top