Kendo MVVM Griglia con filtri personalizzati

Sto costruendo una griglia Kendo utilizzando il modello MVVM e voglio 2 filtri personalizzati:Kendo MVVM Griglia con filtri personalizzati

Un filtro griglia generale extra = false e personalizzati operatori
Un filtro colonna personalizzata con una casella combinata

Molto simile a this Kendo Grid demo. Io proprio non riesco a farlo funzionare con il modello MVVM utilizzando data-filterable attributo o filterable ui sulla colonna:

<div data-role="grid" 
    data-filterable="customGridFilter" 
    data-columns="[ 
     { field: 'Id', hidden: 'true' }, 
     { field: 'Name', filterable: '{ ui: customNameFilter }' }, 
     { field: 'Value' } 
    ]" 
    data-bind="source: gridDs"> 
</div>

ho created a JS Fiddle per illustrare quello che sto andando per.

fonte

2015-10-23 dmathisen

Per uno, togliere quei 'nel filtrabile: '{ui: ...}' , dovrebbe essere solo filtrabile: {ui: customerNameFilter}. –

Sembra che tu abbia ragione. Ancora senza fortuna. – dmathisen

funziona [qui] (http://dojo.telerik.com/uwAvU) –

In realtà è appena perso un certo punto, come

data-filterable="customGridFilter" dovrebbe diventare data-filterable="true",
e anche nel dojo kendo che stanno utilizzando jQuery 1.9.1 e il vostro è compatto (EDGE) che causano la problema.

Dopo aver cambiato per jQuery 1.9.1 funziona bene come qui di seguito

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled</title> 
 

 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.all.min.css"> 
 

 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="test"> 
 
    <script> 
 
     var customNameFilter = customNameFilter || null; 
 
    </script> 
 
    <div data-role="grid" data-filterable="true" data-columns="[ 
 
      { field: 'Id', hidden: 'true' }, 
 
      { field: 'Name', filterable: { ui: customNameFilter } }, 
 
      { field: 'Value' } 
 
     ]" data-bind="source: gridDs"></div> 
 
    </div> 
 
    <script> 
 
    $(document).ready(function() { 
 
     customNameFilter = function(e) { 
 
     console.log("test") 
 
     e.kendoComboBox({ 
 
      dataSource: { 
 
      data: [{ 
 
       Id: 1, 
 
       Name: "Test1" 
 
      }, { 
 
       Id: 2, 
 
       Name: "Test2" 
 
      }, { 
 
       Id: 3, 
 
       Name: "Test3" 
 
      }] 
 
      }, 
 
      dataValueField: "Id", 
 
      dataTextField: "Name", 
 
      filter: "contains" 
 
     }); 
 
     }; 
 
     var viewModel = kendo.observable({ 
 
     gridDs: new kendo.data.DataSource({ 
 
      data: [{ 
 
      Id: 1, 
 
      Name: "Test1", 
 
      Value: 3 
 
      }, { 
 
      Id: 2, 
 
      Name: "Test2", 
 
      Value: 5 
 
      }, { 
 
      Id: 3, 
 
      Name: "Test3", 
 
      Value: 2 
 
      }, { 
 
      Id: 4, 
 
      Name: "Test4", 
 
      Value: 7 
 
      }] 
 
     }), 
 
     customGridFilter: { 
 
      extra: false, 
 
      operators: { 
 
      string: { 
 
       contains: "Contains", 
 
       doesnotcontain: "Does not contain", 
 
       eq: "Is equal to", 
 
       neq: "Is not equal to", 
 
       startswith: "Starts with", 
 
       endswith: "Ends with" 
 
      } 
 
      } 
 
     }, 
 

 
     }); 
 

 
     kendo.bind($('#test'), viewModel); 
 
    }); 
 

 
    // this doesn't work 
 
    //var grid = $('#test').data('kendoGrid'); 
 
    //grid.options.filterable = customFilter; 
 
    </script> 
 
</body> 
 

 
</html>

fonte

2015-11-10 00:56:24

Kendo MVVM Griglia con filtri personalizzati

risposta

Problemi correlati