Custom Editors with Kendo Grid（自定义列的编辑控件）

转自：http://blog.falafel.com/custom-editors-with-kendo-grid/
The Kendo UI Grid makes it easy to display and edit your data in a tabular format.  By default, the grid will use a TextBox for string and numeric data columns and a DropDownList for editing columns with a list of options.  What if you want to use a different editor type?  I’ll demonstrate two examples of using a custom editor for a grid column: MultiSelect and NumericTextBox.

Custom MultiSelect Editor

There are a few steps to use a MultiSelect as a column editor.  The first is to make sure your data is formatted correctly.  Looking at this sample DataSource, we will use a MultiSelect editor for our “countries” property.  If you specify a schema, notice how I do NOT give a type for countries because there is no “array” type and we don’t want Kendo to try to parse our array into a different format.  We want to leave it how it is.

dataSource: new kendo.data.DataSource({

    data: [{

        id: 1,

        product: 'X002',

        countries: ['Mexico', 'Canada'],

        price: 0.98

    }, {

        id: 2,

        product: 'X036',

        countries: ['United States'],

        price: 2.96

    }, {

        id: 3,

        product: 'X098',

        countries: [],

        price: 45.90

    }],

    schema: {

        model: {

            id: 'id',

            fields: {

                'id': { type: 'number' },

                'product': { type: 'string'},

                'countries': {},

                'price': { type: 'number' }

            }

        }

    }

})

Now we will set up our MultiSelect editor function.  You can specify this within the columns.editor property, or if you plan to use it elsewhere, write it as a separate function.  In this example, we are creating a kendoMultiSelect and appending it to the container object which is a parameter of the editor.  Notice how I set the dataSource to “options.values.”  This is an array that we will specify in the columns attributes.

var multiSelectEditor = function (container, options) {

    $('<input data-bind="value:' + options.field + '"/>')

        .appendTo(container)

        .kendoMultiSelect({

           suggest: true,

           dataSource: options.values

    });

};

Next, let’s set up our Grid Columns.  In the abbreviated example below, you will see that we are using our multiSelectEditor function as the editor.  The “values” property isn’t part of the Kendo columns object, but since JavaScript is dynamic, we can add our own property here to pass along the possible values for the editor.  Here I have vm.countries specified which you will see in the full code example that it is just an array of country name strings.  We will look at the template next.

columns: [{

    field: 'countries',

    editor: multiSelectEditor, // function that generates the multiSelect control

    values: vm.countries, // custom property with array of values

    template: multiSelectArrayToString // template: how to display text in grid

}]

In the code example above, I provide a template called multiSelectArrayToString.  Because our column data is an array, we need to provide a template to display the array correctly.  Here we are just doing a .join() to turn our array into a string.

var multiSelectArrayToString = function (item) {

    return item.countries.join(', ');

};

We now have all the pieces we need to display and edit an array as a MultiSelect editor in the grid.

Custom NumericTextBox Editor

Now let’s look at using a NumericTextBox editor instead of a regular TextBox.  This is a bit more straightforward than a MultiSelect, but we’ll follow similar steps.  First, our numeric editor:

var numericEditor = function (container, options) {

    $('<input data-bind="value:' + options.field + '"/>')

        .appendTo(container)

        .kendoNumericTextBox({

          decimals: 2,

          min: 0,

          format: 'c2'

    });

};

We will be editing “price” so the format will be “c2″ to show currency with two decimal places.  And finally, we will specify the editor and a format in the columns definition:

columns: [{

    field: 'price',

    editor: numericEditor,

    format: '{0:c}'

}]

Check out the full code on JSFiddle:

运行效果：

[html]

[html] view plain copy

1. <div id="main">  
2.     <div id="grid" data-bind="source: dataSource"></div>  
3. </div>  

[resources]

[html] view plain copy

1. Following resources are loaded into result:  
2. kendo.common.min.css  
3. kendo.default.min.css  
4. kendo.all.min.js  

[css]

[html] view plain copy

1. 无  

[javascript]

[html] view plain copy

1. (function () {  
2.   
3.     var multiSelectEditor = function (container, options) {  
4.         $('<input data-bind="value:' + options.field + '"/>')  
5.             .appendTo(container)  
6.             .kendoMultiSelect({  
7.             suggest: true,  
8.             dataSource: options.values  
9.         });  
10.     };  
11.   
12.     var numericEditor = function (container, options) {  
13.         $('<input data-bind="value:' + options.field + '"/>')  
14.             .appendTo(container)  
15.             .kendoNumericTextBox({  
16.             decimals: 2,  
17.             min: 0,  
18.             format: 'c2'  
19.         });  
20.     };  
21.   
22.     var multiSelectArrayToString = function (item) {  
23.         return item.countries.join(', ');  
24.     };  
25.   
26.     var vm = kendo.observable({  
27.         countries: ['Canada', 'Mexico', 'United States'],  
28.         dataSource: new kendo.data.DataSource({  
29.             data: [{  
30.                 id: 1,  
31.                 product: 'X002',  
32.                 countries: ['Mexico', 'Canada'],  
33.                 price: 0.98  
34.             }, {  
35.                 id: 2,  
36.                 product: 'X036',  
37.                 countries: ['United States'],  
38.                 price: 2.96  
39.             }, {  
40.                 id: 3,  
41.                 product: 'X098',  
42.                 countries: [],  
43.                 price: 45.90  
44.             }, ],  
45.             schema: {  
46.                 model: {  
47.                     id: 'id',  
48.                     fields: {  
49.                         'id': {  
50.                             type: 'number'  
51.                         },  
52.                             'product': {  
53.                             type: 'string'  
54.                         },  
55.                             'countries': {},  
56.                             'price': {  
57.                             type: 'number'  
58.                         }  
59.                     }  
60.                 }  
61.             }  
62.         }),  
63.     });  
64.   
65.     $('#grid').kendoGrid({  
66.         columns: [{  
67.             command: 'edit',  
68.             width: '120px',  
69.         }, {  
70.             field: 'product'  
71.         }, {  
72.             field: 'countries',  
73.             editor: multiSelectEditor, // function that generates the multiSelect control  
74.             values: vm.countries, // custom property with array of values  
75.             template: multiSelectArrayToString // template: how to display text in grid  
76.         }, {  
77.             field: 'price',  
78.             editor: numericEditor,  
79.             format: '{0:c}'  
80.         }],  
81.         editable: 'inline',  
82.   
83.     });  
84.   
85.     kendo.bind('#main', vm);  
86.   
87. })()