Kendo UI Builder generates code to instantiate Kendo UI DataSources using the JSDO dialect. The code is generated into the controller.js file.

When working with a view created from a built-in template, Kendo UI Builder generates code for the data sources used in the view.
When working with a view created from a blank template, Kendo UI Builder generates data sources for all the data sources specified in the view's properties.

You can refer to the Kendo UI DataSources from the controller.public.js file.

For example, for a view created using the blank template, you would use this.$ds['<datasource-name'] .
However, for a view from a built-in template, you may use this.$ds, this.$parentDs, or this.$childDs.

The exact reference to use depends on the type of template. You can check the controller.js file to see what DataSources are instantiated.

You may want to create a function to obtain the DataSource in case that the reference changes in a future version.

For example, you can write a getDS() similar to the one mentioned in the following article:
    https://community.progress.com/community_groups/openedge_kendo_ui_builder/w/openedgekendouibuilder/2924.how-to-add-a-custom-module-and-service-in-kendo-ui-builder-2-0

You can access the JSDO instance associated with a DataSource using the dataSource.transport.jsdo reference.
Example:

	dataSource.transport.jsdo.invoke('<method-name', <parameters>).done( <success handler> ).fail( <error handler> );

Example:

        try {
            this.$ds['OrderOrderLineDS'].transport.jsdo
                .invoke('MonthlySales', {piYear: 2017, pcSalesRep: 'BBB'})
                .done(function (jsdo, success, request) {
                    console.log('Monthly Sales for ' + request.objParam.pcSalesRep + ': ');
                    if (request.response.ttSales) {
                        request.response.ttSales.ttSales.forEach(function (element) {
                            console.log(element.Month + ' ' + element.Sales);
                        });
                    }
                }).fail(function (jsdo, success, request) {
                    console.log('Error while calling invoke operation.');
                });
        } catch (e) {
            console.log('Exception: ' + e.message);
        }
	

Note: This example uses the following demo service:

In some cases, depending on your requirements, you might want to create JSDOs or DataSources programmatically.
For example, you need to call an invoke operation or dynamically change the DataSource for Grid or a Chart.

Here are some scenarios:

  • Creating a JSDO instance and calling a JSDO API method such as invoke().
  • Creating a Kendo UI DataSource of type JSDO.
  • Creating a Kendo UI DataSource of type JSDO using an existing JSDO instance. In this case, you would be sharing a JSDO instance instead of creating a new one internally. The JSDO instance can be shared with multiple DataSources.
  • Creating a Kendo UI DataSource with local data.

Creating a JSDO instance and calling a JSDO API method such as invoke()

	jsdo = new progress.data.JSDO('OrderOrderLine');
	jsdo.invoke('<method-name', <parameters>).done( <success handler> ).fail( <error handler> );

Example:

        var jsdo;
        try {
            jsdo = new progress.data.JSDO('OrderOrderLine');
            jsdo
                .invoke('MonthlySales', {piYear: 2017, pcSalesRep: 'BBB'})
                .done(function (jsdo, success, request) {
                    console.log('Monthly Sales for ' + request.objParam.pcSalesRep + ': ');
                    if (request.response.ttSales) {
                        request.response.ttSales.ttSales.forEach(function (element) {
                            console.log(element.Month + ' ' + element.Sales);
                        });
                    }
                }).fail(function (jsdo, success, request) {
                    console.log('Error while calling invoke operation.');
                });
        } catch (e) {
            console.log('Exception: ' + e.message);
        }

Creating a Kendo UI DataSource of type JSDO

            dataSource = new kendo.data.DataSource({
                type: 'jsdo',
                transport: {
                    jsdo: 'OrderOrderLine',
                    tableRef: 'ttOrder'
                }
            });

Creating a Kendo UI DataSource of type JSDO using an existing JSDO instance

            jsdoInstance = new progress.data.JSDO('OrderOrderLine');
            orderDS = new kendo.data.DataSource({
                type: 'jsdo',
                transport: {
                    jsdo: jsdoInstance,
                    tableRef: 'ttOrder'
                }
            });
            orderLineDS = new kendo.data.DataSource({
                type: 'jsdo',
                transport: {
                    jsdo: jsdoInstance,
                    tableRef: 'ttOrderLine'
                }
            });

Creating a Kendo UI DataSource with local data

            dataSource = new kendo.data.DataSource({
				data: [
					{ name: "Jane Doe", age: 30 },
					{ name: "John Doe", age: 33 }
				]		    
            });	    

Related links: