Connected Grid is not working when used with nested grid

[dev-debug]

Hi,

In Gijgo Grid's site for connected grid, there's an issue when you first load the page to view the connected grid page cuz there's no row selected in first grid , so no data for second grid.

Similarly, I've a connected grid which is supposed to be loaded when I select row on $detailWrapper grid of the nested grid. My nested grid works fine. The only problem is similar to the issue in your website(for connected grid) -loading the connected grid first time throws error.

So, I've hiddened the connected grid(2nd one) and shown it when row is selected in the $detailWrapper grid of the nested grid. My nested Grid has two grids - CountryGrid & RegionGrid. When a region row is selected, it should display stateaProvGrid(Region grid is connected to StateProvince Grid)

Issues are

1. If I hide the connected grid StateProvGrid & show it as well as load it only when a row in RegGrid is selected, then reload doesn't work cuz on regGrid.on('rowSelect', function (e, $row, record) can have either loadgrid() [first load to avoid error reported in your gijgo connected grid page) or reload().

2. I've to pass 3 paramters to my controller API - Region, Category, Year. So, my Load() & Reload() should take these paramters.

So, I'm stuck between choosing first initial load & reload in my regGrid.on('rowSelect', function (e, $row, record). Is there any way to resolve this issue?

` $(document).ready(function () { var regGrid, stateProvGrid;

            //gijgo grid starts
            var countryGrid = $('#countryGrid').grid({
                primaryKey: 'CountryId',
                dataSource: 'http://localhost:51604/api/Sales/GetSalesByGeo',
                columns: [
                    { field: 'CountryId', hidden: true },
                    { field: 'SalesTerritoryCountry', title: 'Country' },
                    { field: 'TotalMargin', title: 'Total Margin' }
                ],
                detailTemplate: '<div><table id="regGrid"/></div>'
            });
            countryGrid.on('detailExpand', function (e, $detailWrapper, CountryId) {
                regGrid = $detailWrapper.find('table').grid({
                    params: { CountryId: CountryId },
                    primaryKey: 'SalesTerritoryKey',

                    dataSource: 'http://localhost:51604/api/Sales/GetSalesByRegion',
                    columns: [
                        { field: 'ProductCategoryKey', hidden: true },
                        { field: 'EnglishProductCategoryName', title: 'Category' },
                        { field: 'SalesTerritoryKey', hidden: true },
                        { field: 'SalesTerritoryRegion', title: 'Region' },
                        { field: 'CalendarYear', title: 'Year' },
                        { field: 'Total_Sales', title: 'Total Sales' },
                        { field: 'Total_cost', title: 'Total Cost' },

                        { field: 'Total_Margin', title: 'Total Margin' }
                    ],
                    pager: { limit: 5 }

                });
                regGrid.on('rowSelect', function (e, $row, record) {
                    document.getElementById('stateProvGrid').style.visibility = "visible";
                    var data = regGrid.get(grid.getSelected());
                    // ************THIS(If reload is called  on rowSelect then, I've load this grid on first page render - which 
                    //throws same error as in gijgo connected grid page in your website
                    //************************************//
                    stateProvGrid.reload({ EnglishProductCategoryName: data.EnglishProductCategoryName, SalesTerritoryRegion: data.SalesTerritoryRegion, CalendarYear: data.CalendarYear, page: 1 });

                    // ************And If I use initial load grid here - on rowSelect(), then where & which event do i call reload()? 
                    //Cuz using LoadGrid here will not reload grid at all once i reselect another row in region grid************************************//
                    //loadGrid(data.EnglishProductCategoryName, data.SalesTerritoryRegion, data.CalendarYear);

                });

            });
            countryGrid.on('detailCollapse', function (e, $detailWrapper, CountryId) {
                $detailWrapper.find('table').grid('destroy', true, true);
                document.getElementById('stateProvGrid').style.visibility = "hidden";

                stateProvGrid('destroy', true, true);
            });

            function loadGrid(EnglishProductCategoryName, SalesTerritoryRegion, CalendarYear) {
                stateProvGrid = $('#stateProvGrid').grid({
                    primaryKey: 'StateProvinceCode',
                    params: { SalesTerritoryRegion: SalesTerritoryRegion, CalendarYear: CalendarYear, EnglishProductCategoryName: EnglishProductCategoryName },

                    dataSource: 'http://localhost:51604/api/Sales/GetTerritorySalesByRegion',
                    autoLoad: false,
                    columns: [
                        { field: 'ProductSubCategoryKey', hidden: true },
                        { field: 'EnglishProductSubcategoryName', title: 'Sub-Category' },
                        { field: 'StateProvinceCode', hidden: true },
                        { field: 'StateProvinceName', title: 'State Province' },
                        { field: 'CalendarQuarter', title: 'Quarter' },
                        { field: 'Total_Sales', title: 'Total Sales' },
                        { field: 'Total_cost', title: 'Total Cost' },
                        { field: 'Total_Margin', title: 'Total Margin' }
                    ],
                    pager: { limit: 5 }
                });

            }

        });

        <div class="row" style="margin-top: 10px">
            <div class="col-xs-12">
                <table id="countryGrid" data-ui-library="bootstrap"></table>
                <table id="stateProvGrid" style="visibility:hidden" data-ui-library="bootstrap"></table>

            </div>
        </div>

`