AutoComplete as EditorTemplate for KendoGrid

[Tuan Minh]

Hi Telerik Team,

I have a KendoGrid defined as below:

@(Html.Kendo().Grid(Model.ExceptionList)
            .Name("ThesholdGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.StoreID).Title("StoreID").Width(100);
                columns.Bound(p => p.StoreName).Title("Store Name");
                columns.Bound(p => p.StockCode).Title("StockCode").Width(125).EditorTemplateName("StockCodeAutoComplete");
                columns.Bound(p => p.ItemDesc).Title("Item Desc");
                columns.Bound(p => p.NoThres).Title("No Stock Threshold");
                columns.Bound(p => p.LowThres).Title("Low Stock Threshold");
                columns.Command(cmd => cmd.Destroy()).Width(150);
            })
            .ToolBar(toolbar => { toolbar.Create(); toolbar.Save(); })
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Sortable()
            .Resizable(resizable => resizable.Columns(true))
            .DataSource(dataSource => dataSource
                .Ajax()
                .ServerOperation(false)
                .Model(model =>
                {
                    model.Id(p => new { p.StoreID, p.StockCode });
                    model.Field(p => p.StoreName).Editable(false);
                    model.Field(p => p.ItemDesc).Editable(false);
                })
                .Update("UpdateInvTransReview", "Inventory")
            )
)

The template for the AutoComplete:

@(Html.Kendo().AutoCompleteFor(m=>m)
          .DataTextField("StockCode")
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("GetStockCodes", "Inventory").Data(@"function () {
                            return {
                                keyword: ?
                            };}");
              });
          })
          .HtmlAttributes(new { style = "width:100%" })
          .Filter("contains")
          .MinLength(3)
          .Height(400)
          .FooterTemplate("Total <strong>#: instance.dataSource.total() #</strong> items found")
          .Template("#:data.CombinedDesc#")
)

And the controller for the AutoComplete:

[HttpGet]
public JsonResult GetStockCodes(string keyword)
{
    if (string.IsNullOrEmpty(keyword)) return Json(new List<StockCodeDesc>(), JsonRequestBehavior.AllowGet);
    var stockCodes = _stockcodeClient.SearchStockCode(keyword);
    stockCodes.ForEach(sc => sc.CombinedDesc = sc.Desc + " (" + sc.StockCode + ")");
    return Json(stockCodes, JsonRequestBehavior.AllowGet);
}

The model for the AutoComplete:

public class StockCodeDesc
{
    public string StockCode { get; set; }
    public string Desc { get; set; }
    public string CombinedDesc { get; set; }
    <other fields>
}

The grid takes data from the model and has inline editing enabled. I would like to have the StockCode field as an AutoComplete and when user selects an item, it will populate the ItemDesc field as well.

From the model you may have guessed that the StockCode field is the text of the AutoComplete, the CombinedDesc is used as template for easier viewing and the Desc is meant to populate the column ItemDesc of the KendoGrid.

My first question is what to put as the "keyword" mapping in the definition of the AutoComplete. I've tried to user parameterMap of the Transport like:

parameterMap: function (data, action) {
    return {
        keyword: data.filter.filters[0].value
    };
}

 

But the filter is always null.

My second question is how to populate the other field of the grid based on what user selects from the AutoComplete. I figure I should approach this using select event of the AutoComplete but have found no working example.

Thank you,

Michael.

[Preslav]

Hi Michael,

Thank you for the detailed explanation.

I would suggest checking the configuration of this example:

http://demos.telerik.com/aspnet-mvc/autocomplete/serverfiltering

Additionally, I believe that the approach outlined in this How To article could help you in the further implementation of your project.

http://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/add-new-values-to-records-with-autocomplete-editor

Furthermore, a possible solution for populating the other field of the grid is inside the change event function. For example, in the above project modify the onChange JavaScript function in the Views/Home/Index.cshtml file with a code similar to:

function onChange(e) {
    if (e.action == "itemchange") {
        if (e.field == "Person") {
            if (typeof(e.items[0].Person) == "string") {
                e.items[0].set("Person", {
                    ID: "0",
                    Name: e.items[0].Person
                });
                e.items[0].set("Text", e.items[0].Person.Name + "+Text");

                $("#grid").data("kendoGrid").closeCell($("[data-role=autocomplete]").closest("td"));
            }
        }
    }
}

This will show the required functionality in action.

Please, give the above a try and let me know if you require any further assistance.


Regards,
Preslav
Telerik by Progress

[Tuan Minh]

Hi Preslav,

Thanks for your reply but I haven't quite achieved the desired result:

The server filtering in the example uses id selector which I can't really use since there will be multiple AutoComplete in the Grid. I was hoping I could do something like:

function (data, action) {
    return {
        keyword: data.filter.filters[0].value
    };
}

For populating other field of the grid, the data to be populated is only available when user has selected an item from the AutoComplete. The dataSource of the AutoComplete will have this model:

public class StockCodeDesc
{
    public string StockCode { get; set; }
    public string Desc { get; set; }
    public string CombinedDesc { get; set; }
    <other fields>
}

I want to populate the grid field ItemDesc of the same row with the field Desc returned from the AutoComplete. This Desc field is not the value/text of the AutoComplete thus I can't get the suggested method to work.

Please assist further, thank you.

Michael.

[Preslav]

Hello Michael,

I would suggest checking this example:

http://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/grid-editing-cascading-dropdownlist

I believe that the approach for getting the values outlined in the above example could fit in the data function of the AutoComplete.


Regards,
Preslav
Telerik by Progress