Filtro Kendo Grid per utilizzare la casella combinata con column.values ​​anziché con l'elenco a discesa

Question

Sto cercando di ottenere la griglia di Kendo per mostrare un filtro utilizzando una casella combinata anziché un elenco a discesa quando viene utilizzato con i valori. Ciò che intendo è, sulla matrice delle colonne della griglia, a ciascuna colonna può essere assegnato un elenco di valori (oggetti con proprietà di testo e valore) per ogni possibile voce nel database, quindi piuttosto che mostrare un codice, mostra un nome o un testo riconoscibile invece del codice. Il problema è che ogni volta che si specificano valori rispetto alla colonna, il filtro ritorna a un elenco fisso di criteri e un elenco a discesa, che non desidero.

Vedere un example of what I mean here. Quello che mi piacerebbe vedere è il filtro (nella colonna Categoria) per mostrare una casella combinata piuttosto che un elenco a discesa, ma utilizzare comunque i valori rispetto ai codici nella tabella per mostrare i dati nella griglia, ma non sembra funzionare.

Answer 1

Come dici che non funziona con la proprietà values, così uno approccio sarebbe quello di impostare un modello personalizzato di fila e utilizzare una funzione di ricerca sulle identità di categoria e sostituirlo con il relativo testo:

var categories = [{ 
    "value": 1, 
    "text": "Beverages" 
}, { 
    "value": 2, 
    "text": "Condiments" 
}, { 
    "value": 3, 
    "text": "Confections" 
}, { 
    "value": 4, 
    "text": "Dairy Products" 
}, { 
    "value": 5, 
    "text": "Grains/Cereals" 
}, { 
    "value": 6, 
    "text": "Meat/Poultry" 
}, { 
    "value": 7, 
    "text": "Produce" 
}, { 
    "value": 8, 
    "text": "Seafood" 
}]; 

function getCategory(catID) { 
    return $.grep(categories, function(n, i) { 
    return n.value === catID; 
    })[0].text; 
} 

$(document).ready(function() { 
    var dataSource = new kendo.data.DataSource({ 
    pageSize: 20, 
    data: products, 
    autoSync: true, 
    schema: { 
     model: { 
     id: "ProductID", 
     fields: { 
      ProductID: { 
      editable: false, 
      nullable: true 
      }, 
      ProductName: { 
      validation: { 
       required: true 
      } 
      }, 
      CategoryID: { 
      field: "CategoryID", 
      type: "number", 
      defaultValue: 1 
      }, 
      UnitPrice: { 
      type: "number", 
      validation: { 
       required: true, 
       min: 1 
      } 
      } 
     } 
     } 
    } 
    }); 

    var rowTemplateString = '<tr data-uid="#: uid #">' + 
    '<td>#: ProductName #</td>' + 
    '<td>#: getCategory(CategoryID) #</td>' + 
    '<td>#: UnitPrice #</td>' + '<td></td>' + 
    '</tr>'; 

    var altRowTemplateString = rowTemplateString.replace('tr class="', 'tr class="k-alt '); 

    var commonSettings = { 
    dataSource: dataSource, 
    filterable: true, 
    groupable: true, 
    pageable: true, 
    height: 430, 
    toolbar: ["create"], 
    columns: [{ 
     field: "ProductName", 
     title: "Product Name" 
     }, 
     { 
     field: "CategoryID", 
     width: "150px", 
     //values: categories, 
     dataTextField: "text", 
     dataValueField: "value", 
     dataSource: categories, 
     filterable: { 
      ui: function(element) { 
      element.kendoComboBox({ 
       dataTextField: "text", 
       dataValueField: "value", 
       dataSource: categories 
      }); 
      } 
     }, 
     title: "Category" 
     }, 
     { 
     field: "UnitPrice", 
     title: "Unit Price", 
     format: "{0:c}", 
     width: "150px" 
     }, 
     { 
     command: "destroy", 
     title: " ", 
     width: "110px" 
     } 
    ], 
    editable: true 
    }; 

    $("#grid").kendoGrid($.extend({ 
    rowTemplate: rowTemplateString, 
    altRowTemplate: altRowTemplateString 
    }, commonSettings)); 

}); 

Nota: in questa demo non ho provato a gestire il modello per la colonna Elimina. L'ho appena lasciato vuoto.

Ecco il Dojo http://dojo.telerik.com/oFulu

Answer 2

provare questo, secondo la vostra demo here

</script> 
    <div id="example" class="k-content"> 
     <div id="grid"></div> 

     <script>    
      var categories = [{ 
       "value": 1, 
       "text": "Beverages" 
      },{ 
       "value": 2, 
       "text": "Condiments" 
      },{ 
       "value": 3, 
       "text": "Confections" 
      },{ 
       "value": 4, 
       "text": "Dairy Products" 
      },{ 
       "value": 5, 
       "text": "Grains/Cereals" 
      },{ 
       "value": 6, 
       "text": "Meat/Poultry" 
      },{ 
       "value": 7, 
       "text": "Produce" 
      },{ 
       "value": 8, 
       "text": "Seafood" 
      }]; 

      $(document).ready(function() { 
       var dataSource = new kendo.data.DataSource({ 
        pageSize: 20, 
        data: products, 
        autoSync: true, 
        schema: { 
         model: { 
          id: "ProductID", 
          fields: { 
           ProductID: { editable: false, nullable: true }, 
           ProductName: { validation: { required: true} }, 
           CategoryID: { field: "CategoryID", type: "number", defaultValue: 1 }, 
           UnitPrice: { type: "number", validation: { required: true, min: 1} } 
          } 
         } 
        } 
       }); 

       $("#grid").kendoGrid({ 
        dataSource: dataSource, 
        filterable: true, 
        groupable: true, 
        pageable: true, 
        height: 430, 
        toolbar: ["create"], 
        columns: [ 
         { field: "ProductName", title: "Product Name" }, 
         { 
          field: "CategoryID", 
          width: "150px", 
          values: categories, 
          editor:function(container,options) 
          { 
           $('<input name-"' + options.fields +'"/>'). 
           appendTo(container).kendoComboBox({ 
           autoBind:false, 
           dataTextField:"text", 
           dataValueFiled:"value", 
           dataSource:new kendo.data.DataSource({ 
            schema:{ 
            model:{ 
             id:"value", 
             fields:{ 
             text:{}, 
             value:{} 
             } 
            } 
            }, 
            data:categories 
           }) 
           }) 
          }, 
          title: "Category" 
         }, 
         { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "150px" }, 
         { command: "destroy", title: " ", width: "110px"}], 
        editable: true 
       }); 
      }); 
     </script>