jsdo not refreshing

Posted by mflanegan on 15-Feb-2016 08:26

Hi there,

Im using a kendo ui grid with a detail template. Both grids, master and detail, are updateable.

Both of them implement the same example (please see at the bottom of this post), including the same naming standards and jsdo. The only thing that changes is this:

master:

var jsdo = new progress.data.JSDO({ name: 'Customer' });

details:

jsdo = new progress.data.JSDO({ name: 'Orders' });

I have a search control that applies the filter to the master grid.

Snerario:

Once the user searches for records, they will go and view the master and detail grids. Then if you go and search again, it seems that the jsdo is looking at the detail jsdo when applying the filter.

I assume that its because the master and detail are using the same variable, "jsdo". I have tried changing the naming the standard from jsdo to jsdomaster and jsdodetail. This results in a whole lot of errors that I can not seem to solve.

e.g:

master:

var jsdomaster = new progress.data.JSDO({ name: 'Customer' });

details:

jsdodetail = new progress.data.JSDO({ name: 'Orders' });

Can someone steer me in the right direction.

<!DOCTYPE html>
<html>
<head>
    <base href="">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
    <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://oemobiledemo.progress.com/jsdo/progress.jsdo.3.1.js"></script>
</head>
<body>
    <div id="example">
        <div id="grid"></div>
        <script>
            $(document).ready(function () {
                var serviceURI = "http://oemobiledemo.progress.com/CustomerService"; 
                var catalogURI = "http://oemobiledemo.progress.com/CustomerService/static/mobile/CustomerService.json";
session = new progress.data.Session();
session.login(serviceURI, "", "");
session.addCatalog(catalogURI);
jsdo = new progress.data.JSDO({ name: 'Customer' });
                $("#grid").kendoGrid({
                    dataSource: {
                        transport: {
                            jsdo: jsdo,
                            read: jsdo_transport_read,
                            create: jsdo_transport_create,
                            update: jsdo_transport_update,
                            destroy: jsdo_transport_destroy,                            
                        },
                        schema: {
                            model: {
                                id: "_id"
                            }
                        },
                        error: function(e) {
                            console.log("Error: ", e);
                        }
                    },
                    height: 350,
                    groupable: true,
                    sortable: true,
                    reorderable: true,
                    resizable: true,
                    sortable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true,
pageSize: 10,
                        buttonCount: 5
                    },
                    editable: "inline",                 
                    toolbar: ["create"],                    
                    columns: [
                        { field: "CustNum",  title: "Cust Num", type: "int", width: 100 },
                        { field: "Name" },
                        { field: "State" },
                        { field: "Country" },
                        { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }                        
                    ]
                });
            });
            function jsdo_transport_read(options) {
                var jsdo = this.jsdo;
                jsdo.subscribe('AfterFill', 
                    function callback(jsdo, success, request) {
                        jsdo.unsubscribe('AfterFill', callback, jsdo);
                        if (success)
                            options.success(jsdo.getData());
                        else
                            options.error(request.xhr, request.xhr.status, request.exception);
                    }, jsdo);
                jsdo.fill();
            }
            
            function jsdo_transport_create(options) {
                var jsdo = this.jsdo;
                var jsrecord = jsdo.add(options.data);
                jsdo.subscribe('AfterSaveChanges', 
                    function callback(jsdo, success, request) {
                        jsdo.unsubscribe('AfterSaveChanges', callback, jsdo);
                        var data;
                        if (success) {
                            if (request.batch 
                                && request.batch.operations instanceof Array
                                && request.batch.operations.length == 1) {
                                data = request.batch.operations[0].jsrecord.data;
                            }
                            options.success(data);
                        }
                        else
                            options.error(request.xhr, request.xhr.status, request.exception);
                    }, jsdo);
                jsdo.saveChanges();
            }            
            
            function jsdo_transport_update(options) {
                var jsdo = this.jsdo;
                var jsrecord = jsdo.findById(options.data._id);
                try {
                    jsdo.assign(options.data);
                } catch(e) {
                    options.error(null, null, e);
                }
                jsdo.subscribe('AfterSaveChanges', 
                    function callback(jsdo, success, request) {
                        jsdo.unsubscribe('AfterSaveChanges', callback, jsdo);
                        var data;                        
                        if (success) {
                            if (request.batch 
                                && request.batch.operations instanceof Array
                                && request.batch.operations.length == 1) {
                                data = request.batch.operations[0].jsrecord.data;
                            }                        
                            options.success(data);
                        }
                        else
                            options.error(request.xhr, request.xhr.status, request.exception);
                    }, jsdo);
                jsdo.saveChanges();
            }
            function jsdo_transport_destroy(options) {
                var jsdo = this.jsdo;
                var jsrecord = jsdo.findById(options.data._id);
                try {
                    jsdo.remove();
                } catch(e) {
                    options.error(null, null, e);
                }
                jsdo.subscribe('AfterSaveChanges', 
                    function callback(jsdo, success, request) {
                        jsdo.unsubscribe('AfterSaveChanges', callback, jsdo);
                        if (success)
                            options.success([]);
                        else
                            options.error(request.xhr, request.xhr.status, request.exception);
                    }, jsdo);
                jsdo.saveChanges();
            }
        </script>
    </div>
