Summary 

Struggling with this issue for weeks now. Please need help! 

Goal - Stop the wizard from going to next step when there is a custom validation

Issue : The custom validation "Min age has to be 16 years " shows up on Validation blur , but does not stop the propagation to the next step.

validator.validate() comes up as true in both form and div approach

First approach

1. Addded a kendo wizard with a  .Tag("div") tag so that 4 steps in there show up as individual forms

@(
    Html.Kendo().Wizard()
    .Name("LicenseWizard")
    .Tag("form")
    .Steps(s =>
    {

        s.Add<WizardViewModel>()
        .Title("County")
        .ClassName("CountyClass")
       .Form(f => f
        .Name("FormCounty")
        .FormData(Model)

... There are 4 steps in total

2. Used this in the Onselect step method 

function onSelect(e) {

    // Get the current step's index
    var stepIndex = e.step.options.index;

    // Get the current step's container element
    var container = e.sender.currentStep.element;

    if (stepIndex < currentStep) {
        e.preventDefault();
    }
    else {

        // Validate Party One
        if (stepIndex == 2) {

            var form = $("#LicenseWizard-1").find('form');

             var validator = form.data("kendoValidator");


            alert('validator.validate()' + validator.validate());

            // Validate given input elements
            if (!validator.validate()) {
                // Prevent the wizard's navigation
                e.preventDefault();

}

Shows true and goes to next step

Second approach 

1. Use the .Tag("form")

 @(
     Html.Kendo().Wizard()
     .Name("LicenseWizard")
     .Tag("div")
     .Steps(s =>
     {

         s.Add<WizardViewModel>()
         .Title("County")
         .ClassName("CountyClass")
         .Form(f => f
         .Name("FormCounty")
         .FormData(Model)
         .Items(items =>

2. In the

// Validate
if (stepIndex == 2) {

    var form = $("#LicenseWizard-1").find('form');

     var validator = form.data("kendoValidator");
    // Instantiate a validator for the container element


    // Get the validator's reference
    var validator = $(container).kendoValidator().data("kendoValidator");

    alert('validator.validate()' + validator.validate());

    // Validate given input elements
    if (!validator.validate()) {
        // Prevent the wizard's navigation
        e.preventDefault();

Even this returns true

• Custom rules at the begining , which work on validate blur

 $(function () {
     $("#LicenseWizard").kendoValidator({
         rules: {
             requiredIfValue: function (input) {
                 //debugger;

if (input.is("[data-val-requiredifvalue]") && !input.val()) {

....

}

minagedate: function (input) {



    if (input.is("[id ='PartyOne.Pty1DateOfBirth']") || input.is("[id ='PartyTwo.Pty2DateOfBirth']")) {
        var value = $(input).val();
     ...............// 

        //console.log('todayMinus16' + todayMinus16);

        var result = (todayMinus16 >= birthdate);

        return result;
    }

   Question : minagedate validate on blur works . When I click on next , on Step 2 , the container in the approach when i use a div tag on wizard is the form that I get manually and in the second approach it is container that I get using the step method. 

I defined rules at the main wizard level ----

 $(function () {
     $("#LicenseWizard").kendoValidator({

how can make the validator.validate() false in my steps when there is something on the custom rules (that also show up on validate on blur) ? 

I skipped 2024.1.319 so can't confirm if this behavior exists in that version.

Attached is screenshot of the first page (with blacked out redacted information).  The 2024.1.130-exporttopdf-grid.png show expected/as is function of exporting a grid of data to pdf.

2024.2.514-exporttopdf-grid.png shows what the same data and grid.  There is an "Exporting..." overlay message and the last row of data appears to be repeated and offset.

Is this a bug in 2024.2.514?

In a normal form which uses html validation adding required to a KendoDropDownList fails

Ive tried to research to find a solution, but its due to the field being hidden field behind the control

Thus you end up with an error similar to this

An invalid form control with name='CountryId' is not focusable. 

I wish to know the proper way to show a validation message for a required dropdownlist in MVC

When a treeview is first rendered is displays an animation indicating data is being loaded. I ahve a treeview that initially doesn't contain data, and only shows data after a user has entered a search.

I can refresh the treeview using   $("#treeview").data("kendoTreeView").dataSource.read();  but no animation is shown. I would have thought it would have been logical to show an animation as default behaviour, matching the grid and other controls.

How can I enable the animation on this call please?

We recently uprevved to the 2024.2.514 version of kendo ui and there appears to be a defect with manually handling the export excel event from a grid. We need to be able to show a hidden column so it appears in the export, then hide it again.

Previously we were able to call e.preventDefault, show the column, and call e.sender.saveAsExcel() before hiding the column and it worked. Now when we do this the "exporting ..." overlay remains. If I use jquery to remove the overlay the export button does not work when clicked a second time.

Our example is in razor and actually functions better than this jquery example below which doesn't even save the file.

https://dojo.telerik.com/oMEpuDAY

In other words the following code from https://docs.telerik.com/kendo-ui/knowledge-base/grid-include-hidden-columns-in-excel-export doesn't work anymore.

var exportFlag = false;
$("#grid").data("kendoGrid").bind("excelExport", function (e) {
    if (!exportFlag) {
        e.sender.showColumn(1);
        e.preventDefault();
        exportFlag = true;
        setTimeout(function () {
            e.sender.saveAsExcel();
        });
    } else {
        e.sender.hideColumn(1);
        exportFlag = false;
    }
});

I am trying to add a new form to an existing ASP.NET MVC 5  application (.NET Framework). I have been unable to get the TimePicker control to return the value set in the UI. The control renders correctly and shows the values I would expect. But when I submit the form, the model's property value linked to the TimePicker is always all zeros or null. What am I doing wrong here?

Example code:

Model.cs

public class TestModel
{
  public TimeSpan Start { get; set; }
}

TestController.cs

public class TestController : Controller
{
  public ActionResult Index()
  {
    TestModel testModel = new TestModel();
    testModel.Start = new TimeSpan(7, 30, 0);
    return View("Schedule", testModel);
  }

  [HttpPost]
  public ActionResult Schedule (TestModel schedule)
  {
    // I intend to save 'schedule' value to database here.
    // but schedule.Start property is always [0, 0, 0]
    // If TestModel.Start is defined as TimeSpan?, then the property is always null
    ...
    return RedirectToAction(...);
  }
}

Schedule.cshtml

@model TestModel
@{
  Layout = "~/Views/Shared/_Layout.cshtml"
}

@using (Html.BeginForm("Schedule", "TestController", FormMethod.Post))
{
    <div class="form-horizontal container-fluid" style="margin-left:15px;">

I have tried a variety of different MVC ways to instantiate the TimePicker:  TimePickerFor (as above) or just TimePicker, defining .Name() property or not, defining .Value(model.Start) or not, adding .Min & Max properties. The result in the Schedule controller is the same: no value assigned to any TimePicker control.

The other thing I tried was change the TestModel.Start property to DateTime. Doing that, the form submit is always short-circuited, apparently because of a model validation issue in the TImePicker control. Form focus always changes to the TimePicker control. I have not been able to view the actual validation error.

Hoping someone can identify the problem with my code. The TimePicker control seems ideal for the application I have in mind but if I can't get it working I'll have to do something else.

I am testing this code in VS 2022. The version of Kendo our application uses is older: v2022.1.301.

FYI, our application already uses a wide variety of Kendo controls including Grid, DateTimePicker, DropDownList and several others. We have not had trouble using those controls. But as far as I can tell, this is the first instance of TimePicker being added.

Thanks,
Jeff