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.

 

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:


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

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

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
        }

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

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 well:

http://dojo.telerik.com/ERAtIF

Regards,
Stefan
Progress Telerik