Autocomplete in Grid Column (samples for Razor)

[Thomas]

Hi there,

I am relatively new to Kendo UI.  Have to implement an AutoComplete Box in a Kendo Grid Column, but can not find sample codes
appropriate to my needs. 

Are there sample Codes available, using ASP.NET MVC 4 with Razor ?

Many thanks in advance.
Thomas

[Daniel]

Hello Thomas,

When using server binding you could use the column Template method: to add an autocomplete:

columns.Template(@<text>
     @(Html.Kendo().AutoComplete()
             .Name("autoComplete" + item.IDField)
             .BindTo(Data)
        )
</text>);

In Ajax binding you should add the autocomplete in the ClientTemplate of the column and call its ToClientTemplate method and the ToHtmlString method to convert it to string e.g.

columns.Template(p => {}).ClientTemplate(
    Html.Kendo().AutoComplete()
             .Name("autoComplete#=IDField#")
             .BindTo(Data)
             .ToClientTemplate().ToHtmlString()
);

You should also use the DataBound event of the Grid to find all scripts within its element and execute them:

function dataBound(e) {
    this.element.find("script").appendTo(document.body);
}

By default the Grid uses innerHTML to set the content and the controls in the templates will not be initialized. 

Regards,
Daniel
the Telerik team

[Thomas]

Hello Daniel, 

first, many thanks for your reply.  But, the sample does run within my project, not solve the problem i have. 
Below see definition of the Grid, and more detailed questions.

     @using xxx.server.entities

    @(Html.Kendo().Grid<TecView>()                                                    
        .Name("gridEntryOfService")
        .AutoBind(true)                            
        .Columns(columns =>
        {
            columns.Bound(p => p.ElementNameShort).Title("Element").Width(160);
            columns.Bound(p => p.EmployeeId).Title("EmployeeId").Width(160);
            columns.Bound(p => p.EmployeeNameShort).Title("EmployeeNameShort").Width(160);
        })         
        .Selectable(s => s.Mode(Kendo.Mvc.UI.GridSelectionMode.Single))  
        .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(30)
        .ServerOperation(false) // paging, sorting, filtering and grouping will be applied client-side
                    .Model(model => 
                            model.Id(p => p.TecId)
                            )
                            .Read(read => read.Action("EntryOfServiceItems", "TecManage").Data("additionalDataTECSearch"))
                                    .Create(create => create.Action("TecAdd", "TecManage"))
                                    .Update(update => update.Action("TecUpdate", "TecManage"))
                                                            .Destroy(destroy => destroy.Action("TecDelete", "TecManage"))                               )

        .Events(e => e.DataBound("dataBound"))        
        .Editable(ed => ed.Mode(GridEditMode.InCell))        
                            
    ) 

The requirement from customers are : 
It should be possible to search and select an Employee in a cell - AutocompleteBox, dispaying
 EmployeeNameShort 

if the user selects an item, the column EmployeeId also should be updated.

The Autocomplete Box must read data by an Ajax Request, local data (or model data) is not possible, because of big amount of data.


->  Is this possible with Kendo UI Autocomplete ? Is there another possible Solution with Kendo UI ? 

Many thanks 

Thomas

[Daniel]

Hello Thomas,

A "Server Filtering" demo which shows how to bind the autocomplete to remote data and filter the collection on the server is available in the examples project included with the installation. I am not sure if I understand correctly your requirement about the editing because the Grid is already editable. If you wish to use a custom editor in edit mode, I can suggest to check this demo and the Editor Templates documentation. To update the value instead of the text in this scenario, you should use ComboBox instead which supports this. 
If you wish to show the autocomplete in the cell when it is in display mode, then you should use the approach from my previous reply and update the value in the Grid in the select event. The EmployeeId should also be included in the loaded data in this case e.g.

function select(e) {
    //get the selected item
    var selectedItem = this.dataItem(e.item.index());
    var row = this.element.closest("tr");
    var grid = $("#gridEntryOfService").data("kendoGrid");
    // get the Grid item
    var gridItem = grid.dataItem(row);
    //set the new value
    gridItem.EmployeeId = selectedItem.EmployeeId;
}

Regards,
Daniel
the Telerik team

[Thomas]

Hello Daniel,

many thanks, i will use the solution you suggested - updating the EmployeeId in the selected event.

Regards
Thomas