Can you tell me PageSize Change Event in Kendo Angular grid - angularjs

Question

Can you tell me page size Change event in Kendo-Angular grid as i am new in kendo grid control. Please help me. Thank you in advance.
app.controller("dataController", function ($compile, dataFactory, $scope, $timeout) {
$scope.obj = [];
$scope.DistrictList = [];
$scope.DistrictTextToShow = "Select District";
$scope.GetDistrict = function () {
dataFactory.getdistrictList().success(function (data) {
$scope.DistrictList = data;
}).error(function (data) {
$.toaster({ priority: 'error', title: 'Error', message: 'Error while fetching data' });
});
};
if ($("#ddldistrict").val() == '') {
$scope.ddldistrict = GuidEmpty;
}
else {
$scope.ddldistrict = $("#ddldistrict").val();
}
$scope.gridData = new kendo.data.DataSource({
serverPaging: true,
serverSorting: true,
transport: {
read: {
url: baselocation + "api/Customer/GetAllCustomerByDistrictId",
data: { DistrictId: $scope.ddldistrict, isactive: $("#ddlstatus").val() }
}
},
schema: {
data: function (data) {
return data.Rows;
},
total: function (data) {
return data.TotalRows;
}
},
pageSize: 5
});
$scope.detailGridOptions = {
sortable: true,
pageable: {
"pageSizes": true,
change: function (e) {
if ($("#ddldistrict").val() == '') {
$scope.ddldistrict = GuidEmpty;
}
else {
$scope.ddldistrict = $("#ddldistrict").val();
}
//$("#grid1").data('kendoGrid').dataSource.pageSize(parseInt(this.value()));
$("#grid1").data('kendoGrid').dataSource.read({ DistrictId: $scope.ddldistrict, isactive: $("#ddlstatus").val() });
$("#grid1").data('kendoGrid').refresh();
}
},
datasource: $scope.gridData,
groupable: true,
scrollable: true,
columns: [{
field: "Customername",
title: "Customer Name",
width: "150px"
}, {
field: "mobile",
title: "Mobile",
width: "120px"
}, {
field: "email",
title: "Email",
width: "120px"
}, {
field: "Districtname",
title: "District",
width: "120px"
}]
};
$scope.GetDistrict();
$scope.BindData = function () {
if ($("#ddldistrict").val() == '') {
$scope.ddldistrict = GuidEmpty;
}
else {
$scope.ddldistrict = $("#ddldistrict").val();
}
$("#grid1").data('kendoGrid').dataSource.read({ DistrictId: $scope.ddldistrict, isactive: $("#ddlstatus").val() });
$("#grid1").data('kendoGrid').refresh();
}
//$("#grid1").kendoPager({
//});
//$scope.gridData.read();
});