Kendo Grid data disappears on navigation button click

Question

I have got a Kendo grid that displays data with paging functionality enabled.

Clicking on the page number buttons changes the page with data however on clicking on the navigation buttons (next, previous, first, last) the grid gets empty with no records available message.

The snippet below is my grid code:

function BindTranscript(ObjectData) {
            $("#grid").kendoGrid({
                noRecords: true,
                dataSource: {
                    data: ObjectData,
                    pageSize: 20,
                    schema: {
                        model: {
                            fields: {
                                Heading: { type: "string", editable: false, nullable: true },
                                date: { type: "string", editable: false, nullable: true },
                                person: { type: "string", editable: false, nullable: true },
                                Visitor: { type: "string", editable: false, nullable: true },
                                Category: { type: "string", editable: false, nullable: true },
                                details: { type: "string", editable: false, nullable: true }
                            }
                        }
                    },
                },
                // height: 550,
                // groupable: true,
                sortable: true,
                pageable: true,
                dataBound: resizeGrid,
                scrollable: true,
                sortable: true,
                columns: [{
                    template: "<div class='icon'>" +
                    "<span class='k-icon k-i-data'></span></div> #: heading #",
                    field: "heading",
                    title: "heading",
                    width: 240
                }, {
                    field: "date",
                    title: "Date"
                },
                {
                    field: "person",
                    title: "person"
                },
                {
                    field: "Visitor",
                    title: "Visitor"
                },
                {
                    template: "<div class='category other'>" +
                    "<div class='cat-name'>#: Category #</div></div>",
                    field: "Category",
                    title: "Category"
                },
                {
                    field: "details",
                    title: "details"
                }],
            });
        }

Object

Data Grid With Page Numbers

Code Snippet for resizeGrid function:

function resizeGrid() {
            var gridElement = $("#datagrid"),
                dataArea = gridElement.find(".k-grid-content"),
                gridHeight = gridElement.innerHeight(),
                otherElements = gridElement.children().not(".k-grid-content"),
                otherElementsHeight = 0;
            otherElements.each(function () {
                otherElementsHeight += $(this).outerHeight();
            });
            dataArea.height(gridHeight - otherElementsHeight);
        }

Answer 1

Seems like I need to destroy the grid before rebinding it that was causing the issue.