CODEWITHSUNDEEP
jsonslickgrid
user1195089
user1195089

Reputation: 91

Slickgrid - Column Definition with Complex Objects

I have a Java object where the person object contains a displayName object. I have converted it to a JSON object for my JSP. The data looks like the following:

var people = [
{"id":52959,"displayName":{"firstName":"Jim","lastName":"Doe","middleName":"A"},"projectId":50003,"grade":"8","statusCode":"A","gradYear":2016,"buyer":false},
{"id":98765,"displayName":{"firstName":"Jane","lastName":"Doe","middleName":"Z"},"projectId":50003,"grade":"8","statusCode":"A","gradYear":2016,"buyer":true}
];

I want to bind my columns to the name properties that reside within the displayName object, but I am cannot get the column definition to recognize where the data resides. Here is an example of my firstName column definition:

{id: 'displayName.firstName', field: 'displayName.firstName', name: 'First Name',
width: 110, sortable: true, editor: TextCellEditor, formatter: SpaceFormatter,              
cssClass: '', maxLength: 250, editable: true}

The view does not render the names although the data is there. Is it possible to bind a column to an object property that resides within another object? If so, what am I doing wrong?

Upvotes: 9

Views: 6592

Answers (2)

SileNT
SileNT

Reputation: 623

Slickgrid doesn't support this capability by default, but you can workaround it by adding custom value extractor to your options object:

var options = {
  dataItemColumnValueExtractor: function(item, columnDef) {
    var names = columnDef.field.split('.'),
        val   = item[names[0]];

    for (var i = 1; i < names.length; i++) {
      if (val && typeof val == 'object' && names[i] in val) {
        val = val[names[i]];
      } else {
        val = '';
      }
    }

    return val;
  }
}

var grid = new Slick.Grid($("#slickgrid"), data, columns, options);

The code is tested with slickgrid 2.0 and is working just fine. Unfortunately seems that slickgrid code is a bit inconsistent and editors don't take into account this option, so this solution is usable only if you will display the data without editing.

Upvotes: 15

ASG
ASG

Reputation: 31

I know this is a bit old... but my work around is to do a pre-process on my items. Basically, flattening the model out:

var preProcessItems = function (items) {
  var newItems = [];
  for (var i = 0; i < items.length; i++) {
    var item = items[i];
    item['firstName'] = item['displayName']['firstName'];
    newItems[i] = item;
  }
  return newItems;
};

/// when the value is updated on the flat structure, you can edit your deep value here
var fNameFormatter = function (row, cell, value, columnDef, dataContext) {
  // datacontext.displayName.firstName = value;
  return value ? value : "";
};

This problem seems to be more a of a data modeling issue though.

Upvotes: 2

Related Questions