React Grid : How to invoke Refresh grid on another component change

[Jiwanjyoti]

I am trying to refresh the grid after a certain event by another component. In case of Jquery, one will do this as below.

$('#GridName').data('kendoGrid').dataSource.read();

$('#GridName').data('kendoGrid').refresh();

 

How do i achieve this in React component?

I have tried wrapping the grid in another component and i triggering state change, but in that case i get datasource.fetch is not a function.

 

[Stefan]

Hello, Jiwanjyoti,

In this scenario, the selector should be different as the Grid does not actually have an id to select it.

The following approach can be used:

$("[data-role='grid']").data('kendoGrid').dataSource.read();

If there are more Grids on the page, the jQuery find function can be used to select the Grid in a specific container.

Regards,
Stefan
Progress Telerik

[Jiwanjyoti]

Hi Stefan,

How do i achieve this in React? Why does the Grid component throws an error that datasource.fetch is not a function when state is changed? When the grid is loaded for the first time it works fine. This error comes when component is re-rendered by state change.

I am able to do the refresh on a button click using refs, but want to achieve it when state change happens.

-Jiwan

[Jiwanjyoti]

To add more info i am using React + Redux. Below are the grid options. It works fine as long as i dont use any state. 

const gridOptions = {
            dataSource: {
                type: "odata-v4",
                transport: {
                    read: https://localhost:8704/site/vehicles/all
                    },
                schema: {
                    data: "value",
                    total: "count"
                },
                pageSize: 15,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            },
            toolbar: ["excel","pdf"],
            excel: {
                fileName: window.resources.dbRes('AllVehicles') + ".xlsx",
                filterable: true,
                allPages: true
            },
            pdf: {
                fileName: window.resources.dbRes('AllVehicles') + ".pdf",
                filterable: false,
                allPages: true,
                avoidLinks: true,
                paperSize: "A3",
                margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
                landscape: true,
                repeatHeaders: true,
                scale: 0.8
            },

            filterable: true,
            sortable: true,
            pageable: true,
            columnMenu: true,
            columns: columns,
            reorderable: true,
            resizable: true,
            selectable: true,
            columnHide: this.handleColumnHideEvent
        }

[Jiwanjyoti]

Was able to figure it out. Wrapped the data source with below. 

new kendo.data.DataSource()

[Stefan]

Hello, Jiwanjyoti,

I'm glad to hear that the issue is resolved.

In general, the described error can occur if the used dataSource is not actually a kendo.dataSource instance:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#kendodatadatasource

The code which I provided earlier will extract the Grid dataSource instance in React application as l:

http://dojo.telerik.com/ERAtIF

Regards,
Stefan
Progress Telerik