[Solved] grid data loading old data after pressing page button

[Jay]

I have a drop-down box on a webpage that fires an event on change, that creates a grid based on the drop-down's selection.
It works fine, but after selecting a drop-down more than once, it will load the data properly but as soon as you press the page button. It will reload data from the first selection made again.
I'm assuming this has something to do with the "total" field not updating?? 
Anyway, here is my code:


<div id="select_phone" name="select_phone"/>
<div id="grid"></div>

<script>


//load a list into select_phone drop-down
$('#select_phone').load('/dashboard/select_phone.php');
            
 
  function phone_select(phone) 
  { 
// this loads the grid with data from the select_phone drop-down

$(function() {

grid=$("#grid").kendoGrid({

                         toolbar: ["excel"],
        excel: {
            allPages: true
        },
        dataSource: {
                            transport: {
                                read: "/dashboard/call_data.php?imei="+phone,
                                dataType: "json"
                            },
                            schema: {
total: function(response) 
{
                return $(response.data).length;
      },
                                data: "data"
                            },
                            pageSize: 8,
sort: {
            field: "Time",
            dir: "desc"
        }
                        },
                        height: 550,
                        scrollable: true,
resizable: true,
                        sortable: true,
                        filterable: true,
                        pageable: {
                            input: true,
                            numeric: false
                        },
                        columns: [
                            { field: "Name", title: "Name", width: "200px" },
                            { field: "Phone", title: "Phone", width: "130px" },
                            { field: "Time", title: "Call Time", width: "130px" },
                            { field: "Duration", width: "130px" }
                        ]
                    });


});

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

  }
 
 </script>

[Jay]

Solved it! In case anybody else runs into this, the fix is to add:

try {
   $('#grid').data().kendoGrid.destroy();
   $('#grid').empty();
     }
catch(err) 
{
}

before running 

$(function() {

grid=$("#grid").kendoGrid({  ...................