CODEWITHSUNDEEP
knockout.jsknockout-3.0
ExCode
ExCode

Reputation: 444

Knockout js data grid formatting according to row values

I am using knockout js grid,I used same way this example demonstrates.http://jsfiddle.net/rniemeyer/QSRBR/.

How can I changed the cell color according value,

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));


<div class='liveExample'> 

    <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>

</div>

  1. I want to change cell color according to the "Seat Count" if seat count greater than 100 sell color should be "green"

  2. need to add click event to grid rows

Can I do these things in this implementation?

Upvotes: 0

Views: 1710

Answers (1)

haim770
haim770

Reputation: 49133

The way I see it, the gridViewModel binding-handler is presented only as a tutorial and not intended to be used as a fully-functional grid plugin, that is probably why they didn't bother add bindings for css, style and click handlers.

Yet, you can still add those missing handlers yourself (change line 51 in knockout.simpleGrid.3.0.js):

<td data-bind=\"text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText], click: typeof click == 'function' ? click : function(){}, style: typeof style == 'function' ? style($parent) : {} \"></td>\

Then using it as follows:

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

Upvotes: 1

Related Questions