title: Using Kendo Grid with knockoutjs row template make filtering impossible
body: <p>I'm currently building an application using knockoutjs for the MVVM pattern, and Kendo Web for the controls. 
  I have somme issues with filtering/grouping the data in the kendo grid.</p>
  
  <p>I need to have highly customizable rows, and so I choose to use row template according to this sample :</p>
  
  <p><a href="http://rniemeyer.github.io/knockout-kendo/web/Grid.html" rel="nofollow noreferrer">http://rniemeyer.github.io/knockout-kendo/web/Grid.html</a> </p>
  
  <p>I also need to have a two way binding with the grid, cause I need to add/remove/update items.</p>
  
  <p>The grid :</p>
  
  <pre><code>&lt;div data-bind="kendoGrid: {    
      data: LienActionIndicateurPourFicheCollection, 
      widget: indicateurWidget,
      rowTemplate: 'indicateurRowTmpl', 
      useKOTemplates: true,
      dataSource : {
          schema: {
              model: {
                  fields: {
                      Code: { type: 'string' },
                      Titre: { type: 'string' },
                      Note: { type: 'number' }              
                  }
              }
          },
      },
      columns: [            
         { title: '#', width: 30 },
         { field: 'Code', title: 'Code', width: 80 },
         { field: 'Titre', title: 'Titre', width: 150 },
         { field: 'Note', title: 'Note', width: 80 }]
      }"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The row template :</p>
  
  <pre><code>&lt;script id="indicateurRowTmpl" type="text/html"&gt;
      &lt;tr"&gt;
          &lt;td&gt;
              &lt;button data-bind="visible: $root.isInEditMode, click: removeIndicateur"
                      class="common-button delete-button"&gt;&lt;/button&gt;
          &lt;/td&gt;
          &lt;td data-bind='text: Code'&gt;&lt;/td&gt;
          &lt;td data-bind='text: Titre'&gt;&lt;/td&gt;
          &lt;td data-bind='text: Note'&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>When I'm using the grid, it works fine, expect when I use grouping/filtering : it's like the grid is using the observable objet instead of the value to perform the operations.</p>
  
  <p>Example : When I'm grouping on 'Note' integer value : <img src="https://i.stack.imgur.com/FBZJX.png" alt="enter image description here"></p>
  
  <p>To prevent that, I have replaced in columns definition "field: 'Note'" by "field: 'Note()'" : the grouping works fine now, since grid use the integer value instead of a function. </p>
  
  <p>But the filtering remain impossible : the column filter menu has changed from number filter to string filter when I have make the 'Note()' change.
  I suppose it's because the fields entry key 'Note' does not match the columns entry key 'Note()' anymore !</p>
  
  <ul>
  <li>I've tried to replace 'Note' by 'Note()' in fields definition : does not work.</li>
  <li>I've replace Note observable by a non observable variable in my item model : all is working fine, but i'm not enable to edit those values anymore, and I want to.</li>
  </ul>
  
  <p>Thanks for your help !</p>
  
  <p>EDIT : here a jsfiddle reproducting the bug : <a href="http://jsfiddle.net/camlaborde/htq45/1/" rel="nofollow noreferrer">http://jsfiddle.net/camlaborde/htq45/1/</a></p>
  
  <p>EDIT#2 here's the final solution, thanks to sroes : <a href="http://jsfiddle.net/camlaborde/htq45/7/" rel="nofollow noreferrer">http://jsfiddle.net/camlaborde/htq45/7/</a> </p>
  
  <p>EDIT#3 final solution plus inline grid edition : <a href="http://jsfiddle.net/camlaborde/8aR8T/4/" rel="nofollow noreferrer">http://jsfiddle.net/camlaborde/8aR8T/4/</a></p>