diff --git a/blazor/datagrid/data-annotation.md b/blazor/datagrid/data-annotation.md index ac90524b35..90f44854ed 100644 --- a/blazor/datagrid/data-annotation.md +++ b/blazor/datagrid/data-annotation.md @@ -1,7 +1,7 @@ --- layout: post title: Data Annotation in Blazor DataGrid | Syncfusion -description: Learn how to achieve data validation with data annotations in the Syncfusion Blazor DataGrid component. +description: Learn how to use Data Annotations for validation and column metadata in Syncfusion Blazor DataGrid, including enum display and CRUD form validation. platform: Blazor control: DataGrid documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Data Annotation in Blazor DataGrid -Data Annotations are used to define validation rules for model classes or properties, ensuring that data entered into an application conforms to the expected format and meets specific criteria. They also enable the display of appropriate error messages to end users. +Data Annotations define validation and display rules on model classes or properties, ensuring that user input conforms to expected formats and constraints while providing meaningful error messages. -In the Syncfusion® Blazor DataGrid, Data Annotations are leveraged to automatically map these validation rules to the corresponding [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) properties. This integration provides seamless data validation during editing operations within the Grid. +In the Syncfusion® Blazor DataGrid, Data Annotations are automatically mapped to corresponding [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) behaviors, enabling seamless validation during editing operations within the Grid. -To enable Data Annotations for validation in a Grid, you need to refer the **System.ComponentModel.DataAnnotations** namespace in your Blazor application. Once enabled, the Grid automatically uses the data annotations applied to your model class properties to perform data validation. +To enable Data Annotation-based validation in the grid, reference the **System.ComponentModel.DataAnnotations** namespace in the Blazor app. When bound to a model (via TValue and DataSource), the grid applies the attributes defined on model properties during CRUD operations. The following table lists the data annotation attributes supported in the Grid: @@ -35,7 +35,7 @@ The following table lists the data annotation attributes supported in the Grid: | Key | Key | Marks a column as the primary key in the Grid | | Validation Attributes:

