Grid validations based on DataModels

[Daniel Sampedro Bello]

Is possible to default Grid validations to the DataModel instead of define ValidationRules="@(new { required=true})" in every column? What's more, any plan to include support to <ValidationMessage For="@(() => Model.Property)" /> in Grid Dialogs templates? 

 <SfGrid DataSource="@GridData" AllowPaging="true" Toolbar="@(new string[] {"Add", "Edit" ,"Delete","Update","Cancel" })">
			    <GridEvents OnActionComplete="ActionCompleteHandler" TValue="OrdersDetails"></GridEvents>
                <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog" Dialog="DialogParams">
                    <Template>
                        @{
                            var Order = (context as OrdersDetails);
                        }
                        <div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <SfTextBox ID="OrderID" Value="@(Order.OrderID.ToString())" Enabled="@Check" FloatLabelType="FloatLabelType.Always" Placeholder="Order ID"></SfTextBox>
                                </div>
                                <div class="form-group col-md-6">
                                    <SfAutoComplete TItem="OrdersDetails" ID="CustomerID" Value="@(Order.CustomerID)" TValue="string" DataSource="@GridData" FloatLabelType="FloatLabelType.Always" Placeholder="Customer Name">
                                        <AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings>
                                    </SfAutoComplete>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <SfNumericTextBox ID="Freight" Value="@(Order.Freight)" TValue="double?" FloatLabelType="FloatLabelType.Always" Placeholder="Freight"></SfNumericTextBox>
                                </div>
                                <div class="form-group col-md-6">
                                    <SfDatePicker ID="OrderDate" Value="@(Order.OrderDate)" FloatLabelType="FloatLabelType.Always" Placeholder="Order Date">
                                    </SfDatePicker>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <SfDropDownList ID="ShipCountry" TItem="OrdersDetails" Value="@(Order.ShipCountry)" TValue="string" DataSource="@GridData" FloatLabelType="FloatLabelType.Always" Placeholder="Ship Country">
                                        <DropDownListFieldSettings Value="ShipCountry" Text="ShipCountry"></DropDownListFieldSettings>
                                    </SfDropDownList>
                                </div>
                                <div class="form-group col-md-6">
                                    <SfDropDownList ID="ShipCity" TItem="OrdersDetails" Value="@(Order.ShipCity)" TValue="string" DataSource="@GridData" FloatLabelType="FloatLabelType.Always" Placeholder="Ship City">
                                        <DropDownListFieldSettings Value="ShipCity" Text="ShipCity"></DropDownListFieldSettings>
                                    </SfDropDownList>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                        <SfTextBox ID="ShipAddress" Value="@(Order.ShipAddress)" FloatLabelType="FloatLabelType.Always" Placeholder="Ship Address"></SfTextBox>
                                    </div>
                                </div>
                        </div>
                    </Template>
                </GridEditSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new { required=true, number=true})" TextAlign="@TextAlign.Center" HeaderTextAlign="@TextAlign.Center" Width="140"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" ValidationRules="@(new { required=true})" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" Width="140" TextAlign="@TextAlign.Right" HeaderTextAlign="@TextAlign.Right"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" TextAlign="TextAlign.Right" Type="ColumnType.Date" Width="160"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
                </GridColumns>
            </SfGrid>

[Rahul Narayanasamy]

Hi Daniel, 

Greetings from Syncfusion. 

Query: Grid validations based on DataModels 

We have validated your query and you want to apply the validations based on the Model class property. You can achieve your requirement by using Data Annotations. Please find the below documentation for your reference. 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/data-annotation/ 

Please get back to us if you need further assistance. 

Regards, 

Rahul 

[kevin]

Do these data annotations work in a template for dialog editing? I tried it and all my display names came up blank even though my DTO has them set.

[Rahul Narayanasamy]

Hi Kevin, 

Greetings from Syncfusion. 

Query: Do these data annotations work in a template for dialog editing? I tried it and all my display names came up blank even though my DTO has them set. 

We have validated your query and we suspect that you are facing difficulties for showing validation messages while using dialog template editing with Data Annotations. Here, we have prepared a sample based on your requirement(Dialog template editing with Data Annotation). The validation messages are shown properly with out any issues.  

Also, ensure whether did you defined ID property to those controls which is defined in Dialog template. Find the below code snippets and sample for your reference. 

 

@using Syncfusion.Blazor.Grids 

@using Syncfusion.Blazor.Calendars 

@using Syncfusion.Blazor.DropDowns 

@using Syncfusion.Blazor.Inputs 

@using System.ComponentModel.DataAnnotations; 

 

