Prevent datasource reloading on change event of kendo grid - kendo-grid

Question

I am working on Kendo Grid, On button click, I call a function to reFetch data from db with new Parameters.
function is here
vm.refereshFigure = function (response) {
vm.gridOptions = {
datasource: new kendo.data.DataSource({
type: "odata",
transport: {
read: function (options) {
if (!!$scope.figure.figureId) {
gridService.runQuery(options, $scope.figure.figureId, response).then(function (responseData) {
options.success(responseData.data);
});
}
}
},
schema: {
data: "Data",
total: "Total"
},
change: function (e) {
debugger;
e.preventDefault();
},
pageSize: vm.gridConfigurationJson.PageSize ? vm.gridConfigurationJson.PageSize : 10,
group: vm.JsonGroupingCloumns,
aggregate: vm.aggregatesList,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
filter: !!vm.gridConfigurationJson.Filter
? vm.gridConfigurationJson.Filter.filters
: vm.gridConfigurationJson.Filter,
page: vm.gridConfigurationJson.page,
sort: vm.gridConfigurationJson.sort
}),
dataBound: function (e) {
//if (vm.gridConfigurationJson.PageSize != e.sender.pager.dataSource._pageSize) {
// saveGridConfigration(e);
//}
},
groupable: true,
pageable: {
refresh: true,
pageSizes: [10, 25, 50, 100, 200, "All"],
buttonCount: 5,
},
noRecords: true,
filterable: true,
sortable: {
mode: "multiple",
allowUnsort: true,
showIndexes: true
},
resizable: true,
reorderable: true,
columnMenu: true,
columns: vm.columnsList,
toolbar: ["excel"],
excel: {
allPages: true,
filterable: true,
},
excelExport: function (e) {
try {
var sheet = e.workbook.sheets[0];
for (var rowIndex = 1; rowIndex < sheet.rows.length; rowIndex++) {
var row = sheet.rows[rowIndex];
for (var cellIndex = 0; cellIndex < row.cells.length; cellIndex++) {
if (this.columns[cellIndex].type == 'date') {
row.cells[cellIndex].format = "yy-MM-dd hh:mm:ss";
row.cells[cellIndex].value =
kendo.parseDate(row.cells[cellIndex].value, "yyyy-MM-ddTHH:mm:ss");
}
}
}
} catch (e) {
}
var filename = "";
if ($scope.figure.captionView != undefined) {
filename = $scope.figure.captionView;
} else if ($scope.figure.caption != undefined) {
filename = $scope.figure.caption;
}
e.workbook.fileName = filename + ".xlsx";
},
};
$scope.filterChanged(response, undefined, $scope.figure.figureId);
};
It called web api two times. Below is the code in read function which executes two times.
if (!!$scope.figure.figureId) {
gridService.runQuery(options, $scope.figure.figureId, response).then(function (responseData) {
options.success(responseData.data);
});
}
After first Call, It goes Change() event, then call read() again.
Can anyone help me what I am doing wrong?