How to refresh Kendo Grid on delete and add row action?

Question

I have data in the grid but after certain actions like (delete or add) i want to refresh grid , below i have method for delete that is deleting the row in Kendo grid. So i want to refresh grid once delete action is completed. How to achieve that task with below implementation...

So far tried code....

main.html

<div  kendo-grid="topRiskGrid" options="topRisksOptions" ></div>

main.ctrl

$scope.topRisksOptions = topRiskGridConfig.getTopRisksGrid();
            $scope.topRisksOptions.dataSource = rcsaAssessmentService.getTopRisksGridDataSource($stateParams.assessmentId);

var deleteCallBack = function () {
                $scope.topRiskGrid.dataSource.read();
            };
            $scope.deleteTopRisks = function(key){
              rcsaAssessmentFactory.deleteTopRisk(key.riskAssessmentKeyConcernKey,'RS_DELETED').then(function(){
                deleteCallBack();
              });
            }

main.factory

getTopRisksGridDataSource : function(assessmentId) {
                            return new kendo.data.DataSource({
                                type : 'json',
                                transport : {
                                    read : function(options) {

                                        return $http.get('app/assessment/rest/topRisks?riskAssessmentKey=' +assessmentId).success( 
                                                function(data) {
                                                    options.success(data.riskAssessmentKeyConcernDTOs);
                                                });
                                    }

                                },
                                pageSize : 5,

                            });
                        }

You delete the item on the client-side, but where do you delete it on the server? I'm assuming the relevant code is inside rcsaAssessmentFactory.deleteTopRisk()? Doing a read on the server without deleting the data there will just repopulate it like nothing happened. — Brett
thanks for response delete method code is in factory delete is working good if you refresh page you can see that...But question is how i will refresh grid on that delete action ? — aftab
If what you're saying is correct, then performing a read on the grid's data source is how you'd refresh the data. It seems like this is exactly what you're asking the code to do, so, I'd do some deeper debugging on your part and stepping through your code. Be sure the timing of your delete and read are running properly and the data your receive back from your server is correct. We can't help you more without a demo that recreates the problem. — Brett
Additional question, is the data from your server get request cached perhaps? — Brett
Yes get method cached...i have error dataSource is undefined with above code... — aftab

David OBrien David OBrien · Accepted Answer · 2015-06-17T21:10:03

$("#btn_addContact").click(function(e) {
   // show the spinner
   kendo.ui.progress($("#contactdetailgrid"), true);
  $.ajax({
    type: "POST",
    url: 'ajaxdata/util_projectcontacts.php',
    data: data,
    dataType: 'text' }).done(function() {
      // reload the grid data
      $("#contactdetailgrid").data('kendoGrid').dataSource.read();
      $("#contactdetailgrid").data('kendoGrid').refresh();
      // hide the spinner
      kendo.ui.progress($("#contactdetailgrid"), false);
  });
});

I do it like this on my pages

How to refresh Kendo Grid on delete and add row action?

1 Answers