<SfGrid DataSource="@GridData" Toolbar="@(new string[] {"Add", "Edit" ,"Delete","Update","Cancel" })"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog"> 

        <Template> 

            @{ 

                var Order = (context as OrdersDetails); 

                <div> 

                    <div class="form-row"> 

                        <div class="form-group col-md-6"> 

                            <label class="e-float-text e-label-top">Order ID</label> 

                            <SfNumericTextBox ID="OrderID" @bind-Value="@(Order.OrderID)" Enabled="@((Order.OrderID == null) ? true : false)"></SfNumericTextBox> 

                        </div> 

                        <div class="form-group col-md-6"> 

                            <label class="e-float-text e-label-top">Customer Name</label> 

                            <SfAutoComplete ID="CustomerID" TItem="OrdersDetails" @bind-Value="@(Order.CustomerID)" TValue="string" DataSource="@GridData"> 

                                <AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings> 

                            </SfAutoComplete> 

                        </div> 

                    </div> 

                    . . . 

                </div> 

            } 

        </Template> 

    </GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" HeaderTextAlign="@TextAlign.Center" Width="140"></GridColumn> 

        . . . 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    . . . 

 

    public class OrdersDetails 

    { 

        [Key] 

        // Sets column as required and error message to be displayed when empty 

        [Required(ErrorMessage = "Order ID  should not be empty")] 

        public int? OrderID { get; set; } 

        [Required(ErrorMessage = "Field should not be empty")] 

        public string CustomerID { get; set; } 

        public double? Freight { get; set; } 

        public string ShipCity { get; set; } 

        public DateTime? OrderDate { get; set; } 

        public string ShipName { get; set; } 

        public string ShipCountry { get; set; } 

        public string ShipAddress { get; set; } 

    } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/154113/ze/SampleValdiation-1676458007  

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/editing/#dialog-template  

https://blazor.syncfusion.com/documentation/datagrid/data-annotation/  

Please let us know if you have any concerns 

Regards, 

Rahul 

[kevin]

Hi Rahul,

Thank you for the response.

I see in the sample that you are setting the label text inside the template.  I was hoping I could get the display name from the model itself. I have tried the other data annotations such as required and field length and they seem to pull through. My display names however display blank in the edit dialog.

 

[Rahul Narayanasamy]

Hi Kevin, 

Thanks for the update. 

We have validated your query and we suspect that you want to show the Field name of the column in Dialog template without defining the label text in Dialog template. You can achieve this requirement by using Placeholder property of the particular control and FloatLabelType property. Find the below code snippets  and sample for your reference. 

 

<SfGrid DataSource="@GridData" Toolbar="@(new string[] {"Add", "Edit" ,"Delete","Update","Cancel" })"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog"> 

        <Template> 

            @{ 

                var Order = (context as OrdersDetails); 

                <div> 

                    <div class="form-row"> 

                        <div class="form-group col-md-6"> 

                            @*<label class="e-float-text e-label-top">Order ID</label>*@ 

                            <SfNumericTextBox ID="OrderID" @bind-Value="@(Order.OrderID)" Placeholder="Order ID" FloatLabelType="FloatLabelType.Always" Enabled="@((Order.OrderID == null) ? true : false)"></SfNumericTextBox> 

                        </div> 

                        <div class="form-group col-md-6"> 

                            @*<label class="e-float-text e-label-top">Customer Name</label>*@ 

                            <SfAutoComplete ID="CustomerID" TItem="OrdersDetails" @bind-Value="@(Order.CustomerID)" Placeholder="Customer ID" FloatLabelType="FloatLabelType.Always" TValue="string" DataSource="@GridData"> 

                                <AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings> 

                            </SfAutoComplete> 

                        </div> 

                    </div> 

                    . . . 

                </div> 

            } 

        </Template> 

    </GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" HeaderTextAlign="@TextAlign.Center" Width="140"></GridColumn> 

        . . . 

    </GridColumns> 

</SfGrid> 

The DisplayName attribute in the Data Annotation is used to display the HeaderText for the particular column. For Dialog Template, we need to customize the dialog edit form based on out need. 

Sample: https://www.syncfusion.com/downloads/support/forum/154113/ze/GridSample-1016886718  

Reference: 

https://blazor.syncfusion.com/demos/datagrid/grid-dialog-template?theme=bootstrap4  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[kevin]

Hi Rehul,

Thank you. This works perfectly.

Regards

Kevin

[Rahul Narayanasamy]

Hi Kevin, 

 

Thanks for the update. 

 

We are happy to hear that the provided solution was helpful to achieve your requirement. 

 

Please get back to us if you need further assistance. 

 

Regards, 

Rahul