How to access the global variable in Ajax sucess of kendo grid update?

Question

Currently Developing web Application using AngularJS using with Kendo. When I save inline edit grid need to hide my save button and want to show back the Add button. For Show and Hide I use *ngIf . In this class I define public isAddEdit: Boolean; I cannot access the variable in success scope.

update: function (options) {
    $.ajax({
        url: HttpUrl.UpdateBlog,
        contentType: "application/JSON",
        type: "POST",
        data: JSON.stringify(options.data.models),
        success: function (result) {
            options.success(result);
            this.isAddEdit = false;
            $('#save').remove();
            $('#grid').data('kendoGrid').dataSource.read();
        },
    })

This is my view

<div id ="btndiv" class="col-sm-12">
     <button *ngIf="!isAddEdit" id="addblog" class="k-button grid-top-button-override k-primary add-button page-name" (click)="addStock()">{{'Addblog' | translate}}</button>
     <button *ngIf="isAddEdit" id ="save" class="k-button grid-top-button-override k-primary save-button page-name" (click)="clicksave()">{{'Save' | translate}}</button>         
</div>

<div class="row grid-override">
     <div id="grid"></div>
</div>

Answer 1

I think that the this is related to the AJAX callback function therefore you are not accesing the variable you want. Try it with an arrow function:

       success:(result) => {
            options.success(result);
            this.isAddEdit = false;
            $('#save').remove();
            $('#grid').data('kendoGrid').dataSource.read();
       },