Nested Gird With Detailed Information

Hello,

I wonder if you are using the same data source for both both grids.

Are you using the Clients data source for Firm and for the detail data as well?

Please notice that the hierarchical-grid example in GitHub uses two data sources, one for Customer and another for Order.

You do not need any particular HTML for the hierarchical-grid example.

Are there any error messages shown to the JavaScript Console?

I hope this helps.

Hi egarcia, no Error msg, and yes i'm using one data source. named Clients. i want to rich some how and nest the grid, so the user can click the button and display whole info from database, my table is to long and it is really uncomfortable to put everything in the line, thats why i thought to nest them, for example, Client number, name, manager, manager contact  phone, and then nest , region, email, personald details, password etc. something like this demos.telerik.com/.../angular, for order i will have general details and for contact informaiton phone, city, address, employee in charge phone number etc.

Hello Giorgi,

The problem then seems to be that you are using a single data source.

When you click on the detail button, the code creates a second grid and performs a read on the data source which then results on a refreshing of main grid.

You can also create a datasource instance

Please give this a try and let me know how it goes.

You can add a 2nd data source instance for the custom view and uses the same data provider / data source as your first data source.

You would use the same code code but use a different name.

Alternatively, you could create the data source via code by specifying the type: "jsdo" and the transport properties.

Example:

           dataSource: {

                   type: "jsdo",

                   transport: {

                       jsdo: "Customer"

                   },

                   error: function(e) {

                   }

               },

i will give it  a try tomorrow and give you a feedback how it ends. . by the way if you do dataSource: {

                  type: "jsdo",

                  transport: {

                      jsdo: "Clients"

                  },

                  error: function(e) {

                  }

              },

will it work? without any jsdo conneciton definitions? directly in view-factory.js. under onShow function. if its appropriate way in kuib builder then its awesome, because when i was trying to connect my DB server from VS i have to had make a class with jsdo definitions, sources and URI's to transport them. it was anoying

Yes, it should work.

Once you have a JSDOSession set up, you can create JSDO instances for resources listed in the catalog.

In your app, the JSDOSession is created when you select the module. Kendo UI Builder generates the required code because you are using a Clients data source already. Otherwise, you would need to create the JSDOSession yourself.

You can see a sample code creating the DataSource instance directly in the following example:

   oemobiledemo.progress.com/.../grid-foreignkey

   github.com/.../view-factory.js

Notice that this example creates the JSDOSession directly via code.

(You might already see this an other Kendo UI DataSource / JSDO at oemobiledemo.progress.com/ )

i tried, ended up with same result. retrns me to main page

Hello,

Here is a sample program showing your scenario:

http://oemobiledemo.progress.com/static/kuib/hierarchical-grid2

This sample uses a regular view created using the Blank option with code in the view-factory.js file.

Here is the code:

The the dataSource for the detail grid sets type, transport.jsdo and filter. You can also add the error property.

                    this.scope.grid0.options.height = 700;
					
                    // Set the grid's detailInit event handler to create the detail/child grid
                    // when expanding the row
                    this.scope.grid0.options.detailInit = function (e) {
                        var detailsGridOptions;

                        detailsGridOptions = {
                            dataSource: {
                                type: "jsdo",
                                transport: {
                                    jsdo: "Customer"
                                },
                                filter: {
                                    field: 'CustNum',
                                    operator: 'eq',
                                    value: e.data.CustNum
                                }
							},
                            columns: [
                                //{ field: "CustNum",  title: "Cust Num", type: "int", width: "100px" },
                                { field: "CustNum", width: "70px" },
                                { field: "Address", width: "110px" },
                                { field: "City", width: "70px" },
                                { field: "State", width: "70px" }
                            ],
                            height: 100
                        };

                        angular.element('<div/>').appendTo(e.detailCell).kendoGrid(detailsGridOptions);
                    };

You can view the entire view-factory.js on the machine:

http://oemobiledemo.progress.com/static/kuib/hierarchical-grid2/extensions/scripts/Module1-HierarchicalGrid/view-factory.js

Please try it and let me know how it goes.

thanks a lot egarcia. it is working now

Hello Giorgi,

You might be interested on the following thread which another approach how to show additional data for a given row using a detailTemplate:

   community.progress.com/.../99638

I hope this helps.