Problems with grid when it is inside a tab

[Stef BalabanParticipant]

Hello,
In my ASP.NET CORE MVC application I have a problem with the jqxGrid element.

After updating to 7.2.0 version my existing application broke down. The case is I have a tab element, with three tabs, and in each tab I have a grid. This worked fine until the latest update, after the update the grid in the second (index 1) tab stopped working. It would fall into a loading loop.

After some tinkering I found that this was caused because some conflict between the init-tab-content function from the tab, which called a switch statement with the tab index as a switch parameter, and a event listener, tab.on(‘selected’, “another switch function”), in the .ready function of the javascript file.
I rewrote the function in the .ready part of the javascript file so it doesn’t conlfict with the init-tab-content from tab and the loading loop was fixed, but a new problem emerged. Now in the grid initialization function, where I set the dataAdapter to the grid, set what field should be filterable, set filter items to filter lists and other grid logic, I get the following error when the program reaches the code line responsible for setting the filter option with filter items:

TypeError: Cannot read property 'label' of undefined
    at c.<computed>._updatelistfilters (jqxgrid.filter.js:8)
    at b.jqx.dataview.dataview.update (jqxgrid.js:8)
    at l (jqxgrid.js:8)
    at b.jqx.dataview.databind (jqxgrid.js:8)
    at c.<computed>.databind (jqxgrid.js:8)
    at c.<computed>.updatebounddata (jqxgrid.js:8)
    at Object.b.jqx.invoke (VM383 jqxcore.js:15)
    at Object.b.jqx.jqxWidgetProxy (VM383 jqxcore.js:15)
    at HTMLDivElement.<anonymous> (VM383 jqxcore.js:15)
    at Function.each (jquery.js:365)

(it’s thrown in gray color in the devconsole)
After getting that error the grid initializor, javascript, function stop working.
Now I found a workaround that too, which is by setting the filter items to the filter option in the .ready function, and it works but now I get the following error:

jqxgrid.filter.js:8 Uncaught TypeError: Cannot read property 'label' of undefined
    at c.<computed>._updatelistfilters (jqxgrid.filter.js:8)
    at c.<computed>._setcolumnproperty (jqxgrid.js:8)
    at c.<computed>.setcolumnproperty (jqxgrid.js:8)
    at Object.b.jqx.invoke (VM481 jqxcore.js:15)
    at Object.b.jqx.jqxWidgetProxy (VM481 jqxcore.js:15)
    at HTMLDivElement.<anonymous> (VM481 jqxcore.js:15)
    at Function.each (jquery.js:365)
    at jQuery.fn.init.each (jquery.js:137)
    at jQuery.fn.init.b.fn.<computed> [as jqxGrid] (VM481 jqxcore.js:15)
    at HTMLDocument.ready (index.js:827)

(it’s thrown in red color in devconsole)

Here is the code:
1. HTML tab and grids:

