Question

I am thinking of using Kendo UI’s Grid.

However, I am a bit unsure about it’s flexibility and customization.
What I really need is in-line editing, but at the same time I want complete control over this.
For example, we have developed a custom autocomplete (using jquery and javascript). And would like to use this custom-autocomplete in Kendo UI’s Grid.
I do not know whether anyone has already used this approach as I cannot find this level of customization in Kendo UI.

Thank you.

Joseph.

Answer 1

It is possible to specify custom editors for each individual field when implementing a kendo grid with inline editing. It can for example be done in using this kind of configuration:

                columns: [
                    { field:"ProductName",title:"Product Name" },
                    { field: "Category", width: "150px", editor: categoryDropDownEditor },
                    { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "150px" },
                    { command: "destroy", title: " ", width: "110px" }],
                editable: true

where the code for categoryDropDownEditor looks like this:

function categoryDropDownEditor(container, options) {
                    $('<input data-text-field="CategoryName" data-value-field="CategoryName" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: {
                                type: "odata",
                                transport: {
                                    read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
                                }
                            }
                        });
                }

What happens here is that the categoryDropDownEditor function creates the acutal markup for the editor, for that specific field. In your case, the only thing left to do would be to implement a AutoComplete widget instead of a dropdownlist. This example is grabbed from kendo UI’s demo page

I hope answers your question!