title: KendoUI Grid custom filter menu breaks after first filtering or clear
body: <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>