Advanced two-tables UI using JSDO, Data Object Service and Kendo UI - Forum - Mobile - Progress Community

Advanced two-tables UI using JSDO, Data Object Service and Kendo UI

 Forum

Advanced two-tables UI using JSDO, Data Object Service and Kendo UI

  • First of all, thank you very much for the presentation https://community.progress.com/community_groups/mobile/w/mobile/2568.a-sexy-ui-for-progress-openedge-using-jsdo-oe-mobile-template-and-kendo-ui-with-sorting-filtering-and-paging . I'm looking for more advanced samples now. For example: two-tables dataset (customer,order) and few Kendo UI components. Using JSDO is still not clear for me. Is JSDO documentation available ? What are the key rules of defing "data source" for Kendo UI components.

    Regards

    Andrzej Szmyd

  • Hello,

    You are very welcome. I am glad that you liked our presentation.

    Just curious. Are doing mobile development, web development or both?

    Are you using the Views service in Telerik Platform?

    Here is a link to the documentation on the JSDO:

       

       

    I am assuming that the advance case that you are working on is somewhat similar the following example from the Kendo UI demo site:

       

    The hierarchy example using nested Kendo UI Grids.

    Please provide more information on your advance case if it is not similar that example.

    To work with hierarchical data, you can have two resources with one table each in the catalog or one resource with a dataset with two tables.

    To define a data source for a Kendo UI component, you would either specify the data source definition inline for the dataSource property or create a separate DataSoource instance if you need to refer to it.

    If you are using a Kendo UI Grid and define the data source inline, you could use access the DataSource instance in the following way:

       $("#grid").data("kendoGrid").dataSource

    If you need to work with the JSDO API, you can access the JSDO instance by using the following code:

       $("#grid").data("kendoGrid").dataSource.transport.jsdo

    The main properties for the data source definition are the following:

    - type: "jsdo" : to indicate that you are creating an instance of a JSDO DataSource

    - transport.jsdo: to specify the JSDO instance for the DataSource. You can use a string with the name of the resource, in which case, the JSDO instance is created internally, or you can use an existing JSDO instance.

    - transport.tableRef: optional parameter that is used to specify the name of the temp-table to use for the DataSource.

    Example:

                   dataSource: {
                       type: "jsdo",
                       transport: {
                           jsdo: jsdoInstance,
                           tableRef: "eCustomer"
                       }
                   },

    If you create separate instances, then the JSDOs would be independent.

    There is a mode that we have not documented where you use the same instance of the JSDO with more than one Kendo UI DataSource.

    For this mode, you would also need to use a couple of additional properties for the transport:

    - readLocal (true/false): when this property set to true the JSDO would use the data in the JSDO memory instead of reading the data via fill()/read() from the server.

    - autoSave (true/false): when this property is set to false, the JSDO would not automatically save the changes to the server by calling saveChanges(). Instead, the changes would remain in the JSDO memory and you would need to call saveChanges() directly or indirectly from a Kendo UI DataSource.

    Example:

                   dataSource: {
                       type: "jsdo",
                       transport: {
                           jsdo: jsdoInstance,
                           tableRef: "eOrder",
                           readLocal: true
                       },
                       error: function (e) {
                           console.log("Error: ", e);
                       },
                       filter: { field: "CustNum", operator: "eq", value: e.data.CustNum }
                   },

    Here is an example using nested Kendo UI Grids (read-only):

       

    This example is based on the one mentioned previously.

    Please let me know if you need more information.

    I hope this helps.

  • Thank you for your assistance.

    My system is Progress widget based but I need web access to the database now. I did few REST services to report data on the web page. My datasets contain 3-4 tables with parent and child table filter (like customer-order-orderline schema). Creating mobile services look much less time consuming then REST in "C", "U" and "D" area so I'm looking for filter possibilities in parent and child table, available in mobile (business entity class) and JSDO technology. How can I do this with JSDO DataSource object (how to choose order number 1 with customer data to dataSource) ?

    Probably I need to study Javascript much more to understand the examples.    

  • You are welcome.

    The video "Advanced Business Entity" from the series talks about adding paging, filtering, and sorting on the server.

    The general idea is that you would enhance your business entity to include support for the JSON Filter Pattern (JFP) and use the filter options and syntax from the Kendo UI DataSource. Internally, the JSDO recognizes the support for the JFP in the business entity and sends the corresponding query to server.

    The following link to the documentation includes a sample implementation for the pattern:

    documentation.progress.com/.../

    The following threads talk about this topic and can be useful:

    community.progress.com/.../69540

    community.progress.com/.../79079

    community.progress.com/.../24019

    I hope this helps.