Task name characters length validation example

[Dan]

I have an application that uses a model for the gantt. The model has a restriction of StringLength to 40 characters for the name of the task. However if the user edits a task in the grid and writes more than 40 characters no client validation is done and also the user does not see the failure of this.

Is there a example on how to implement client validations on gantt widget?

[Dimitar]

Hello Dan,

There is no dedicated example on how to validate the Gantt events client-side. However, you could try the following approach to achieve the desired result:

1) Subscribe to the Gantt Edit event:

@(Html.Kendo().Gantt<TelerikMvcAppGantt.Models.GanttTaskModel, TelerikMvcAppGantt.Models.DependencyModel>()
   ...
  .Events(e => e.Edit("onEdit"))
)

2) Inside the edit event handler initialize a Kendo UI Validator and specify the required validation rules for the form:

function onEdit(e) {
  $(e.container).find("[name='title']").attr("required", "required");

  $(e.container).kendoValidator({
    messages: {
      custom: "Please enter valid value for my custom rule",
      required: "My custom required message",
    },
    rules: {
      custom: function (input) {
        if (input.is("[name=title]")) {
         return input.val() === "Tom";
       }
       return true;
     }
   }
 });
}

Refer to the official Validator Overview Documentation for additional examples.

Regards,
Dimitar
Progress Telerik

[Dan]

Hi Dimitar,

I tried your solution and for the required works. But what about the string length.

function onEdit(e) {
      if(e.container.find('.k-edit-form-container').length === 0) {
         e.container.find("[name='title']").attr("required","required")
                                           .attr("data-val","true")
                                           .attr("data-val-length-max","40");
         $(e.container).kendoValidator({
                messages: {
                   required: "The Title field is required.",
                   length: "The field Title must be a string with a maximum length of 40."
                },
          });
      }
   }

The above code does not work

[Dimitar]

Hi Dan,

You should be able to use the following snippet to validate the Title length:

<script>
    (function ($, kendo) {
        $.extend(true, kendo.ui.validator, {
            rules: {
                greaterthan: function (input) {
                    if (input.is("[name='title']") && input.val() != "") {
                        return input.val().length < 40;
                    }

                    return true;
                }
            },
            messages: {
                greaterthan: "The title must not be longer than 40 symbols!"
            }
        });
    })(jQuery, kendo);
</script>

Regards,
Dimitar
Progress Telerik

[Dan]

Hi Dimitar,

Why do I have to define a custom rule?

According to the link you send: "Currently, the supported DataAnnotation attributes are: StringLength". So I would have assumed that the StringLength is already implemented in the kendo validator. What I need is exactly that rule but I do not know its name

[Dimitar]

Hi Dan,

The Gantt task editor uses MVVM bindings under the hood to map the inputs to the model. Therefore, to properly add validation to those inputs, a custom validation rule should be used.

With the snippet provided by my previous reply, the title max length will be correctly validated and the corresponding message will be displayed if the length of the text exceeds the defined value.

Regards,
Dimitar
Progress Telerik

[Dan]

Hi Dimitar,

Indeed I looked at the kendo validator and there is no string length rule. I am though curios how is the StringLength DataAnnotation being enforced since kendo validator does not know about it.

Thanks anyway for your answers.

[Dimitar]

Hello Dan,

Basically the DataAnnotations in MVC are used to decorate classes in order to enforce pre-defined validation rules. The StringLength is one of the out of the box data annotations available. Additional information on the topic can be found on MS docs:

• https://docs.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/dd901590(v=vs.95)

Concerning the The Kendo UI Validator - it creates validation rules based on the unobtrusive HTML attributes that are generated by ASP.NET.

Regards,
Dimitar
Progress Telerik