<jqx-tabs width="99%" id="tabIgrice" height="99%" keyboard-navigation="false" init-tab-content=@initTabs>
            @* Tab unosa zapisa*@
            <jqx-tab-panel>
                <jqx-tab-panel-header>Unos zapisa</jqx-tab-panel-header>
                <jqx-tab-panel-body>
                    <jqx-menu height="28" id="UnosZapisaMeni">
                        <jqx-menu-items>
                            <jqx-menu-item id="Unesi"><a href="#" onclick="otvoriProzorUnosa();" id="UnesiDugme"><i class="fas fa-plus"></i>  Unesi zapis</a></jqx-menu-item>
                        </jqx-menu-items>
                    </jqx-menu>
                    <div style="height: calc(100% - 100px); width:100%; overflow: hidden;padding: 0px;box-sizing: border-box;margin: 0;">
                        <jqx-grid id="gridZapIgrica" name="gridZapIgrica" width="100%" height="100%" auto-save-state="true" auto-load-state="true" columns-resize="true" columns-auto-resize="true" localization="{{localization}}" show-filter-row="true" sortable="true" filterable="true" pageable="false" editable="false" selection-mode="singlerow">
                            <jqx-grid-columns>
                                <jqx-grid-column datafield="id" hidden="true"></jqx-grid-column>
                                <jqx-grid-column datafield="sklId" min-width="285" filter-type="list" editable="false" text="Šifra"></jqx-grid-column>
                                <jqx-grid-column datafield="osIme" max-width="400" editable="false" text="Ime osnovnog sredstva"></jqx-grid-column>
                                <jqx-grid-column datafield="osBroj" max-width="150" editable="false" text="Inventurni broj" filterable="false"></jqx-grid-column>
                                <jqx-grid-column datafield="stariBrojac" max-width="95" text="Stari brojač" filterable="false" editable="false"></jqx-grid-column>
                                <jqx-grid-column datafield="noviBrojac" max-width="95" text="Novi brojač" filterable="false"></jqx-grid-column>
                                <jqx-grid-column datafield="total" max-width="120" text="Iznos pazara" filterable="false" cells-format="c2"></jqx-grid-column>
                            </jqx-grid-columns>
                        </jqx-grid>
                    </div>
                </jqx-tab-panel-body>
            </jqx-tab-panel>
            @* Tab igrica*@
            <jqx-tab-panel>
                <jqx-tab-panel-header>Aparati</jqx-tab-panel-header>
                <jqx-tab-panel-body>
                    <div style="height: calc(100% - 100px); width:100%; overflow: hidden;padding: 0px;box-sizing: border-box;margin: 0;">
                        <jqx-menu height="28" id="KorisniciMenu">
                            <jqx-menu-items>
                                <jqx-menu-item id="IzvjestajAparata" hidden="hidden"><a href="#" onclick="izvjestajAparata();" id="IzvjestajAparataDugme"><i class="fas fa-print"></i>  Izvještaj aparata</a></jqx-menu-item>
                                <jqx-menu-item id="Prijavi" hidden="hidden"><a href="#" onclick="otvoriProzorPrijave();" id="PrijaviDugme"><i class="fas fa-wrench"></i>  Prijavi kvar</a></jqx-menu-item>
                                <jqx-menu-item id="Rijesi" hidden="hidden"><a href="#" onclick="otvoriProzorRjesenja();" id="RijesiDugme"><i class="fas fa-check"></i>  Riješi kvar</a></jqx-menu-item>
                            </jqx-menu-items>
                        </jqx-menu>
                        <jqx-grid id="gridIgrice" name="gridIgrice" width="100%" height="100%" auto-save-state="true" auto-load-state="true" columns-resize="true" columns-auto-resize="true" localization="{{localization}}" show-filter-row="true" sortable="true" filterable="true" pageable="false" editable="false" selection-mode="singlerow">
                            <jqx-grid-columns>
                                <jqx-grid-column datafield="id" hidden="true"></jqx-grid-column>
                                <jqx-grid-column datafield="sklId" min-width="285" filter-type="list" editable="false" text="Šifra"></jqx-grid-column>
                                <jqx-grid-column datafield="osIme" editable="false" text="Ime osnovnog sredstva"></jqx-grid-column>
                                <jqx-grid-column datafield="osBroj" editable="false" max-width="150" text="Inventurni broj"></jqx-grid-column>
                                <jqx-grid-column datafield="radi" min-width="100" editable="false" text="Stanje aparata" filter-items="true" filter-type="list"></jqx-grid-column>
                                <jqx-grid-column datafield="brojac" min-width="100" editable="false" text="Brojač"></jqx-grid-column>
                                <jqx-grid-column datafield="datumZadnjegZapisa" max-width="160" editable="false" text="Datum zadnjeg zapisa" cells-format="dd.MM.yyyy" filter-type="range"></jqx-grid-column>
                                <jqx-grid-column datafield="iznosZadnjegZapisa" column-group="pazar" max-width="120" editable="false" text="Zadnjeg zapisa" cells-format="c2"></jqx-grid-column>
                                <jqx-grid-column datafield="iznosTridesetDana" column-group="pazar" max-width="120" editable="false" text="Zadnjih 30 dana" cells-format="c2"></jqx-grid-column>
                                <jqx-grid-column datafield="iznosRadnaGod" column-group="pazar" max-width="120" editable="false" text="Tekuće godine" cells-format="c2"></jqx-grid-column>
                                <jqx-grid-column datafield="iznosUkupni" column-group="pazar" max-width="120" editable="false" text="Ukupni" cells-format="c2"></jqx-grid-column>
                                <jqx-grid-column-groups>
                                    <jqx-grid-column-group name="pazar" text="Pazar"></jqx-grid-column-group>
                                </jqx-grid-column-groups>
                            </jqx-grid-columns>
                        </jqx-grid>
                    </div>
                </jqx-tab-panel-body>
            </jqx-tab-panel>
