KendoUI Grid custom filter menu breaks after first filtering or clear

Question

I'm using KendoUI Grid (web framework). The is being filled from local json data which is being loaded from ASP.NET MVC ViewBag 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.

I know that non-english code can be hard to understand but I'll be happy to translate and explain what it means!

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.

I'm using this 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) 
       && (e.sender._sort[0] != null) 
       && 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 < _len; _i++) {
          status = data[_i];
          _ref = e.items;
          for (_j = 0, _len1 = _ref.length; _j < _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;
        }
      });
    }
  }
});

I've registered change event listener so I can apply specific sorting. After the datasource is initialized, I start the initialization of KendoUI Grid:

$("#odprte-zahteve").kendoGrid({
  dataSource: root.seznamDataSource,
  columns: [
    {
      template: '<span data-idZahteve="#=IdZahteve#"></span>#=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"
    }
  }
});

The filter ui functions are just creating basic filter menus

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 < _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"
    });
};

---

Edit: I have started to work on this project again and the manager decided to completely redesign it, so now I'm using Bootstrap with Angular.js, which removes the need to use KendoUI.

Answer 1

From what I have read, it appears that this is strictly a display issue. It appears that !important is misspelled as !importnat in several places in the code which may mean that the problem is simply a CSS issue. Without a working demo, one cannot be sure, but I would definitely start by correcting this error.