customize Telerik grid on react

1 Answer 57 Views
Grid
Juan
Top achievements
Rank 1
Juan asked on 04 Sep 2023, 02:55 AM
I need to edit the texts displayed in the grid.
The code I currently have is the following:
<div className="grid-component">
      <Grid
        filterable={false}
        resizable
        sortable
        {...dataState}
        data={lcatData}
        onDataStateChange={dataStateChange}
        fixedScroll
        pageable={pageConfig}
      >
        {/* <GridNoRecords>Custom message</GridNoRecords> */}
        <Column field="ID1" title=" " width="50px" cell={CustomLinkCell} />
        <Column field="ID2" title="#" width="50px" cell={CustomPinnedCell} />

        <Column
          field="isCustomRec"
          title="Data type"
          width="100px"
          cell={CustomDataTypeCell}
        />

        {columns.map((column, index) => {
          return (
            <Column
              field={column.field}
              title={column.title}
              key={index}
              width={column.width}
            />
          );
        })}
      </Grid>
How can I add the message property in react grid? Where can I get the keys to complete the property?

Thanks for the help!

1 Answer, 1 is accepted

Sort by
0
Wissam
Telerik team
answered on 05 Sep 2023, 10:22 AM

Hello, Juan,

Thank you for the provided screenshot.

You can achieve this using the Grid's globalization feature which allows you to customize the messages. The pointed-on texts in the image can be customized using the `grid.pagerItemsPerPage`, `grid.noRecords`, and the `grid.pagerInfo` messages.

Basically, you need to load them using the `loadMessages` method and wrap the Grid with the LocalizationProvider. This approach is demonstrated in the example of the following article:

For more information about Localization in KendoReact, you can check the following article:

I hope this helps, but please let me know if you have any further questions.

Regards,
Wissam
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Tags
Grid
Asked by
Juan
Top achievements
Rank 1
Answers by
Wissam
Telerik team
Share this question
or