CODEWITHSUNDEEP
javascriptknockout.jsgrid
BurakBK
BurakBK

Reputation: 140

How I can do delete row for KnockOut Paged Grid?

My View: 

<div data-bind='simpleGrid: gridViewModel'> </div>

    <button data-bind='click: addItem'>
        Add item
    </button>

    <button data-bind='click: sortByName'>
        Sort by name
    </button>

    <button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
        Jump to first page
    </button>

My View Model:

var initialData = [
    { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
    { name: "Speedy Coyote", sales: 89, price: 190.00 },
    { name: "Furious Lizard", sales: 152, price: 25.00 },
    { name: "Indifferent Monkey", sales: 1, price: 99.95 },
    { name: "Brooding Dragon", sales: 0, price: 6350 },
    { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
    { name: "Optimistic Snail", sales: 420, price: 1.50 }
];

var PagedGridModel = function(items) {
    this.items = ko.observableArray(items);

    this.addItem = function() {
        this.items.push({ name: "New item", sales: 0, price: 100 });
    };

    this.sortByName = function() {
        this.items.sort(function(a, b) {
            return a.name < b.name ? -1 : 1;
        });
    };

    this.jumpToFirstPage = function() {
        this.gridViewModel.currentPageIndex(0);
    };

    this.gridViewModel = new ko.simpleGrid.viewModel({
        data: this.items,
        columns: [
            { headerText: "Item Name", rowText: "name" },
            { headerText: "Sales Count", rowText: "sales" },
            { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
        ],
        pageSize: 4
    });
};

ko.applyBindings(new PagedGridModel(initialData));

And Here is my jsFiddle: http://jsfiddle.net/rniemeyer/QSRBR/

I want to be able to delete every line. I want to get at the end of each row delete operation. How I can do ? Thank you in advance. I'm waiting your answers guys.

Upvotes: 1

Views: 174

Answers (1)

Rajesh
Rajesh

Reputation: 24925

Knockout components are based on data associated with them.

To remove any row, you just have to manipulate that array associated with it.

Sample JSFiddle.

Note

I have just used array.shift and array.pop for demonstration purpose. You can look into array.splice to remove any row from in between.

Upvotes: 1

Related Questions