...

2. init-tab-content function

var initTabIgrice = function (tab) {
            switch (tab) {
            case 0:
                    initTabUnosZap(@ViewBag.UserId);
                break;
            case 1:
                    initTabIgrica(@ViewBag.SvaSkladista.ToString().ToLower());
                break;
            case 2:
                    initTabZapisa(@ViewBag.SvaSkladista.ToString().ToLower()); 
                break;
    }

3 .ready function for tab.on(‘selected’) event listener function which caused the initial problem and the workaround:

$('#tabIgrice').on('selected', function (event) {
        var selectedTab = event.args.item;
        switch (selectedTab) {
            case 0:
                if (inicijalizovan) { // This bool is the workaround  for the init-tab-content conflict. After the init-tab-content goes for the first time it sets the bool to true
                    $('#gridZapIgrica').jqxGrid('clearfilters');
                }                
                break;
            case 1:
                ocistiGridIMeni();
                
                break;
            case 2:
                ocistiGridStavkiZapisa();
        }
    });

4. grid initialization function

function initTabIgrica(svaSkladista) {

    $("#gridIgrice").jqxGrid({
        source: dataAdapterGridIgrice
    });
    //U slučaju da nam je ViewBag.SklId == 0, korisnik ima pravo na sva skladišta, onda dodamo na prvu poziciju stavku "Sva skladišta" pa da bi u enginu mogli povući zapise za sva skladišta
    for (var i = 0, len = mpoSkls.length; i < len; i++) {
        mpoSklsZaIgrice[i] = mpoSkls[i].slice();
    }
    if (svaSkladista) {
        mpoSklsZaIgrice.unshift('0~Sva skladišta');
    }

    $('#gridIgrice').jqxGrid('setcolumnproperty', 'iznosZadnjegZapisa', 'filterable', false);
    $('#gridIgrice').jqxGrid('setcolumnproperty', 'iznosTridesetDana', 'filterable', false);
    $('#gridIgrice').jqxGrid('setcolumnproperty', 'iznosRadnaGod', 'filterable', false);
    $('#gridIgrice').jqxGrid('setcolumnproperty', 'iznosUkupni', 'filterable', false);
    $('#gridIgrice').jqxGrid('setcolumnproperty', 'brojac', 'filterable', false);    
    $("#gridIgrice").on('rowselect', function selectIgriceEvent(event) {
        pripremaGridaIgrica(event);
    });
    if (racunovodja) {
        dugmeIzvjestajAparata.show();
    }    
    $("#gridIgrice").jqxGrid('setcolumnproperty', 'sklId', 'filteritems', mpoSklsZaIgrice);
}

5. the filter item list for the filter option that i set in the .ready:

$("#gridIgrice").jqxGrid('setcolumnproperty', 'radi', 'filteritems', ['Ispravan', 'Pokvaren']);

Thanks in advance.

[Stef BalabanParticipant]

I fixed the problem after some more tinkering.
I had two problems:
1. I called updatebounddata on the second grid before initializing it. ocistiGridIMeni(); this was the culprit.
2. I didn’t use filter-items=”true” in the HTML <jqx-grid-column datafield="sklId" min-width="285" filter-type="list" editable="false" text="Šifra"></jqx-grid-column>

[Author]

Posts