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

Client side validation not working in inline-edit mode

3 Answers 763 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Baracskai
Top achievements
Rank 1
Baracskai asked on 08 Jan 2020, 08:59 AM

Hello,

I have the following grid implementation:

       <kendo-grid name="grid"
                    auto-bind="true"
                    selectable="multiple, row"
                    persist-selection="true"
                    on-change="Grid_SelectionChanged"
                    on-data-bound="Grid_Loaded"
                    on-remove=""
                    resizable="true">
            <datasource type="DataSourceTagHelperType.Ajax" auto-sync="false" server-filtering="true" server-sorting="true" page-size="10"
                        on-request-end="@MODAL.RequestEndFunctionName" on-error="@MODAL.ErrorHandlerFunctionName">
                <transport>
                    <read url="@Url.Action("ReadItemList", "Users", new { Area = "Admin" })" />
                    <create url="@Url.Action("Create", "Users", new { Area = "Admin" })" />
                    <destroy url="@Url.Action("Delete", "Users", new { Area = "Admin" })" />
                    <update url="@Url.Action("UpdateFromGrid", "Users", new { Area = "Admin" })" />
                </transport>
                <schema>
                    <model id="Id">
                        <fields>
                            <field name="Enabled" type="boolean" default-value="true"></field>
                            <field name="LockoutEnabled" type="boolean" default-value="false"></field>
                            <field name="Id" type="Guid"></field>
                            <field name="UserName" type="string"></field>
                            <field name="Email" type="string"></field>
                            <field name="PhoneNumber" type="string"></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 selectable="true" width="37"></column>
                <column field="Id" title="Id" hidden="true"></column>
                <column field="Enabled"
                        title="Engedélyezett?"
                        template="#= getCheckboxHtml(Enabled) #"
                        editor="ZBoolEditor"
                        min-screen-width="60"
                        width="150"></column>
                <column field="UserName" title="User name" min-resizable-width="180" width="360" html-attributes='new Dictionary<string, object> { ["style"] = "font-weight: bold;" }'></column>
                <column field="Email" title="E-mail address" min-screen-width="180" width="360"></column>
                <column field="PhoneNumber" title="Phone number" min-screen-width="180" width="360"></column>
                <column field="LockoutEnabled"
                        title="Locked"
                        template="#= getLockedHtml(LockoutEnabled) #"
                        editor="ZBoolEditor"
                        min-screen-width="600"></column>
                <column title="Műveletek" width="150">
                    <commands>
                        <column-command text=" " name="edit" visible="false"></column-command>
                        <column-command text="<span class='fas fa-edit'></span>" name="editinpopup" click="Grid_EditInPopup"></column-command>
                        <column-command text="<span class='k-icon k-i-close'></span>" name="custom" click="Grid_RemoveItem"></column-command>
                    </commands>
                </column>
            </columns>

        </kendo-grid>

My problem that the client side validaion not working, I can leave the empty cell without any validation error message and I can press the Update button without restriction. I have data annotations in my model, for example:

        [Required(ErrorMessage = "'{0}' mező megadása kötelező!")]
        [Display(Name = "E-mail cím")]
        [EmailAddress(ErrorMessage = "Az e-mail cím formátuma nem érvényes!")]
        [StringLength(255, ErrorMessage = "A(z) '{0}' mező hossza minimum {2}, maximum {1} karakter lehet!", MinimumLength = 5)]
        [GridFastEditEnabled()]
        public string Email { get; set; }

Thank you for help!

 

3 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 13 Jan 2020, 08:44 AM

Hello, Baracskai,

Thank you for the provided Grid tagHelper declaration.

For the required validation to work, you should add it in the schema model definition:

 <schema>
      <model id="Id">
             <fields>
                  <!-- other fields -->
                  <field name="Email" type="string">
                         <validation required="true" />
                   </field>
             </fields>
       </model>
</schema>

If you want to implement a custom validation rule like the field should start with capital letter or change the messages, then the approach is valid and there is a need to extend the validator as shown in the script in this demo source.

https://demos.telerik.com/aspnet-core/grid/editing-custom-validation

Alternatively, if using custom editors, remember to include their validation attributes:

https://docs.telerik.com/aspnet-core/tag-helpers/data-management/grid/editing#custom-editors

Should you have further questions, let us know how we can help.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
John
Top achievements
Rank 1
commented on 05 Feb 2024, 09:28 PM

A little confused...  Why can't simple field-level validation be derived form the Model definition?

        [Required(AllowEmptyStrings = false, ErrorMessage = "Required")]
        public required string FirstName { get; set; }

I still have to do this in the grid declaration?

                    <field name="FirstName" type="string">
                        <validation required="true" />
                    </field>
 
Mihaela
Telerik team
commented on 07 Feb 2024, 08:55 PM

By design, the TagHelper implementation of the ASP.NET Core components is not strongly-typed. The Grid is built depending on the options of the Grid and it does not have access to the Model. For this reason, the DataAnnotations are not available when using TagHelpers. This is a limitation of the TagHelpers and it is further discussed within the following forum thread:

https://www.telerik.com/forums/taghelpers-behavior-different-than-razor-syntax

John
Top achievements
Rank 1
commented on 07 Feb 2024, 09:02 PM

Thanks Mihaela.  I got my mind right now.  It's nice to at least have the option of defining the client-side validation (without having to program it all).  You guys still have the best grid control available on the market.  Hands down. :-)

0
Baracskai
Top achievements
Rank 1
answered on 16 Jan 2020, 02:59 PM

Hello Alex,

 

Thank you for reply. Now the validation working but only for [Required] attribute, the other attributes has no effect automatically.

Should I enter it again manually (because this generates redundant code)? There are any solution to make this automatic? 

I read somewhere that only the taghelper format has these limitation? That is true?

 

Thank you!

BR, László

0
Alex Hajigeorgieva
Telerik team
answered on 21 Jan 2020, 04:32 PM

Hello, László,

The editors for the TagHelper Grid are created on the client side and so, any validation rule should be added following the approach in this demo:

https://demos.telerik.com/aspnet-core/grid/editing-custom-validation

By extending the Kendo UI Validator rules. Give this a try and let us know in case you face any difficulties.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
Tags
Grid
Asked by
Baracskai
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Baracskai
Top achievements
Rank 1
Share this question
or