Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="grid"></div>
</body>
</html>
 
function commonTemplateFunction(dataItem, field) {
    if (dataItem[field] == '0') {
        return "--";
    } else {
        return dataItem[field];
    }
}
var Definition = [
    { field: "Quantity" },
    { field: "Amount" }
];
var columns = [];
$.each(Definition, function (idx, item) {
    columns.push({
        field   : item.field,
        template: function (dataItem) {
            return commonTemplateFunction(dataItem, item.field);
        }
    });
});
$("#grid").kendoGrid({
    dataSource: [
        { Quantity: 2, Amount: 650},
        { Quantity: 0, Amount: 0 },
        { Quantity: 1, Amount: 500 },
        { Quantity: 4, Amount: 1047 }
    ],
    sortable  : true,
    columns   : columns
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers