Let me try to give you an answer on your possible problem. I mentioned in the comments that you don't have an "indent" as part of your column definition, but in fact I made a mistake into explaining it.. It doesn't have to be necessarily part of your column definitions (unless you want to display it as a column) but it has to be part of your data that you provide to your grid. So for example, if we send the data as JSON, it could look like the following (please note the "indent" property as being part of the data):
jsonData = { "pages" : [
{ "title" : "some title", "indent" : 15, "userNames" : "some user", "status" : "some status", "date" : "2001-01-01" },
{ "title" : "other title", "indent" : 10, "userNames" : "other user", "status" : "other status", "date" : "2001-02-02" }
]}
then in your script, you could (or not) display the indent as a column but it really depend on you to see it or hide it, but it really has to be part of your original data (as JSON in my example). I made a quick template using the getJSON() function, but it's really up to your choice on how to populate the data, I just wanted to guide you with some examples... Please also note that your formatter as to be declared before you can even use it, I usually declare them outside as external file but you could also declare it before your column definition.
<script src="../slick.dataview.js"></script>
<script>
// global variables
var dataView;
var grid;
// define your formatter before using it, this could also be in an external JS file
// your JSON data, also HAS TO INCLUDE the "indent" variable
var TaskNameFormatter = function (row, cell, value, columnDef, dataContext) {
var spacer = "<span style='display:inline-block;height:1px;width:" + (15 * dataContext["indent"]) + "px'></span>";
var idx = dataView.getIdxById(dataContext.id);
if (data[idx + 1] && data[idx + 1].indent > data[idx].indent) {
if (dataContext._collapsed)
return spacer + " <span class='toggle expand'></span> " + value;
else
return spacer + " <span class='toggle collapse'></span> " + value;
}
else
return spacer + " <span class='toggle'></span> " + value;
};
var columns = [
{ id: "title", name: "title", field: "title", resizeable: true, renderOnResize: true, width: 200, formatter: TaskNameFormatter },
{ id: "userNames", name: "userName", field: "userNames", resizeable: true, renderOnResize: true, width: 200 },
{ id: "status", name: "status", field: "status", resizeable: true, renderOnResize: true, width: 200 },
{ id: "date", name: "Date", field: "date", resizeable: true, renderOnResize: true, width: 200 }
];
var options = {};
// populate your grid with getJSON or any other service
$.getJSON("http://localhost/getData", function(jsonData) {
// initialize the dataView object
var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider();
dataView = new Slick.Data.DataView({
groupItemMetadataProvider: groupItemMetadataProvider
});
// create the grid object
grid = new Slick.Grid("#myGrid", dataView, columns, options);
grid.init();
dataView.beginUpdate();
dataView.setItems(jsonData);
dataView.endUpdate();
grid.updateRowCount();
grid.render();
});
</script>
Hopefully that helps you in finding your problem. :)
Oh actually, 1 other thing, I'm not sure about the _collapsed propery inside your formatter, that might also have to be part of your data (JSON in the example).
