KoGrid how to refresh grid in case data is changed

Question

I am tring to use KoGrid lib, but I got case that I can't resolve. I don't know how to refresh grid in case if I got new data for display. I need to update data after ajax call.

$.ajax({
                type: "GET",
                url: reqvesturl,
                cache: false,
                dataType: "jsonp",
                success: function (data) {
                     resultData = data;
                     if (!model)
                     {
                        model =new mainViewModel();
                        ko.applyBindings(model);
                      }
                      else
                       {
                         model.myData(data);
                         //mo.applyBindings();
                       };
                     //model.myData(data);           
                },
                error: function (jqXHR, textStatus, errorThrown) {

                }
            });




var resultData = new Array();
var model ;

function mainViewModel() {
    var self = this;
    var checkmarkFilter = function (input) {
        return input ? '\u2714' : '\u2718';
    };
    var dateFilter = function (input) {
        return new Date(input);
    };
    self.mySelections = ko.observableArray([]);
    self.myData = ko.observableArray([]);
    self.myVisibleData = ko.observableArray([]);
    self.filterOptions = {
        filterText: ko.observable(""),
        useExternalFilter: false
    };
    self.pagingOptions = {
        pageSizes: ko.observable([10, 20, 50]), //page Sizes
        pageSize: ko.observable(10), //Size of Paging data
        totalServerItems: ko.observable(0), //how many items are on the server (for paging)
        currentPage: ko.observable(1) //what page they are currently on
    };
    self.getPagedDataAsync = function (pageSize, page, searchText) {    
         var pagedData = resultData.slice((page - 1) * pageSize, page * pageSize);  
         self.myVisibleData(pagedData);
         self.myData(resultData);
         self.pagingOptions.totalServerItems(resultData.length);

        // setTimeout(function () {
            // var data;
            // if (searchText) {
                // var ft = searchText.toLowerCase();
                // data = largeLoad().filter(function (item) {
                    // return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                // });
            // } else {
                // data = largeLoad();
            // }
            // //var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
            // self.myData(data);
            // self.pagingOptions.totalServerItems(data.length);
        // }, 100);
    };
    self.pagingOptions.pageSize.subscribe(function (a) {
        self.getPagedDataAsync(a, self.pagingOptions.currentPage(), self.filterOptions.filterText());
    });
    self.pagingOptions.currentPage.subscribe(function (a) {
        self.getPagedDataAsync(self.pagingOptions.pageSize(), a, self.filterOptions.filterText());
    });
    self.filterOptions.filterText.subscribe(function (a) {
        self.getPagedDataAsync(self.pagingOptions.pageSize(), self.pagingOptions.currentPage(), a);
    });
    self.getPagedDataAsync(self.pagingOptions.pageSize(), self.pagingOptions.currentPage());
    self.columnsChanged = function(newCols) {
        return true;
    };
    self.gridOptions = {
        data: self.myVisibleData,
        selectedItems: self.mySelections,
        displaySelectionCheckbox: true,
        multiSelect: true,
        showGroupPanel: false,
        showColumnMenu: false,
        showFilter: false,
        columnsChanged: self.columnsChanged,
        maintainColumnRatios: true,
        enablePaging: true,
        pagingOptions: self.pagingOptions,
        columnDefs: ko.observableArray( [{ field: 'name', displayName: 'Adr', width: 'auto' },
                     { field: 'type', displayName: 'type', width: 'auto' },
                     { field: 'id', displayName: 'id', width: 'auto' }   ])
    };

}

//ko.applyBindings(new mainViewModel());

How to refresh grid ?

Answer 1

If your ajax method returns successful, have a method in your mainViewModel called refresh that looks something like this:

self.refresh = function(myAjaxData){ self.myData(myAjaxData) }