Focus first invalid - custom editor template

7 posts, 0 answers
  1. Simon
    Simon avatar
    42 posts
    Member since:
    Mar 2016

    Posted 16 Feb 2018 Link to this post

    Trying to set the focus to the first invalid field when the validation fires onClick of the Save button on a Custom Editor template. I found this reference https://www.telerik.com/forums/kendo-validator---focus-on-first-invalid-field which I've used on a standard form successfully but 

                    validate: function () {
                        $(".k-invalid:first").focus(); // focus first invalid field
                    }

     

    doesn't seem to work with the Scheduler when using CustomEditorTemplate, Also tried:

                    validate: function () {
                        $(".k-invalid-msg:first").focus(); // focus first invalid field
                    }

    to no avail. Is there a solution for this?

    Thanks.

     

  2. Dimitar
    Admin
    Dimitar avatar
    807 posts

    Posted 20 Feb 2018 Link to this post

    Hello Simon,

    To make this work with the Scheduler's built-in Validator, you can subscribe to the Scheduler's edit event, where the Validator's instance can be retrieved. Then, by using the setOptions() method the Validator's options can be changed dynamically according to the requirements:
    @(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>() 
      ...
      .Events(e =>
      {       
          e.Edit("onSchedulerEdit");       
      })
    )
     
    <script>
      function onSchedulerEdit(e) {
        var validator = e.container.data("kendoValidator");
                 
        validator.setOptions({
          validate: function(){
            $(".k-invalid:first").focus();
           }
         });
      }
    </script>

    Regards,
    Dimitar
    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.
  3. Simon
    Simon avatar
    42 posts
    Member since:
    Mar 2016

    Posted 05 Mar 2018 in reply to Dimitar Link to this post

    I should have specified, there are a number of custom validations in our Edit form. Here's the code for our validation, it's inside document.ready. The validation works fine, just can't set the focus to first invalid properly.

        $(document).ready(function () {

            //place this code before the Scheduler init code, e.g. in header
            (function ($, kendo) {
                //Extending the Scheduler build in validator:
                $.extend(true, kendo.ui.validator, {
                    rules: {
                        //// Add custom validation rule to validate category field
                        hasSelectedCategories: function (input, params) {
                            if (input.is("[name=Categories]")) {
                                //Get the MultiSelect instance
                                var ms = input.data("kendoMultiSelect");
                                if (ms.value().length === 0) {
                                    return false;
                                }
                            }
                            return true;
                        },
                        hasSelectedCampuses: function (input, params) {

                            if (input.is("[name=Locations]")) {
                                //Get the MultiSelect instance
                                var ms = input.data("kendoMultiSelect");
                                if (ms.value().length === 0) {
                                    return false;
                                }
                            }
                            return true;
                        },
                        alttextrequired: function (input, params) {
                            // if there is an image associated with the event then we check to make sure the alt text field is completed
                            if (input.is("[data-val-alttextrequired]") && input.val() == "") {
                                var imgFile = $("#ImagePath");
                                return imgFile.val().trim().length == 0;
                            }
                            return true;
                        },


                    },
                    messages: {
                        //custom rules messages
                        //category: function (input) {
                        //    // return the message text
                        //    return "Category is already reserved for this day.";
                        //},
                        hasSelectedCategories: "Please select at least one category.",
                        hasSelectedCampuses: "Please select at least one campus.",
                        alttextrequired: function (input) {
                            return input.attr("data-val-alttextrequired");
                        },
                    },
                    validate: function () {
                        $(".k-invalid:first").focus(); // focus first invalid field
                    }

                });
            })(jQuery, kendo);
            //end of custom validation code
        });

     

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1229 posts

    Posted 07 Mar 2018 Link to this post

    Hi Simon,

    Setting the validate event handler of the Validator in the edit event handler of the Scheduler should work properly event if you have extended the kendo.ui.validator. Therefore, I would suggest you to attach the event handler as per Dimiter's suggestion and test again:
    @(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()
      ...
      .Events(e =>
      {      
          e.Edit("onSchedulerEdit");      
      })
    )
      
    <script>
      function onSchedulerEdit(e) {
        var validator = e.container.data("kendoValidator");
                  
        validator.setOptions({
          validate: function(){
            $(".k-invalid:first").focus();
           }
         });
      }
    </script>

    Note, that specifying the validate handler while extending the Validator will not achieve the desired result:
    (function ($, kendo) {
      //Extending the Scheduler build in validator:
      $.extend(true, kendo.ui.validator, {
    .........
        validate: function () {
          debugger;
          $(".k-invalid:first").focus(); // focus first invalid field
        }
      });
    })(jQuery, kendo);

    Regards,
    Veselin Tsvetanov
    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. Simon
    Simon avatar
    42 posts
    Member since:
    Mar 2016

    Posted 15 Mar 2018 Link to this post

    Ok this works great when it's a simple text field, is it possible to set focus on:

    1) A Kendo Editor field

    2) A multi-select field

    Thanks.

  6. Simon
    Simon avatar
    42 posts
    Member since:
    Mar 2016

    Posted 15 Mar 2018 Link to this post

    Tried to attach item to previous post...
  7. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1229 posts

    Posted 19 Mar 2018 Link to this post

    Hi Simon,

    To set the focus on the MultiSelect widget, you will need to focus its input element:
    $(".k-invalid:first").closest('.k-widget').find('input').focus();

    To set the focus on an Editor widget, you could use its focus() method:
    var widgetWrapper = $(".k-invalid:first").closest('.k-widget');
    if (widgetWrapper.hasClass('k-editor')) {
        $(".k-invalid:first").data("kendoEditor").focus();
    }

    Regards,
    Veselin Tsvetanov
    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.
Back to Top