Kendo grid not getting displayed

Question

I have a problem rendering a Kendo grid. I have the below code:

$(document).ready(function() {
                
    $('#searchBtn').click(function(event) {
        event.preventDefault();
            var origin = $('#origin').val();
            var destination = $('#destination').val();
    
            $.ajax({
                    url: '/home/search',
                    type: 'GET',
            //dataType: 'json',
                    data: {
                          origin: origin,
                          destination: destination
                    },
                    success: function(data) {
                console.log('Flight data received:', data);
                            initializeKendoGrid(data);
                    },
                    error: function(xhr, status, error) {
                            console.error(error);
                            alert('An error occurred while fetching flight data.');
                    }
           });
    });
});
    
            function initializeKendoGrid(data) {
                $("#grid").kendoGrid({
                    dataSource: {
                        data: data,
                        pageSize: 10
                    },
                    height: 550,
                    groupable: true,
                    sortable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true,
                        buttonCount: 5
                    },
                    columns: [
                        { field: "flightNumber", title: "Flight Number" },
                        { field: "airlineName", title: "Airline Name" },
                        { field: "origin", title: "Origin" },
                        { field: "destination", title: "Destination" },
                        { field: "date", title: "Date", format: "{0:MM/dd/yyyy}" },
                        { field: "departure", title: "Departure" },
                        { field: "arrival", title: "Arrival" },
                        { field: "price", title: "Price" }
                    ]
                });
            } 

I am able to retrieve the data (ArrayList) from database, but it is not getting displayed on the grid. I am getting error "Uncaught RangeError: Maximum call stack size exceeded". Can anyone help?

Answer 1

It looks like your grid has been initialized already, so instead of re-creating the grid, try to update the underlying datasource. In your ajax success callback function try to do this:

      $.ajax({
                url: '/home/search',
                type: 'GET',
                //dataType: 'json',
                data: {
                        origin: origin,
                        destination: destination
                },
                success: function(data) {
                        console.log('Flight data received:', data);
                        //initializeKendoGrid(data);
                        var newDataSource = new kendo.data.DataSource({ data: data });
                        var grid = $("#grid").data("kendoGrid");
                        grid.setDataSource(newDataSource);
                },
                error: function(xhr, status, error) {
                        console.error(error);
                        alert('An error occurred while fetching flight data.');
                }
       });