jQWidgets Forums

jQuery UI Widgets Forums Grid Problems with grid when it is inside a tab

This topic contains 1 reply, has 1 voice, and was last updated by  Stef Balaban 5 years, 10 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • Stef Balaban
    Participant

    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 Balaban
    Participant

    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>

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.