</body>
</html>

All Replies

Posted by egarcia on 15-Feb-2016 08:55

Hello Meyrick,

Are you using JSDO 3.1 or 4.x?

Even though the example that you are using should work, it is using an old approach to integrate between the JSDO and Kendo UI.

Instead of using progress.jsdo.3.1.js, you should be using version 4.0 or higher. The current version is 4.2.

Version 4.x is the version that is used in Telerik Platform.

The new library is called progress.all.js and includes the support code for the JSDO dialect for the Kendo UI DataSource.

This component provides the support for the transport methods and you do not need to specify them yourself.

The progress.all.js library is included in the Telerik Platform projects and it can also be downloaded from GitHub:

github.com/CloudDataObject

github.com/.../lib

The following whitepaper gives you some information on the version 4.x of the JSDO with Kendo UI:

community.progress.com/.../2135

I suspect that the issue that you are seeing is because the scope of these methods when trying use them from two instances.

I hope this helps.

Posted by Elsworth Burmeister on 16-Feb-2016 01:42

Hi

If i do things this way... i cannot get my transport events to fire no matter what i do ? CRUD events never fire!!!

How do use these CRUD events?? i need to cater for extra functionality when the user updates a grid so i need to use these events.

TIA

<div id="dimensions">

<div id="griddim"></div>

<script>

$(document).ready(function () {

var element = $("#griddim").kendoGrid({

dataSource: {

type: "jsdo",

filter: {

part: '1002',

type: 'ea'

},

transport: {

jsdo: "beDimensions",

read: function (options) {

console.log("im here in the read");

},

update: function (options) {

console.log("im here in the update");

},

},

schema: {

                           model: {

                               id: "_id"

                           }

                       },

error: function(e) {

                           console.log("Error: ", e);

                       },

pageSize: 20,

serverPaging: true,

serverSorting: true,

serverFiltering: true,

autoBind: true,

},

height: 550,

sortable: true,

pageable: false,

editable: "popup",

columns: [{

field: 'ttpart',

title: 'Part',

width: 100

},

{

field: 'tttype',

title: 'Type',

width: 50

},

{

field: 'ttsize',

title: 'Size',

width: 100

},

{

field: 'ttbarcode',

title: 'Barcode',

width: 100

},

{

command: ["edit", {

text: "View Details",

click: showDetails

}],

title: "Actions",

width: "250px"

}

]

});

function showDetails(e) {

alert("Showing details");

}

});

</script>

</div>

Posted by egarcia on 16-Feb-2016 08:57

Hello,

The CRUD methods of the transport are not events but the implementation of the CRUD operations.

With version 4.0 and greater of the JSDO library, the DataSource of type "jsdo" provide the implementation for the CRUD operations internally.

I think that you can accomplish what you are trying to do by using the change event of the Kendo UI DataSource:

   docs.telerik.com/.../datasource

Another approach using the JSDO is to use the CRUD events afterCreate, afterUpdate, afterFill/afterRead, afterDelete, or afterSaveChanges at the JSDO level:

   documentation.progress.com/.../

I hope this helps.

This thread is closed