Skip to content

Data Sources

All components of the CodeCoupler framework (System, Stage, Application, Widget) can create so named data sources. A data source is a library which handles a set of data objects and CRUD operations on it.

We will provide here a brief description of a data source. Basically CodeCoupler use the data source library of Kendo UI Core whose API can be read in detail here:

Quick Overview of Options and Methods

A data source will be created with some options which define how to receive data from a remote endpoint and how to transfer modifications:

1
2
3
4
5
6
7
8
{
  transport: {
    read: {}, //Define how to read data
    create: {}, //Define how to transfer new created data
    destroy: {}, //Define how to transfer deleted data
    update: {}, //Define how to transfer updated data
  }
}

A data source use models which can separately defined (and it is recommended to do so). A model define the fields and types of them:

1
2
3
4
5
6
7
8
9
var model = kendo.data.Model.define({
  id: "todoId",
  fields: {
    description: { type: "string" },
    priority: { type: "number" },
    done: { type: "boolean" },
    deadline: { type: "date" },
  },
});

These models can be defined in the configuration property schema.model:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{
  transport: {
    read: {}, //Define how to read data
    create: {}, //Define how to transfer new created data
    destroy: {}, //Define how to transfer deleted data
    update: {}, //Define how to transfer updated data
    schema: {
      model: model //Define here the model schema
    }
  }
}

Once you have initialized a data source you can read the data from the remote endpoint with read(). With data() or view() you get an array of data items. On each data item you can use the method set() to modify a value of a field. With add(new model()) you can add new data items. All changes will be tracked until you call the method sync() which will transfer all modifications to the remote endpoint.

Data Sources in CodeCoupler

Normally you create a data source with new kendo.data.DataSource(options). CodeCoupler components provide a method dataSource() which create data sources as well but with enhanced possibilities.

The main difference are mixins that can be used to extend Kendo UI Core data sources with special features. To create a data source with CodeCoupler you call the method with the following arguments:

1
2
3
4
5
6
//x is an instance of an System, Stage, Application or Widget
var myDataSource = x.dataSource({
  id: "", //Optional: Set here an id for this data source
  mixins: [], //Optional: Define a set of mixins to extend the functionality
  options: {}, //Optional: Define here the options like in any Kendo UI Core data source
});

Some more details of mixins and how to use the id will be explained in the API-walkthrough.

Testing Data Sources

To create quickly a data source without defining a remote endpoint for testing purposes you can use the configuration property data:

1
2
3
4
5
6
7
8
9
var myDataSource = x.dataSource({
  options: {
    data: [
      { todoId: 1, description: "one", priority: 0, done: false, deadline: new Date() },
      { todoId: 2, description: "two", priority: 0, done: true, deadline: new Date() },
      { todoId: 3, description: "three", priority: 1, done: false, deadline: new Date() },
    ],
  },
});

CodeCoupler, Widgets and Example

Most of the widgets provided by the CodeCoupler UI package are wrapper of highly flexible ui components which have been extended with a connection to a DataSource. The Kendo UI components use a connection to a datasource out of the box.

The calendar widget we have used have the possibility to receive events from one or more data sources. This widget is a wrapper of the flexible calendar library fullcalendar.io.

Another example is the widget Grid which is a wrapper of the high perfomance grid library Slickgrid. Here is an example of a quickly defined application which start only one grid widget with dynamically created test data:

apps.js

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import { Calendar, Layout } from "@codecoupler/cc-ui";
import TestingButtonsApp from "./apps/testing-buttons";
import TestingContentApp from "./apps/testing-content";
function createTestData(lines) {
  let data = [];
  for (let x = 0; x < lines; x++) {
    data.push({
      col1: `row${x}-val1`,
      col2: `row${x}-val2`,
      col3: `row${x}-val3`
    });
  }
  return data;
}
export default function() {
  return [
    {
      ui: {
        iconHtml: '<i class="far fa-smile fa-fw"></i>',
        name: "Just an Alert"
      },
      app: () => {
        alert("Hello World");
      }
    },
    {
      app: TestingButtonsApp,
      id: "TestApp1",
      options: {
        text: "My First Application"
      }
    },
    {
      ui: {
        iconHtml: '<i class="fas fa-tree fa-fw"></i>'
      },
      app: TestingButtonsApp,
      id: "TestApp2",
      options: {
        text: "My Second Application"
      }
    },
    {
      ui: {
        iconHtml: '<i class="fas fa-hand-sparkles fa-fw"></i>',
        name: "Date Selection"
      },
      panel: {
        header: true,
        setStatus: "normalized"
      },
      id: "DateSelection",
      app: {
        panel: {
          panelSize: "300 350",
          headerControls: "closeonly xs",
          headerTitle: "Select..."
        },
        widget: {
          widget: Layout,
          options: {
            root: {
              type: "widget",
              widget: Calendar,
              options: {
                onlyBackgroundEvents: true,
                themeToolbar: "small"
              }
            }
          }
        }
      }
    },
    {
      app: TestingContentApp,
      id: "TestApp3"
    },
    {
      ui: {
        iconHtml: '<i class="fas fa-th-large fa-fw"></i>',
        name: "Grid Demo"
      },
      panel: {
        header: true,
        setStatus: "normalized"
      },
      id: "GridDemo",
      app: {
        panel: {
          panelSize: "300 350",
          headerControls: "closeonly xs",
          headerTitle: "Select..."
        },
        widget: {
          id: "layout",
          widget: Layout,
          options: {
            root: {
              type: "widget",
              id: "grid",
              widget: Grid,
              options: {
                dataSource: system.dataSource({
                  options: {
                    data: createTestData(100)
                  }
                }),
                grid: {
                  showColumnHeader: false
                },
                autoColumns: false,
                columns: {
                  userId: {
                    formatter: (r, c, v, cd, dc) => {
                      return `<b>${dc["col1"]}</b>`;
                    }
                  }
                }
              }
            }
          }
        }
      },
      init: (app) => {
        app.widgets["layout"].widgets["grid"].dataSource.read();
      }
    }
  ];
}

Starting the new icon will display a grid with one column.