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

Task name characters length validation example

7 Answers 170 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Dan asked on 23 Oct 2018, 07:06 AM

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?

7 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 25 Oct 2018, 07:46 AM
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
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.
0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 25 Oct 2018, 10:10 AM

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

0
Dimitar
Telerik team
answered on 25 Oct 2018, 12:58 PM
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
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.
0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 25 Oct 2018, 01:03 PM

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

0
Dimitar
Telerik team
answered on 25 Oct 2018, 01:17 PM
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
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.
0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 25 Oct 2018, 01:28 PM

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.

0
Dimitar
Telerik team
answered on 26 Oct 2018, 05:49 AM
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:


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
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.
Tags
Gantt
Asked by
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Dimitar
Telerik team
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or