9

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?

Jav_Rock
  • 22,059
  • 20
  • 123
  • 164
user1195089
  • 91
  • 1
  • 2
  • Here's a generic solution that works for "dotted" field values: http://stackoverflow.com/a/24566666/3445021 – tc7 Jul 04 '14 at 04:29
  • @tc7: That solution uses `eval()`, so while it may work, it's not the best solution. – user5670895 May 17 '16 at 18:12

2 Answers2

15

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.

Upperstage
  • 3,747
  • 8
  • 44
  • 67
SileNT
  • 623
  • 6
  • 11
  • 1
    That was what I was afraid of. I like your suggestion and I will give it a go when I upgrade our SlickGrid libraries. The names are editable so I will have to fall back to a flattened object that I was using prior. Thanks much for the suggestion. – user1195089 Feb 09 '12 at 17:06
  • Not sure where dataItemColumnValueExtractor is documented, but this is the proper answer to this question. Thank you! – Upperstage Aug 15 '14 at 11:29
  • Note it's pretty easy to customise the editors to get and set from and to the structured data – Ben McIntyre Apr 02 '18 at 12:43
  • This is good solution and it works. But after that grouping, sorting and filtering does not work properly. I opened an issue about this in github. – Nezih Apr 02 '18 at 12:44
2

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.

ASG
  • 31
  • 3