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

6 posts, 0 answers
  1. Jiwanjyoti
    Jiwanjyoti avatar
    4 posts
    Member since:
    May 2014

    Posted 26 Dec 2017 Link to this post

    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.

     

  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 28 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jiwanjyoti
    Jiwanjyoti avatar
    4 posts
    Member since:
    May 2014

    Posted 02 Jan 2018 in reply to Stefan Link to this post

    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

  4. Jiwanjyoti
    Jiwanjyoti avatar
    4 posts
    Member since:
    May 2014

    Posted 02 Jan 2018 Link to this post

    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
            }

  5. Jiwanjyoti
    Jiwanjyoti avatar
    4 posts
    Member since:
    May 2014

    Posted 02 Jan 2018 in reply to Jiwanjyoti Link to this post

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

    new kendo.data.DataSource()
  6. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 03 Jan 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top