Skip to content

955876: Change the casing for datagrid in columns topics. #5915

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 3 commits into
base: hotfix/hotfix-v29.1.33
Choose a base branch
from
Open

955876: Change the casing for datagrid in columns topics. #5915

wants to merge 3 commits into from

Conversation

vikramsundarajan
Copy link
Contributor

No description provided.

@vikramsundarajan vikramsundarajan added the documentation Improvements or additions to documentation label May 5, 2025
@vikramsundarajan vikramsundarajan self-assigned this May 5, 2025
@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 955876-casing

@SyncfusionBuild
Copy link
Contributor

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: 955876-casing
Image Alt Text Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
Image Size Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
Image Name Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
FT Layout Syntax Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
Front matter Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
File Path Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
MD Tag Validation Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)

@Syncfusion-CI
Copy link

Build Status: INQUEUE 🕒
Build Location: 955876-casing

@Syncfusion-CI
Copy link

Build Status: INPROGRESS 🔃
Build Location: 955876-casing

@Syncfusion-CI
Copy link

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: 955876-casing
Image Alt Text Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
Image Size Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
Image Name Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
FT Layout Syntax Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
Front matter Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
File Path Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
MD Tag Validation Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 955876-casing

@SyncfusionBuild
Copy link
Contributor

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: 955876-casing
Image Alt Text Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
Image Size Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
Image Name Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
FT Layout Syntax Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
Front matter Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
File Path Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)
MD Tag Validation Error(s): 0 (Critical: 0, High: 0, Medium: 0, Low: 0, Info: 0)

farveensulthana
farveensulthana reviewed May 30, 2025
View reviewed changes
blazor/datagrid/column-rendering.md

> If the column `Field` is not specified in the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource), the column values will be empty.
> If the `Field` name contains **dot** operator, it is considered as complex binding.
> It is must to define the `Field` property for a Template column, to perform CRUD or data Operations such as filtering, searching etc.

## Define columns manually

To define columns manually in DataGrid, you can use the `GridColumn` component to define the columns and represent each column with its respective properties such as [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field), [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText), [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type), and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) set accordingly. This allows you to customize the column's behavior and appearance based on the requirements.
To define columns manually in DataGrid, you can use the `GridColumn` to define the columns and represent each column with its respective properties such as [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field), [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText), [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type), and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) set accordingly. This allows you to customize the column's behavior and appearance based on the requirements.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To define columns manually in DataGrid --> why DataGrid used in between

blazor/datagrid/column-rendering.md

You can use the following code snippet to enable auto-generated columns in the Syncfusion<sup style="font-size:70%">&reg;</sup> DataGrid:
You can use the following code snippet to enable auto-generated columns in the Syncfusion Grid:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove Syncfusion

blazor/datagrid/column-rendering.md
@@ -167,15 +167,15 @@ You can use the following code snippet to enable auto-generated columns in the S
>* When the columns are auto-generated, the column [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) is determined from the first record of the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource).
>* If you have a large dataset, auto-generating columns can result in performance issues. In this case, it is recommended to specify the columns manually in the columns property during initialization or else use column virtualization feature by setting [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization) property value as **true**.

To know about how to **Customize Auto generated columns using Data Annotation** in Blazor DataGrid Component, you can check this video.
To know about how to **Customize Auto generated columns using Data Annotation** in Blazor Grid, you can check this video.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove Blazor

blazor/datagrid/column-rendering.md
@@ -346,7 +346,7 @@ In the below example, `Width` is set for **OrderID** column, **date** `Type` is

## Dynamic column generation

The Syncfusion<sup style="font-size:70%">&reg;</sup> Grid component allows you to dynamically generate columns at runtime, based on the data provided. This feature is useful when you need to display data with varying columns based on user requirements or dynamic data sources.
The Syncfusion Grid allows you to dynamically generate columns at runtime, based on the data provided. This feature is useful when you need to display data with varying columns based on user requirements or dynamic data sources.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Syncfusion Blazor DataGrid

blazor/datagrid/column-rendering.md
@@ -481,11 +481,11 @@ In the following sample, columns are built dynamically using the `ExpandoObject`

## Complex data generation

The Syncfusion<sup style="font-size:70%">&reg;</sup> DataGrid component allows you to achieve complex data binding by using the dot (.) operator in the column.field. This feature is particularly useful when dealing with nested or complex data structures.
The Syncfusion DataGrid allows you to achieve complex data binding by using the dot (.) operator in the column.field. This feature is particularly useful when dealing with nested or complex data structures.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here too

blazor/datagrid/column-rendering.md

### Using local data

To enable complex data binding in the DataGrid component using local data, use the dot (.) operator in the `Field` property of the column. Here is an example of how to achieve complex data binding using local data:
To enable complex data binding in the DataGrid using local data, use the dot (.) operator in the `Field` property of the column. Here is an example of how to achieve complex data binding using local data:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change it as Grid

blazor/datagrid/column-rendering.md
@@ -544,7 +544,7 @@ In the below example, we have bound the nested **Employee** object’s **FirstNa

### Using remote data

To enable complex data binding in the DataGrid component using remote data, add the [Expand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_Expand_System_Collections_Generic_List_System_String__) query to the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Query) property of the DataGrid, to eager load the complex data. Here is an example of how to achieve complex data binding using remote data:
To enable complex data binding in the DataGrid using remote data, add the [Expand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_Expand_System_Collections_Generic_List_System_String__) query to the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Query) property of the Grid, to eager load the complex data. Here is an example of how to achieve complex data binding using remote data:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here too

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@farveensulthana farveensulthana farveensulthana left review comments

At least 1 approving review is required to merge this pull request.

Assignees

@vikramsundarajan vikramsundarajan

Labels
documentation Improvements or additions to documentation
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@vikramsundarajan @SyncfusionBuild @Syncfusion-CI @farveensulthana