The validation messages of the Kendo Grid are not displaying correctly.

[Hanhung]

Hello,

I have the following grid implementation:

       <kendo-grid name="grid">
            <datasource type="DataSourceTagHelperType.Ajax" auto-sync="false" server-filtering="true" server-sorting="true" page-size="10">
                <transport>
                    <read url="@Url.Action("ReadItemList", "Users")" />
                </transport>
                <schema>
                    <model id="Id">
                        <fields>
                            <field name="UserName" type="string"><validation required="true"></validation></field>
                        </fields>
                    </model>
                </schema>
            </datasource>
            <groupable enabled="true" />
            <editable mode="inline" />
            <filterable enabled="true" />
            <sortable enabled="true" />
            <pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20, 50, 100, 1000 }" />
            <columns>
                <column field="UserName" title="User name"></column>
            </columns>
        </kendo-grid>

My problem that the message shown is "UserName" is required", not "User name is required".

[Mihaela]

Hello Hanhung,

As per my understanding, you use a custom error message for the "UserName" field defined through the "Required" attribute (for example, [Required(ErrorMessage = "User name is required")]). If this is the case, the observed behavior is expected. Generally, the DataAnnotations are not available when using TagHelpers. This topic is further discussed in the following forum thread:

https://www.telerik.com/forums/taghelpers-vs-html-helper-validation-for-kendo-default-template-projects#5696458

Having this in mind, to display a custom error message, you could extend the Grid's Validator rules as per the example below:

<script type="text/javascript">
    //register custom validation rules
    $(document).ready(function () {
        $.extend(true, kendo.ui.validator, {
            rules: { // custom rules
                required: function (input) {
                    if (input.is("[name=UserName]")) {
                        input.attr("data-required-msg", "User name is required");
                        return input.val();
                    }
                    return true;
                }
            }
        });
    });
</script>

Regards,
Mihaela
Progress Telerik