Handling null value in kendo grid

Question

I have a kendo grid in which one column can have null values. But I don't see the grid populating when there are null values. My code is here:

$(document).ready(function() {
    $("#grid").kendoGrid({
        dataSource: gridData,
        columns: [{
            field: "name",
            title: "Name"
        }, {
            field: "result",
            title: "Result",
            template: "# if (result == null) { #" +
                "<span data-content=' '></span> } #" +
                "# } else { #" +
                "<span data-content=\"#: result#\"> </span>"
        }]
    });
});

Can anyone help where I went wrong with this.

Solution 1

I'm not sure if you really need to set data-content yourself... if you just want to set an empty string instead of a null value, you can do it with a much simpler template:

$(document).ready(function() {
    $("#grid").kendoGrid({
        dataSource: gridData,
        columns: [{
            field: "name",
            title: "Name"
        }, {
            field: "result",
            title: "Result",
            template: "#= (result == null) ? ' ' : result #"
        }]
    });
});

Solution 2

To make it easier for control/readable you can do this

$(document).ready(function() {
    $("#grid").kendoGrid({
        dataSource: gridData,
        columns: [{
            field: "name",
            title: "Name"
        }, {
            title: "Result",
            template: function (dataItem) {
                if (dataItem.result == null)
                    return 'Placeholder';
                else
                    return dataItem.result;
            }
        }]
    });
});

Personally, don't like Kendo interpolation '#', it's hard to read when there is more logic in the template, which might lead to more interpolation '#'. Make code not readable caused the start point and the endpoint are both used '#'.