Use a Kendo DataSource as the driver for a Kendo Grid, or any other Kendo Component, in a Rollbase Application. (Custom Template)

RBDataSourceExample2.html

<div id="grid2"></div>

<script>
$(function() {
    var anotherDataSource = new kendo.data.DataSource({
        transport: {
            read: function (options) {
                var columns = [];
            
                for (var key in anotherDataSource.options.schema.model.fields) {
                    columns.push(key);
                }
                
                var query = 'SELECT ' + columns.join(',') + ' FROM ' + anotherDataSource.options.schema.objName;
                
                rbf_selectQuery(query, 200, function (values) {
                    options.success(values);
                });
            }
        },
        schema: {
            objName: 'Sample_Object',
            model: {
                id: "id",
                fields: {
                    id: {},
                    name: {},
                  	Sample_Image_Url: {},
                  	Sample_Price: {}
                }
            },
            parse: function(response) {
                var data = [];
                var columns = [];
                
                for (var key in anotherDataSource.options.schema.model.fields) {
                	columns.push(key);
                }
                
                for (var i = 0; i < response.length; i++) {
                  	var obj = {};

                    for (var c = 0; c < columns.length; c++) {
                        obj[columns[c]] = response[i][c];
                    }
                  
                    data.push(obj);
                }
                
                return data;
            }
        },
      	pageSize: 10
    });

    $('#grid2').kendoGrid({
        dataSource: anotherDataSource,
        pageable: true,
        height: 250,
        editable: 'inline',
      	columns: [
          {
			template: "<div class='sample-image'" +
				"style='background-image: url(#:data.Sample_Image_Url#)'></div>" +
				"<div class='sample-name'>#: name #</div>",
			field: "name",
			title: "Name",
			width: 240
		  },
          {
			field: "Sample_Price",
			title: "Price"
		  }
        ]
    });
});
</script>

<style type="text/css">
    .sample-image {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;
    }

    .sample-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
        padding-left: 3px;
    }
</style>