This is a migrated thread and some comments may be shown as answers.

Focus first invalid - custom editor template

6 Answers 70 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Simon
Top achievements
Rank 1
Simon asked on 16 Feb 2018, 12:49 PM

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.

 

6 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 20 Feb 2018, 09:22 AM
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.
0
Simon
Top achievements
Rank 1
answered on 05 Mar 2018, 03:40 PM

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

 

0
Veselin Tsvetanov
Telerik team
answered on 07 Mar 2018, 12:22 PM
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.
0
Simon
Top achievements
Rank 1
answered on 15 Mar 2018, 06:00 PM

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.

0
Simon
Top achievements
Rank 1
answered on 15 Mar 2018, 06:02 PM
Tried to attach item to previous post...
0
Veselin Tsvetanov
Telerik team
answered on 19 Mar 2018, 09:53 AM
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.
Tags
Scheduler
Asked by
Simon
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Simon
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Share this question
or