columnTemplate

The template string or a function, which will be used for rendering the column content for a cell. If not specified, the value of the field column option is displayed in the column data cell.

This setting overrides the column format setting.

In case a function is given, it is passed the cell container as a jQuery object, which can be directly used for injecting children inside it. The example below shows how one can append and initialize another widget in the cell.
Note that if you are appending elements manually to the cell, this function should not return anything.

If the column template function returns a defined non-null value, it will replace the contents of the cell with that value and any custom modifications made from within the function will be lost.

To have selection working properly, the HTML markup rendered in the Grid columns must contain elements that accept mouse events and do not prevent event propagation to their parent. Also, if the markup contains a TABLE element, it must be set to not accept any mouse events by using a style="pointer-events: none;" style attribute.

When virtual scrolling is set, all column template functions are invoked with an empty dictionary data item parameter the first time, in order to calculate the row height. Therefore, make sure to handle this case in your code.

<script id="columnTemplate" type="text/x-shield-template">
    <div id="productImages">
        <img src="images/categories/{ID}.png" alt="{name}" />
        {name}
    </div>
</script>

<div id="grid"></div>

<script type="text/javascript">
$("#grid").shieldGrid({
    dataSource: {
        data: [
            { ID: 1, name: "name1" },
            { ID: 2, name: "name2" }
        ]
    },
    columns: [
        { 
            field: "ID", 
            title: "Unique Number", 
            columnTemplate: $("#columnTemplate").html()
        },
        {
            field: "name",
            title : "Name", 
            width: "300px", 
            columnTemplate: function(cell, item, index) {
                // add a progressbar widget
                $('<div style="width:100%; height:16px;"></div>')
                    .appendTo(cell)
                    .shieldProgressBar({
                        min: 0,
                        max: 100,
                        value: item.percentage
                    });
            }
        }
    ]
});
</script>

Online example you can find here: columns templates.