Slickgrid TaskNameFormatter does not work

Question

i have a problem with the formatter in slickgrid. There is no error or something else. I copied the lines from the tutorial.

The formatter does not activate, so it won't give me the right class, to collapse my rows

I'm using also a dataView and groupItemMetadataProvider. InlineFilters are true

 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>&nbsp;" + value;
        else
            return spacer + " <span class='toggle collapse'></span>&nbsp;" + value;
    }
    else
        return spacer + " <span class='toggle'></span>&nbsp;" + 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 }
    ];

I hope you can help. If you need more code, tell me, but this is my main prob.

---

Strikeheart

Answer 1

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>&nbsp;" + value;
            else
                return spacer + " <span class='toggle collapse'></span>&nbsp;" + value;
        }
        else
            return spacer + " <span class='toggle'></span>&nbsp;" + 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).