Kendo Grid - Filter Row as kendoDropDown

问题:

After posting question as answer here, I correct this by creating new question.

I'm trying to create row filter in kendo grid to appear as DropDown of possible values in that column. So far, closest I got is Pluc's example in linked question. Still it doesn't work as intended.

In columns of kendoGrid I defined a field like this:

{ 
    field: "Herkunft", 
    title: "Herkunft", 
    width: "120px", 
    type: "string", 
    filterable: 
    { 
        cell: 
        { 
            showOperators: false, 
            template: herkunftDropDownEditor
        }
    }  
 }

This is herkunftDropDownEditor function:

function herkunftDropDownEditor(element) {
     element.kendoDropDownList({
          autoBind: false,
          optionLabel: "--Select Value--",
          dataTextField: "Value",
          dataValueField: "Value",
          valuePrimitive: true,
          dataSource: herkunftDataSource
          });
     }

And datasource for the dropdownlist:

var herkunftDataSource = new kendo.data.DataSource({
    data: [
    { Value: "Choice One" },
    { Value: "Choice Two" }
    ]
 });

It doesn't work. The JS error I get in Chrome is on the line:

element.kendoDropDownList({

error says: "Uncaught TypeError: undefined is not a function". For some reason it can't use kendoDropDownList function.

What I also find confusing is the way Telerik use template in their example: template: "#=FirstName# #=LastName#" The way they do it is connecting the function to ui instead of template. I tried this approach also, calling ui: herkunftDropDownEditor instead of template: herkunftDropDownEditor. This way there is no error, but it doesn't work. The search field is still textbox. When I debug in Chrome, I see that argument element in the function is not even available.

No clue what I'm doing wrong.

回答1:

I updated my answer in the link post.

Starting from 2014 Q2 SP1, the template function now receives an object containing "datasource" and "element".

Change

element.kendoDropDownList({

to

element.element.kendoDropDownList({

回答2:

It is probably problem with scope.

Is it MVVM app? Is Grid initialize from markup by declarative code? If so, you can stop compiling by debugger like this:

<div
data-role="grid"
data-filterable='{mode: "row"}
data-columns="[
              { 
                field: 'Herkunft', 
                filterable: {
                    cell: {
                            template: kendo.template($('#template').html())}
                             }

               }]
></div>
<script type="text/x-kendo-template" id="template">
    #debugger;#
</script>

Code above stop kendo template compile and you can see actual scope in developer tool.

Maybe you should assign herkunftDropDownEditor function to window object.

window.myAppNameSpace.herkunftDropDownEditor = function(){...};

and in grid call it like this:

filterable: {
          cell: {
             template: myAppNameSpace.herkunftDropDownEditor
                }
           }