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.
-
Author
-
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.
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>
-
AuthorPosts
You must be logged in to reply to this topic.