1. RequiredAttribute
2. StringLengthAttribute
3. RangeAttribute
4. RegularExpressionAttribute
5. MinLengthAttribute
6. MaxLengthAttribute
7. EmailAddressAttribute
8. CompareAttribute
| | These validation attributes are used as `validation rules` in Grid CRUD operations | -> The Syncfusion® Blazor DataGrid property takes precedence over data annotation attributes. For example, when both the DisplayName attribute and `HeaderText` are assigned to a field in the Grid model class for a specific column, the `HeaderText` value will be prioritized and displayed in the Grid header. +> The Syncfusion® Blazor DataGrid property takes precedence over data annotation attributes. For example, when both the Display attribute and `HeaderText` are assigned to a field in the model for a specific column, the `HeaderText` value will be prioritized and shown in the grid header. The following sample code demonstrates how to use data annotations in the Grid: @@ -50,7 +50,7 @@ The following sample code demonstrates how to use data annotations in the Grid: - + @@ -150,12 +150,12 @@ The following sample code demonstrates how to use data annotations in the Grid: {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LthIZotuimdZMRyd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrejuUtmLCTNLoy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The following image shows how Data Annotations are applied to Grid columns in a Blazor application: +The following image shows how Data Annotations are applied to grid columns in a Blazor application: ![Data Annotation in Grid](./images/blazor-datagrid-data-annotation.png) -> The **Verified** column displays the `Enum` member using the `Display` attribute name, enhancing user experience by rendering a human-readable label instead of the raw enum value. +> The **Verified** column displays the Enum member using the `Display` attribute name, improving readability by showing a user-friendly label instead of the raw enum value. -> You can refer to our [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its features. You can also explore our [Syncfusion® Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. +N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a broad overview. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation. \ No newline at end of file diff --git a/blazor/datagrid/global-local.md b/blazor/datagrid/global-local.md index 747460bb9a..744d2f87fb 100644 --- a/blazor/datagrid/global-local.md +++ b/blazor/datagrid/global-local.md @@ -9,11 +9,13 @@ documentation: ug # Globalization in Blazor DataGrid -The Syncfusion® Blazor DataGrid provides a feature known as Globalization (global and local), which makes the application more accessible and useful for individuals from different regions and language backgrounds. You have the ability to view data in your preferred language and format, resulting in an enhanced overall experience. +The Syncfusion® Blazor DataGrid supports globalization to make applications accessible across regions and languages. Content can be displayed in the preferred culture with localized texts and culture-aware formats for a better user experience. ## Localization -The Syncfusion® Blazor DataGrid supports localization, allowing you to customize the text used in the Grid to suit different languages or cultural preferences. You can change static text on various elements, such as **group drop area text** and pager **information text**, to different cultures, such as **Arabic**, **Deutsch**, **French**, and more. For detailed instructions, refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. +The Syncfusion® Blazor DataGrid supports localization, allowing customization of static texts used in the Grid for different languages or cultures. Text labels such as `group drop area text` and `pager information` can be localized to cultures like Arabic, Deutsch, French, and more. For detailed instructions, refer to the Blazor Localization documentation: [Localization](https://blazor.syncfusion.com/documentation/common/localization). + +A subset of localizable strings used by the DataGrid is listed below. **Data Rendering** @@ -33,7 +35,7 @@ Grid_False | false | ![Locale false](images/globalization/locale-false.png) Locale key words |Text | Example -----|-----|----- -Grid_Columnchooser | Columns | ![Locale columnchooser](images/globalization/locale-column-chooser.png) +Grid_Columnchooser | Columns | ![Locale column chooser](images/globalization/locale-column-chooser.png) Grid_ChooseColumns | Choose Column | ![Locale choose columns](images/globalization/locale-choose-columns.png) **Editing** @@ -63,10 +65,10 @@ Grid_CancelEdit | Are you sure you want to Cancel the changes? | ![Locale cancel Locale key words |Text | Example -----|-----|----- Grid_GroupDropArea | Drag a column header here to group its column | ![Locale group drop area](images/globalization/locale-group-drop-area.png) -Grid_UnGroup | Click here to ungroup | ![Locale un group](images/globalization/locale-un-group.png) -Grid_GroupDisable | Grouping is disabled for this column | ![Locale group disable](images/globalization/locale-group-disable.png) -Grid_Item | item | ![Locale Item](images/globalization/locale-item.png) -Grid_Items | items | ![Locale Items](images/globalization/locale-items.png) +Grid_UnGroup | Click here to ungroup | ![Locale ungroup](images/globalization/locale-un-group.png) +Grid_GroupDisable | Grouping is disabled for this column | ![Locale group disabled](images/globalization/locale-group-disable.png) +Grid_Item | item | ![Locale item](images/globalization/locale-item.png) +Grid_Items | items | ![Locale items](images/globalization/locale-items.png) Grid_UnGroupButton | Click here to ungroup | Grid_GroupDescription | Press Ctrl space to group | ![Locale group description](images/globalization/locale-group-description.png) @@ -75,8 +77,8 @@ Grid_GroupDescription | Press Ctrl space to group | ![Locale group description]( Locale key words |Text | Example -----|-----|----- Grid_InvalidFilterMessage | Invalid Filter Data -Grid_FilterbarTitle | \s filter bar cell | ![Locale filterbar title](images/globalization/locale-filterbar-title.png) -Grid_Matchs | No Matches Found | ![Locale matchs](images/globalization/locale-matchs.png) +Grid_FilterbarTitle | \s filter bar cell | ![Locale filter bar title](images/globalization/locale-filterbar-title.png) +Grid_Matchs | No Matches Found | ![Locale no matches](images/globalization/locale-matchs.png) Grid_FilterButton | Filter | ![Locale filter button](images/globalization/locale-filter-button.png) Grid_ClearButton | Clear | ![Locale clear button](images/globalization/locale-clear-button.png) Grid_StartsWith | Starts With | ![Locale starts with](images/globalization/locale-starts-with.png) @@ -105,8 +107,8 @@ Grid_Between | Between | ![Locale between](images/globalization/locale-between.p Grid_CustomFilter | Custom Filter | ![Locale custom filter](images/globalization/locale-custom-filter.png) Grid_CustomFilterPlaceHolder | Enter the value | ![Locale custom filter placeholder](images/globalization/locale-custom-filter-placeholder.png) Grid_CustomFilterDatePlaceHolder | Choose a date | ![Locale custom filter date placeholder](images/globalization/locale-custom-filter-date-placeholder.png) -Grid_AND | AND | ![Locale AND](images/globalization/locale-AND.png) -Grid_OR | OR | ![Locale OR](images/globalization/locale-OR.png) +Grid_AND | AND | ![Locale and](images/globalization/locale-AND.png) +Grid_OR | OR | ![Locale or](images/globalization/locale-OR.png) Grid_ShowRowsWhere | Show rows where: | ![Locale show rows where](images/globalization/locale-show-rows-where.png) **Searching** @@ -121,9 +123,9 @@ Grid_SearchColumns | search columns Locale key words |Text | Example -----|-----|----- Grid_Print | Print | ![Locale print](images/globalization/locale-print.png) -Grid_Pdfexport | PDF Export | ![Locale pdfexport](images/globalization/locale-pdfexport.png) -Grid_Excelexport | Excel Export | ![Locale excelexport](images/globalization/locale-excelexport.png) -Grid_Csvexport | CSV Export | ![Locale csvexport](images/globalization/locale-csvexport.png) +Grid_Pdfexport | PDF Export | ![Locale pdf export](images/globalization/locale-pdfexport.png) +Grid_Excelexport | Excel Export | ![Locale excel export](images/globalization/locale-excelexport.png) +Grid_Csvexport | CSV Export | ![Locale csv export](images/globalization/locale-csvexport.png) **ColumnMenu** @@ -138,10 +140,10 @@ Grid_AutoFit | Autofit this column | Locale key words |Text | Example -----|-----|----- Grid_Copy | Copy | ![Locale copy](images/globalization/locale-copy.png) -Grid_Group | Group by this column | ![Locale group](images/globalization/locale-group.png) -Grid_Ungroup | Ungroup by this column | ![Locale ungroup](images/globalization/locale-ungroup.png) -Grid_autoFitAll | Auto Fit all columns | ![Locale autofit all](images/globalization/locale-autofit-all.png) -Grid_autoFit | Auto Fit this column | ![Locale autofit](images/globalization/locale-autofit.png) +Grid_Group | Group by this column | ![Locale group by column](images/globalization/locale-group.png) +Grid_Ungroup | Ungroup by this column | ![Locale ungroup by column](images/globalization/locale-ungroup.png) +Grid_autoFitAll | Auto Fit all columns | ![Locale autofit all columns](images/globalization/locale-autofit-all.png) +Grid_autoFit | Auto Fit this column | ![Locale autofit column](images/globalization/locale-autofit.png) Grid_Export | Export | ![Locale export](images/globalization/locale-export.png) Grid_FirstPage | First Page | ![Locale first page](images/globalization/locale-first-page.png) Grid_LastPage | Last Page | ![Locale last page](images/globalization/locale-last-page.png) @@ -154,19 +156,19 @@ Grid_DeleteRecord | Delete Record | ![Locale delete record](images/globalization ### Switch the different localization -The Syncfusion® Blazor DataGrid allows you to switch the localization from one culture to another culture. This will be useful when you want to change the localization based on your requirements. For more details, you can refer to the official documentation on [dynamically setting the culture](https://blazor.syncfusion.com/documentation/common/localization?cs-save-lang=1&cs-lang=razor#dynamically-set-the-culture). +The Syncfusion® Blazor DataGrid allows switching the localization from one culture to another at runtime. This is useful when the culture needs to be changed based on user preference or application context. For more details, see [Dynamically set the culture](https://blazor.syncfusion.com/documentation/common/localization#dynamically-set-the-culture). To switch to a different localization, follow these steps: **Step 1: Create a Blazor web app** -You can create a **Blazor Web App** named **LocalizationSample** using Visual Studio 2022, either via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). Make sure to configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows). +Create a `Blazor Web App` named LocalizationSample using Visual Studio 2022, either via [Microsoft Templates](https://learn.microsoft.com/aspnet/core/blazor/tooling) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). Configure the appropriate [interactive render mode](https://learn.microsoft.com/aspnet/core/blazor/components/render-modes#render-modes) and [interactivity location](https://learn.microsoft.com/aspnet/core/blazor/tooling?pivots=windows). **Step 2: Install Syncfusion® Blazor DataGrid and Themes NuGet packages** -To add the Syncfusion® Blazor DataGrid in the app, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the Syncfusion® Blazor DataGrid, open NuGet Package Manager (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If your Blazor Web App uses `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor NuGet packages in the client project. +If the Blazor Web App uses WebAssembly or Auto render modes, install the Syncfusion® Blazor NuGet packages in the client project. Alternatively, use the following Package Manager commands: @@ -190,7 +192,7 @@ Install-Package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }} **Step 4: Add stylesheet and script resources** -Include the theme stylesheet and script references in the **~/Components/App.razor** file. +Include the theme stylesheet and script references in the **~/Components/App.razor** file for a Blazor Web App. ```html @@ -204,12 +206,12 @@ Include the theme stylesheet and script references in the **~/Components/App.raz ``` -> * Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for various methods to include themes (e.g., Static Web Assets, CDN, or CRG). -> * Set the `rendermode` to **InteractiveServer** or **InteractiveAuto** in your Blazor Web App configuration. +> * Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for various methods to include themes (Static Web Assets, CDN, or CRG). +> * Set the rendermode to `InteractiveServer` or `InteractiveAuto` in the Blazor Web App configuration. **Step 5: Create and register localization service** -Create a **SyncfusionLocalizer.cs** file and add the following code. For detailed steps on creating and registering a localization service, refer to the [Blazor Localization documentation](https://blazor.syncfusion.com/documentation/common/localization?cs-save-lang=1&cs-lang=csharp#create-and-register-localization-service). +Create a **SyncfusionLocalizer.cs** file and add the following code. For detailed steps on creating and registering a localization service, refer to the [Localization](https://blazor.syncfusion.com/documentation/common/localization#create-and-register-localization-service) documentation. {% tabs %} {% highlight cs tabtitle="SyncfusionLocalizer.cs" %} @@ -244,9 +246,8 @@ namespace LocalizationSample.Client **Step 6: Configure ~/Program.cs file** -* **Set the Culture of the Application:** In the client-side **~/Program.cs** , use JavaScript Interop to retrieve the user's culture setting from local storage. If none is found, set the default to **en-US**. - -* **Register Services:** Register the `SyncfusionLocalizer` and Syncfusion® Blazor services in both **~/Program.cs** files. +- **Set the culture of the application:** In the client-side **~/Program.cs**, use JavaScript interop to retrieve the user's culture from local storage. If none is found, set the default to en-US. +- **Register services:** Register the SyncfusionLocalizer and Syncfusion® Blazor services in **~/Program.cs**. {% tabs %} {% highlight cs tabtitle="Program.cs" %} @@ -296,7 +297,7 @@ await builder.Build().RunAsync(); ``` -**Step 8: Add javaScript function for culture management** +**Step 8: Add JavaScript function for culture management** For a Blazor Web App, add the following JavaScript function to the **~/Components/App.razor** file (after the Blazor `