javascriptknockout.jswijmowijgrid

Is it possible to have a cell of type object in a wijgrid?


I use a KnockOut observable array to populate a wijgrid. In the wijgrid, I'd like to use a JavaScript object as the value of some cells. Unfortunately, it seems as though wijmo converts objects to strings in it's own model.

Please have a look at this example. I'd like to display the vehicle owners name in table, but I need also to retain the id (and model data-structure).

The KnockOut ViewModel

var someData =[ { AssetCode: "Truck 5",
              Owner: {
                 id: 1,
                 name: 'Pete'},
              VIN: "T3SN2ADN",
              Odo: 232109,
              TimeStamp: "2012-07-21T09:13:12Z"},
            { AssetCode: "Car 8",
              Owner: {
                 id: 3,
                 name: 'Brian'},
              VIN: "COFAQ211",
              Odo: 433299,
              TimeStamp: "2012-07-17T15:34:54Z"}];

function ViewModel() {
    var self = this;
    self.gridData = ko.observableArray(someData);
}

ko.applyBindings(new ViewModel());

The wijgrid

<table id="t1" data-bind="wijgrid: {
    data: gridData,
    columns: [
    { headerText: 'Asset Code', dataKey: 'AssetCode', dataType: 'string'},
    { headerText: 'Owner name', dataKey: 'Owner'},         <!-- PROBLEM LINE -->
    { headerText: 'VIN', dataKey: 'VIN', dataType: 'string' },
    { headerText: 'Odometer', dateKey: 'Odo', dataType: 'number' },
    { headerText: 'Time', dataKey: 'TimeStamp', dataType: 'datetime', dataFormatString: timePattern }

]}"></table>

I've tried:

I've tried pretty much everything I can think of to get this to work, but wijmo seems pretty rigid here....

Additionally, when I debug in Chrome, it appears as though wijmo has convert the object to a String in it's own model prior to any formatting. This isn't very useful..

Edit - We are using Wijmo 2.3.9. We've had performance problems with Wijmo 3.* thus far, so an upgrade isn't imminent.


Solution

  • Okay, it turns out that you can get the cell value as an object using a cellFormatter... To get this to work, do not specify the dataKey attribute. Here is the amended code:

    <table id="t1" data-bind="wijgrid: {
        data: gridData,
        columns: [
            { headerText: 'Asset Code', dataKey: 'AssetCode', dataType: 'string'},
            { headerText: 'Owner name', cellFormatter: MY_FORMATTER},         <!-- FIXED LINE -->
            { headerText: 'VIN', dataKey: 'VIN', dataType: 'string' },
            { headerText: 'Odometer', dateKey: 'Odo', dataType: 'number' },
            { headerText: 'Time', dataKey: 'TimeStamp', dataType: 'datetime', dataFormatString: timePattern }
    ]}"></table>
    

    And the following JS:

    var MY_FORMATTER = function(args) {
      if (args.row.data && args.row.dataRowIndex >= 0) {
        args.formattedValue = args.row.data.Owner.name;
      } 
    };