Align text center dynamically in knockout simplegrid

Question

I am using knockout simplegrid and want to display one of column in center.

I tried to add below code with text-align: centre to initiate simple grid in my view model

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

But it throws me error Unexpected token -

I also added one observable simplegrids view model which is this.textAlign = ko.observable("left");

I added value "left" because that will be default. But i dont know how do i make use of this observable in the simplegrid viewmodel.

Here is the Fiddle

Waiting eagerly for feedback from you intelligent guys.

Update1

I know understood why i was getting "unexpected token - " error. Its because it was expecting javascript style name for text-align. The equivalent javascript style name is textAlign which is without -. I got this info from this Page

But i still cant dynamically bind text to center

Answer 1

The functionality of the knockout simplegrid is very limited so you need to add this functionality yourself.

You have to extend the "ko_simpleGrid_grid" template and add a style binding on the gnerated td with:

<tr data-bind=\"foreach: $parent.columns\">\
      <td data-bind=\"text: typeof rowText == 'function' ? \
          rowText($parent) : $parent[rowText], style: $data.cellStyle \"></td>\
</tr>\

And now you can pass in any valid style binding value with:

columns: [
            { headerText: "Item Name", rowText: "name" },
            { headerText: "Sales Count", rowText: "sales", 
              cellStyle: { textAlign: "center" } },
            { headerText: "Price", 
                rowText: function (item) { return "$" + item.price.toFixed(2) } }
        ],

Demo JSFiddle.