Use a Kendo DataSource as the driver for a Kendo Grid, or any other Kendo Component, in a Rollbase Application. (CRUD/Sort/Filter/Page)

RBDataSourceExample1.html

<div id="grid1"></div>

<script>
$(function() {
    var dataSource = new kendo.data.DataSource({
      	serverFiltering: true,
      	serverSorting: true,
      	serverPaging: true,
      	pageSize: 2,
        transport: {
            create: function (options) {
                var fieldMap = [];
    
                for (var key in options.data) {
                    fieldMap[key] = options.data[key];
                }
            
                rbf_createRecord(dataSource.options.schema.objName, fieldMap, false, function () {
                    var values = [];
                  	
                  	values[0] = new Array(1);
                  
                  	values[0][0] = id;
                  
                  	options.success(values);
                })
            },
            read: function (options) {
                var columns = [];
            
                for (var key in dataSource.options.schema.model.fields) {
                    columns.push(key);
                }
                
                var query = ' FROM ' + dataSource.options.schema.objName;

              	if (options.data.hasOwnProperty('filter') && options.data.filter && options.data.filter.filters.length) {
                  
                  query += ' WHERE ' + options.data.filter.filters.map(function (filter) {
                      
                      var operator = null;
                      var value = null;
                    
                      switch (filter.operator) {
                        case 'eq':
                            operator = '=';
                          	value = filter.value;
                          	break;
                        case 'neq':
                          	operator = '<>';
                          	value = filter.value;
                          	break;
                        case 'startswith':
                          	operator = 'LIKE';
                            value = filter.value + '%';
                          	break;
                        case 'contains':
                        	operator = 'LIKE';
                            value = '%' + filter.value + '%';
                            break;
                        case 'doesnotcontain':
                          	operator = 'NOT LIKE';
                          	value = '%' + filter.value + '%';
                          	break;
                        case 'endswith':
                          	operator = 'LIKE';
                          	value = '%' + filter.value;
                          	break;
                        case 'isnull':
                          	operator = 'IS NULL';
                          	break;
                        case 'isnotnull':
                          	operator = 'IS NOT NULL';
                          	break;
                        case 'isempty':
                          	operator = '=';
                          	value = '';
                          	break;
                        case 'isnotempty':
                          	operator = ';';
                          	value = '';
                          	break;
                        case 'gt':
                          	operator = '>';
                          	value = filter.value;
                          	break;
                        case 'lt':
                          	operator = '<';
                          	value = filter.value;
                          	break;
                        case 'gte':
                          	operator = '>=';
                          	value = filter.value;
                          	break;
                        case 'lte':
                          	operator = '<=';
                          	value = filter.value;
                          	break;
                      }

                      if (typeof value === 'string') {
                          value = "'" + value + "'";
                      }

                      return filter.field + ' ' + operator + ((value !== null) ? ' ' + value : '');
                  }).join(' ' + options.data.filter.logic + ' ');
                  
                }

              	var order = '';
              
              	if (options.data.hasOwnProperty('sort') && options.data.sort && options.data.sort.length) {
                  
                  	order += ' ORDER BY ' + options.data.sort.map(function (sort) {
                      
                      return sort.field + ' ' + sort.dir;
                      
                    }).join(',');
                }

              	rbf_selectQuery('SELECT count(1) ' + query, 20000, function (count) {
                  rbf_selectQuery2('SELECT ' + columns.join(',') + query + order, options.data.skip, options.data.pageSize, function (values) {
                      options.success({ total: count[0][0], data: values });
                  });
                });
                
            },
            update: function (options) {
                var fieldMap = [];
    
                for (var key in options.data) {
                    fieldMap[key] = options.data[key];
                }
            
                rbf_updateRecord(dataSource.options.schema.objName, options.data.id, fieldMap, false, function () {
                    options.success();
                });
            },
            destroy: function (options) {
                rbf_deleteRecord(dataSource.options.schema.objName, options.data.id, function () {
                    options.success();
                });
            }
        },
        schema: {
            objName: 'Sample_Object',
            model: {
                id: "id",
                fields: {
                    id: {},
                    name: {},
                    Sample_Price: { type: 'number' }
                }
            },
          	data: 'data',
          	total: 'total',
            parse: function(response) {
                var data = [];
                var columns = [];

                for (var key in dataSource.options.schema.model.fields) {
                	columns.push(key);
                }
                
                for (var i = 0; i < response.data.length; i++) {
                  	var obj = {};

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

    $('#grid1').kendoGrid({
        dataSource: dataSource,
      	pageable: true,
        height: 250,
        toolbar: ['create'],
        editable: 'inline',
        columns: [
			{ field: "name", title: "Sample Name", width: "220px" },
			{ field: "Sample_Price", title: "Price", width: "120px" },
			{ command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }
        ],
      	filterable: true,
      	sortable: {
    		mode: 'multiple'
  		}
    });
});
</script>