SlickGrid: Column to Object value Extraction

by origineil

HTML

<script src="http://mleibman.github.com/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>
<link rel="stylesheet" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<link rel="stylesheet" href="http://mleibman.github.io/SlickGrid/examples/examples.css">
<div id="myGrid" style="width:600px;height:500px;"></div>

JavaScript

//See: https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-custom-column-value-extractor.html

var grid;
var columns = [
    {
    id: "NotSpecial",
    name: "Data Outside of SmDetails",
    field: "SomethingElse" 
}, 
    {
    id: "field1",
    name: "Id1",
    field: "SmDetails",
    fieldIdx: 'Id1'
}, {
    id: "field2",
    name: "Id2",
    field: "SmDetails",
    fieldIdx: 'Id2'
}, {
    id: "field3",
    name: "Other",
    field: "SmDetails",
    fieldIdx: 'Other'
}];



var options = {
    enableCellNavigation: true,
    enableColumnReorder: false,
    dataItemColumnValueExtractor:
    // Get the item column value using a custom 'fieldIdx' column param
    function getValue(item, column) { 
        var values = item[column.field];
         
        if (column.fieldIdx !== undefined) {
            return values && values[column.fieldIdx];
        } else {
            return values;
        }
    }
};

$(function () {

    var data = [{
        SomethingElse: "Something else",
        "SmDetails": {
            Id1: 40071,
            Id2: 40072,
            Other: 'Other details'
        }
    }, {
        SomethingElse: 'Nothing Special',
        "SmDetails": {
            Id1: 40073,
            Id2: 40074,
            Other: 'Misc'
        }
    }]

    grid = new Slick.Grid("#myGrid", data, columns, options);
})