Databases
StackOverflow2013
Postsdbo
POKendoUI Grid custom filter menu breaks after first filtering or clear
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKendoUI Grid custom filter menu breaks after first filtering or clear
    primarykey
    data
    text
    <p>I'm using <code>KendoUI Grid</code> (web framework). The is being filled from local <code>json</code> data which is being loaded from <code>ASP.NET MVC</code> <code>ViewBag</code> at page load. I'm declaring datasource in seperate variable before the grid is initialized and filled with data from datasoruce. I'm experiencing a problem where filter menu breaks after first filtering or clearing (look at the image). Every next time I click the filter or clear button, it hides more controls until there are just the two buttons left. The odd thing is that there are no errors reported in console. I've been working on this problem for more than one week but I can't seem to find any information about it, nor am I getting any closer to possible solution.</p> <p><em>I know that non-english code can be hard to understand but I'll be happy to translate and explain what it means!</em></p> <p><img src="https://i.stack.imgur.com/yXfWk.png" alt="Filter menu error"></p> <p><em>Unfortunately I can't provide a link to server where this page is running as it requires login and the page is already release-deployed which means it wouldn't be a good idea to put credentials in public. Although I've been struggling to put together a working fiddle, I haven't been able to make it work.</em></p> <p>I'm using this code:</p> <pre><code>root.seznamDataSource = new kendo.data.DataSource({ data: zahteveData, pageSize: 15, schema: { model: { fields: { IdZahteve: { type: "number" }, Naslov: { type: "string" }, Datum: { type: "date" }, Status: { type: "string" }, Narocnik: { type: "string" }, PoslovniPartner: { type: "string" } } } }, change: function(e) { var urejeniItemi; if ((e.sender._sort != null) &amp;&amp; (e.sender._sort[0] != null) &amp;&amp; e.sender._sort[0].field === "Status") { e.preventDefault(); urejeniItemi = []; return $.getJSON("/Zahteve/StatusiData", function(data) { var item, status, _i, _j, _len, _len1, _ref; for (_i = 0, _len = data.length; _i &lt; _len; _i++) { status = data[_i]; _ref = e.items; for (_j = 0, _len1 = _ref.length; _j &lt; _len1; _j++) { item = _ref[_j]; if (item.Status.trim().toLowerCase() === status.Opis.trim().toLowerCase()) { urejeniItemi.push(item); } } } if (urejeniItemi.length !== e.items.length) { console.log("napaka, niso urejeni vsi itemi"); return; } if (e.sender._sort[0].dir === "desc") { urejeniItemi.reverse(); return e.items = urejeniItemi; } }); } } }); </code></pre> <p>I've registered change event listener so I can apply specific sorting. After the datasource is initialized, I start the initialization of <code>KendoUI Grid</code>:</p> <pre><code>$("#odprte-zahteve").kendoGrid({ dataSource: root.seznamDataSource, columns: [ { template: '&lt;span data-idZahteve="#=IdZahteve#"&gt;&lt;/span&gt;#=Naslov#', field: "Naslov", title: "Naslov zahteve", attributes: { style: "min-width: 110px!importnat; text-indent: 10px;" }, filterable: { ui: naslovFilter } }, { field: "Datum", title: "Datum zahteve", format: "{0: dddd, dd. MMMM 'yy}", attributes: { style: "min-width: 105px!importnat;" }, filterable: { extra: true, ui: function(element) { element.kendoDatePicker({ depth: "month", max: new Date(), format: "dddd,d. MMMM yyyy", ARIATemplate: "#=datumZImenom(data.current)#", footer: "Danes - #=datumZImenom(data)#" }); } } }, { field: "Status", title: "Status", attributes: { style: "min-width: 60px!importnat;" }, filterable: { ui: statusFilter } }, { field: "Narocnik", title: "Naročnik", attributes: { style: "min-width: 80px!importnat;" }, filterable: { ui: narocnikFilter } }, { field: "PoslovniPartner", title: "Poslovni partner", attributes: { style: "min-width: 100px!importnat;" }, filterable: false, sortable: false } ], change: function(e) { return urediZahtevo(getIzbranaZahteva(this)); }, dataBound: prilagodiSirino, selectable: true, sortable: true, pageable: { buttonCount: 5, pageSizes: [15, 30, 45], messages: { display: "Prikazujem {0} - {1} od {2} odprtih zahtev", empty: "Ni podatkov", itemsPerPage: "zahtev na stran", next: "Pojdi na naslednjo stran", first: "Pojdi na prvo stran", previous: "Pojdi na prejšnjo stran", last: "Pojdi na zadnjo stran", refresh: "Osvežite tabelo" } }, filterable: { extra: false, operators: { string: { eq: "Je enak", startswith: "Se začne z", contains: "Vsebuje" }, date: { lt: "Pred datumom", gt: "Po datumu", eq: "Je enak datumu" } }, messages: { and: "in", or: "ali", filter: "Filtriraj", clear: "Počisti", info: "Filtriraj po: ", selectValue: "Izberite kategorijo" } } }); </code></pre> <p>The filter ui functions are just creating basic filter menus</p> <pre><code>naslovFilter = function(element) { element.kendoAutoComplete({ dataSource: zahteveData, dataTextField: "Naslov" }); }; datumFilter = function(element) { element.kendoDatePicker({ depth: "month", max: new Date(), format: "dddd,d. MMMM yyyy", ARIATemplate: "#=datumZImenom(data.current)#", footer: "Danes - #=datumZImenom(data)#" }); }; statusFilter = function(element) { var item, status, statusi, _i, _len; statusi = []; for (_i = 0, _len = zahteveData.length; _i &lt; _len; _i++) { item = zahteveData[_i]; status = item.Status.trim(); if (!statusi.contains(status)) { statusi.push(status); } } element.kendoDropDownList({ dataSource: statusi, optionLabel: "Izberite status" }); }; narocnikFilter = function(element) { element.kendoDropDownList({ dataSource: narocniki, optionLabel: "Izberite naročnika" }); }; </code></pre> <hr> <p><strong>Edit:</strong> I have started to work on this project again and the manager decided to completely redesign it, so now I'm using <a href="http://getbootstrap.com/" rel="nofollow noreferrer">Bootstrap</a> with <a href="https://angularjs.org/" rel="nofollow noreferrer">Angular.js</a>, which removes the need to use KendoUI.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMarko Grešak
    1. USMarko Grešak
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POKendoUI Grid custom filter menu breaks after first filtering or clear
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POKendoUI Grid custom filter menu breaks after first filtering or clear
      1. USMarko Grešak
      1. VTBountyStart
    3. VO
      singulars
      1. POKendoUI Grid custom filter menu breaks after first filtering or clear
      1. This table or related slice is empty.
      1. VTUpMod
    1. COPreparing a live demo (on jsbin.com or jsfiddle.net) would help us track the problem.
      singulars
      1. POKendoUI Grid custom filter menu breaks after first filtering or clear
      1. USAtanas Korchev
    2. COif you can create a test page which just reads then that link will help, as in fiddle you will have to bind data-source, and that will be insecure again. although if you think that is not possible Please create a working fiddle as @AtanasKorchev have said.
      singulars
      1. POKendoUI Grid custom filter menu breaks after first filtering or clear
      1. USMarmiK
    3. COI'm working on this but currently I'm unable to provide a test user to login into a webpage.
      singulars
      1. POKendoUI Grid custom filter menu breaks after first filtering or clear
      1. USMarko Grešak
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload