Nested Grid binding to remote data

[iancollinsParticipant]

Hi, I’m trying to replicate a .Net Master-Detail control I have using JQwidgets. I populate both grids with JSON obtained via call to webservices. I have been able to follow your example of Master-Detail successfully but I need my detail grid nested and this is where I’m getting confused 🙂
This is how I got the Master-Detail to work. What would I need to do to nest the detail grid?

<script type="text/javascript">
            $(document).ready(function() {
                
                var student_id = '3214321';
                var url = 'http://webservicecall/ByStudent/' + student_id
                                var mastersource = {
                                        dataType: 'jsonp',
                                        type:'GET',
                                          datafields: [
                                             { name: 'ID' },
                                             { name: 'RAOSCD_LINK' },
                                             { name: 'description' },
                                             { name: 'ACAD_PERIOD' },
                                             { name: 'PublishedAt', type: 'date'},
                                             { name: 'AOS_PERIOD' }
                                                       ],
                                        url: url,
                                        cache: false,
                                        root: 'data'
                                             };//end of mastersource
                              //Preparing the data for use
                                var MasterdataAdapter = new $.jqx.dataAdapter(mastersource, { contentType: 'application/json; charset=utf-8',
                                        downloadComplete: function(data, textStatus, jqXHR)
                                        {
                                            return data.d;
                                        }
                                    });//end of dataAdapter
                                
                                    
                        $("#mastergrid").jqxGrid(
                                       {
                            width: 555,
                            source: MasterdataAdapter,
                            autoheight: true,
                            columns: [
                                    { text: 'Course', datafield: 'RAOSCD_LINK', width: 100 },
                                    { text: 'Course Name', datafield: 'description', width: 300 },
                                    { text: ' ', datafield: 'ACAD_PERIOD', width: 55 },
                                    { text: 'Published', datafield: 'PublishedAt', cellsformat:'dd/mm/yyyy',  width: 100}//,
                                   // { text: 'ID', datafield: 'ID', width: 100}
                                    ]
                                     });//end of $("#mastergrid").jqxGrid
                                     
                                     
                                     
                                      $("#mastergrid").on('rowselect', function (event) {
                        var ID = event.args.row.ID;
                        var service_call =   'http://webservicecall/Published/' + ID; 
                        //alert(ID);
                          var detailsource = {
                                        dataType: 'jsonp',
                                        type:'GET',
                                          datafields: [
                                            { name: 'AOS_CODE'},
                                            { name: 'FULL_DESC_1'},
                                            { name: 'AOS_PERIOD', width: 100 },
                                            { name: 'cw1'},
                                            { name: 'cw2'},  
                                            { name: 'cw3'},   
                                            { name: 'cw4'},   
                                            { name: 'cw5'},   
                                            { name: 'ex1'},  
                                            { name: 'ex2'},   
                                            { name: 'ex3'},   
                                            { name: 'ex4'},                          
                                            { name: 'aggmark'},
                                            { name: 'grade'}
                                                       ],
                                                    
                                        url: service_call,                                     
                                        cache: false,
                                        root: 'data'
                                             };//end of mastersource
                        
                                         var dataAdapter = new $.jqx.dataAdapter(detailsource, { contentType: 'application/json; charset=utf-8',
                                        downloadComplete: function(data, textStatus, jqXHR)
                                        {
                                            return data.d;
                                        }
                                    });//end of dataAdapter
                                      
                                      $("#detailgrid").jqxGrid(
                                       {
                            source: dataAdapter,
                             autorowheight: true,
                             autoheight: true,
                             columns: [
                                    { text: 'AOS Code', datafield: 'AOS_CODE', width: 100 },
                                    { text: 'Module', datafield: 'FULL_DESC_1', width: 180 },
                                    { text: 'Sess', datafield: 'AOS_PERIOD', width: 15 },
                                    { text: 'CW 1', datafield: 'cw1', width: 15},
                                    { text: 'CW 2', datafield: 'cw2', width: 15},  
                                    { text: 'CW 3', datafield: 'cw3', width: 15},   
                                    { text: 'CW 4', datafield: 'cw4', width: 15},   
                                    { text: 'CW 5', datafield: 'cw5', width: 15},   
                                    { text: 'EX 1', datafield: 'ex1', width: 15},  
                                    { text: 'EX 2', datafield: 'ex2', width: 15},   
                                    { text: 'EX 3', datafield: 'ex3', width: 15},   
                                    { text: 'EX 4', datafield: 'ex4', width: 15},                          
                                    { text: 'Agg', datafield: 'aggmark', width: 15},
                                    { text: 'Rslt', datafield: 'grade', width: 15}
                                    ]
                                     });//end of $("#detailgrid").jqxGrid
                                      });// end of $("#mastergrid").on('rowselect', function (event)
                });//end of .ready(function())
        </script>

[DimitarParticipant]

Hi iancollins,

Please take a look at the Nested Grids demo that shows the the client-side implementation of nested grids. Unfortunately, we do not have an ASP.NET example with this functionality, but we have a PHP demo you can find in the jQWidgets download package, in phpdemos\server_side_grid__with_nested_grids. While different server-side, this example may still be helpful to you.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[iancollinsParticipant]

Hi again.
Thanks for that I have managed to get it working, kindof 🙂
The data I have for my nested grid varies quite a lot. Even if the number of rows are known, the fact I have to wrap the text means the height of nested grid will be different for pretty much every row so $("#jqxgrid").jqxGrid('setrowdetails', i, "<div id='grid" + i + "' style='margin: 10px;'></div>", 220, true); isn’t going to work well for me.

Is there a way to have this details row resize automatically to fit the grid it contains?

Regards,

Ian

[DimitarParticipant]

Hi Ian,

Unfortunately, row details auto height is not supported.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts