Custom Validation for Telerik ASP.NET MVC Grid using TypeScript

[Jerry]

According to https://demos.telerik.com/aspnet-mvc/grid/editing-custom-validation,I write the following script.  It can be executed in javascript.  But it  has a syntax error when using typescript. The syntax "kendo.ui.validator" doesn't exists. How can I solve this problem and what "kendo.ui.validator" means?

 

$.extend(true, kendo.ui.validator, {
        rules: {
          required(input) {
            if (input.is("[name='LineNumber']")) {
              if ($.trim($(input).val()) === "") {
                input.attr("data-required-msg", "@ViewLocalizer["LineNumberNullErrorMessage"]");

                return false;
              }
            }

            if (input.is("[name='ParameterName']")) {
              if ($.trim($(input).val()) === "") {
                input.attr("data-required-msg", "@ViewLocalizer["ParameterNameNullErrorMessage"]");

                return false;
              }
            }

            return true;
          }
        }
      });

[Stefan]

Hello, Jerry,

Thank you for the code.

The "kendo.ui.validator" is the instance of the Kendo UI Validator which has to be extended.

As the provided example is for the MVC version of the widgets, I can assume that a typescript file is loaded inside the view. Please advise if there is a restriction in placing the suggested JavaScript directly inside the view? The provided code is intended to work as inline JavaScript function which will overwide the Validator.

If placing a script tag inside the view is not possible, please provide an example demonstrating the used approach and we will gladly investigate if we can affect another solution.

Regards,
Stefan
Progress Telerik

[Fanda]

Same situation here. I can write this code to typescript file but to keep correct types in typescript definition file (kendo.all.d.ts), kendo.ui.Validator must be used. This will generate js file, where the same type name is used and such extension does not work as extension of kendo.ui.validator defined in kendo.all.min.js.

Written as plain js script in the view works.

[Fanda]

This works. Validator is not strongly typed anymore, but can be used in typescript file:

// extend validator by custom rules
(function ($, kendo: any) {
    $.extend(true, kendo.ui.validator, {
        rules: {
            custom: function (input) {
                if (input.is("[data-val-custom]")) {
                    return input.val() != "none";
                }

                return true;
            }
        },
        messages: {
            carprojectcode: function (input) {
                return input.attr("data-val-carprojectcode");
            }
        }
    });
})(jQuery, kendo);

[Kevin]

This answer saved me after hours of frustration. Thank you. I just had to tweak it a little to get the messages to work with what I needed and made it into arrow functions also so I could use 'this' inside of it:

(($, kendo: any) => {

    $.extend(true, kendo.ui.validator, {

        rules: {

            custom:(input: any) =>  {

                if (input.is("[data-val-custom]")) {

                    return input.val() != "none";

                }

 

                return true;

            }

        },

        messages: {

            custom: (input) => {

                return input.attr("data-val-carprojectcode");

            }

        }

    });

})(jQuery, kendo);