Skip to content

Seo 192068 react grid column header row selection #574

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.

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

Open
wants to merge 2 commits into
base: hotfix/hotfix-v27.2.2
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions ej2-react/grid/columns/column-headers.md
Original file line number Diff line number Diff line change
@@ -380,7 +380,7 @@ You can use CSS to override the default height of the **.e-grid .e-headercell**

**Using methods**

To change the height of the header dynamically, you can use the [getHeaderContent](https://ej2.syncfusion.com/react/documentation/api/grid#getheadercontent) method to get the header content element of the Syncfusion Grid. Then, you can use the **querySelectorAll** method to get all the header cell elements with the class **e-headercell**. Finally, you can loop through each header cell element and set its style property to adjust the height.
To change the height of the header dynamically, you can use the [getHeaderContent](https://ej2.syncfusion.com/react/documentation/api/grid/#getheadercontent) method to get the header content element of the Syncfusion Grid. Then, you can use the **querySelectorAll** method to get all the header cell elements with the class **e-headercell**. Finally, you can loop through each header cell element and set its style property to adjust the height.

{% tabs %}
{% highlight js tabtitle="App.jsx" %}
@@ -399,7 +399,7 @@ To change the height of the header dynamically, you can use the [getHeaderConten

{% previewsample "page.domainurl/code-snippet/grid/column-cs40" %}

>* You can also use the [getHeaderTable](https://ej2.syncfusion.com/react/documentation/api/grid#getheadertable) method to get the table element of the header, and then adjust the height.
>* You can also use the [getHeaderTable](https://ej2.syncfusion.com/react/documentation/api/grid/#getheadertable) method to get the table element of the header, and then adjust the height.
>* You cannot change the height of row below the default height of 42px using the **e-columnheader** class.

## Change header text dynamically
@@ -415,7 +415,7 @@ When the `headerCellInfo` event is triggered, it provides a **HeaderCellInfoEven
* **cell**: Defines the header cell that is being modified.
* **node**: Defines the DOM element of the header cell that is being modified.

You can use these properties to access and modify the header text of the corresponding column. Once the header text is modified, you can refresh the Grid to reflect the changes by calling the [refreshHeader](https://ej2.syncfusion.com/documentation/api/grid#refreshheader) method of the Grid.
You can use these properties to access and modify the header text of the corresponding column. Once the header text is modified, you can refresh the Grid to reflect the changes by calling the [refreshHeader](https://ej2.syncfusion.com/documentation/api/grid/#refreshheader) method of the Grid.

**Using method**

@@ -794,7 +794,7 @@ To `rotate` the header text, you can create a CSS class with the `transform` pro

Once you have created the CSS class, you can add it to the particular column by using the `customAttributes` property. This property allows you to add any custom attribute to the grid column.

For example, to add the orientationcss class to the Freight column, you can use the following code:
For example, to add the orientation css class to the Freight column, you can use the following code:

```typescript
<ColumnDirective field='Freight' headerText='Freight' textAlign='Center' format='C2' customAttributes={customAttributes} width=80></ColumnDirective>
4 changes: 2 additions & 2 deletions ej2-react/grid/selection/row-selection.md
Original file line number Diff line number Diff line change
@@ -91,7 +91,7 @@ In the following example, it demonstrates how to select a row at initial renderi

The Grid allows you to select rows in any page based on their index value. This feature is useful when you want to perform specific actions on rows, such as highlighting, applying styles, or executing operations, regardless of their location across multiple pages within the grid.

To achieve this, you can utilize the [selectRow](https://ej2.syncfusion.com/react/documentation/api/grid/#selectrow) method and the [goToPage](https://ej2.syncfusion.com/react/documentation/api/grid/#gotopage) method of the Grid control. By handling the [change](https://ej2.syncfusion.com/react/documentation/api/drop-down-list#change) event of `DropDownList` component, you can implement the logic to navigate to the desired page and select the row based on the index value.
To achieve this, you can utilize the [selectRow](https://ej2.syncfusion.com/react/documentation/api/grid/#selectrow) method and the [goToPage](https://ej2.syncfusion.com/react/documentation/api/grid/#gotopage) method of the Grid control. By handling the [change](https://ej2.syncfusion.com/react/documentation/api/drop-down-list/#change) event of `DropDownList` component, you can implement the logic to navigate to the desired page and select the row based on the index value.

Additionally, by handling the [actionComplete](https://ej2.syncfusion.com/react/documentation/api/grid/#actioncomplete) event of the Grid, you can maintain the selection of the desired row after completing the paging action.

@@ -680,7 +680,7 @@ To achieve this, you can leverage the [getSelectedRowIndexes](https://ej2.syncfu

The Grid component allows you to retrieve the selected records even when navigating to different pages. This feature is useful when working with large data sets and allows you to perform actions on the selected records across multiple pages.

To persist the selection across pages, you need to enable the [persistselection](https://ej2.syncfusion.com/react/documentation/api/grid/selectionSettings/#persistselection) property. By default, this property is set to **false**. To enable it, set the value to **true** in the `selectionSettings` property of the Grid component.
To persist the selection across pages, you need to enable the [persist selection](https://ej2.syncfusion.com/react/documentation/api/grid/selectionSettings/#persistselection) property. By default, this property is set to **false**. To enable it, set the value to **true** in the `selectionSettings` property of the Grid component.

To retrieve the selected records from different pages, you can use the [getSelectedRecords](https://ej2.syncfusion.com/react/documentation/api-grid.html#getSelectedRecords) method. This method returns an array of the selected records.