Task name characters length validation example

8 posts, 1 answers
  1. Dan
    Dan avatar
    161 posts
    Member since:
    Nov 2017

    Posted 23 Oct 2018 Link to this post

    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?

  2.
  3. Answer
    Dimitar
    Admin
    Dimitar avatar
    777 posts

    Posted 25 Oct 2018 Link to this post

    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.
  5. Dan
    Dan avatar
    161 posts
    Member since:
    Nov 2017

    Posted 25 Oct 2018 in reply to Dimitar Link to this post

    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

  7. Dimitar
    Admin
    Dimitar avatar
    777 posts

    Posted 25 Oct 2018 Link to this post

    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.
  8.
  9. Dan
    Dan avatar
    161 posts
    Member since:
    Nov 2017

    Posted 25 Oct 2018 in reply to Dimitar Link to this post

    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

  11. Dimitar
    Admin
    Dimitar avatar
    777 posts

    Posted 25 Oct 2018 Link to this post

    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.
  13. Dan
    Dan avatar
    161 posts
    Member since:
    Nov 2017

    Posted 25 Oct 2018 in reply to Dimitar Link to this post

    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.

  14.
  15. Dimitar
    Admin
    Dimitar avatar
    777 posts

    Posted 26 Oct 2018 Link to this post

    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.
Back to Top