Cascaded typeahead textbox in grid

[Rick]

Can we have cascaded typeahead textbox instead of ordinary DropDownList in kendo grid? The reason is we want to choose BrandName(string) from database first, if it's not an existing BrandName, we want the ability to enter a new one. Then the choice of Model#(string) would be depending on BrandName. If there is some model# for that brand, we list all of them and let user make a choice. If not, we allow user to enter a new model#.

I tried combobox and autocomplete. Couldn't succeed.

Here is the code that I'm trying (just in case it would be helpful)
                @(Html.Kendo().Grid<mobiCore.Models.ReportDetailModel>()
                .Name("ReportDetail")
                .Columns(columns =>
                {
                    columns.Bound(p => p.BrandName).HeaderHtmlAttributes(new { @title = "Brand Name" }).ClientTemplate("#=BrandName.Name#");
                    columns.Bound(p => p.ModelNo).HeaderHtmlAttributes(new { @title = "Model Number" }).EditorTemplateName("ModelNo");
                    columns.ForeignKey(p => p.ProductID, (SelectList)ViewBag.Product).Title("Product");
                    columns.Bound(p => p.Units).Width(75);
                    columns.Command(command => { command.Destroy(); }).Width(85);
                })
                .ToolBar(toolbar => { toolbar.Create(); toolbar.Save(); })
                .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
                .Pageable()
                .Sortable()
                .Navigatable()
                .Scrollable()
        // .HtmlAttributes(new { style = "maxwidth:1400px;" })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Batch(true)
                    .Events(events => events.Error("error_handler"))
                    .Model(model =>
                    {
                        model.Id(p => p.ReportDetailID);
                        model.Field(p => p.ReportID).Editable(false);
                        model.Field(p => p.Units).DefaultValue(0);
                        model.Field(p => p.ProductID).DefaultValue(0);

                    })
                    .ServerOperation(false)
                    .Read(read => read.Action("Detail_Read", "ReportDetail", new { id = Model.ReportID }))
                    .Create(create => create.Action("Detail_Create", "ReportDetail", new { id = Model.ReportID }))
                    .Update(update => update.Action("Detail_Update", "ReportDetail"))
                    .Destroy(delete => delete.Action("Detail_Destroy", "ReportDetail"))
                )
            )
 <script type="text/javascript">


    function filterBrand() {
        return {
            CompanyID: '@Model.CompanyID'
        };
    }
    function filterModel() {
        return {
            CompanyID: '@Model.CompanyID',
            BrandName: $("#BrandName").data("AutoComplete").value()
        };
    }
</script>

Below is partial view under EditorTemplates: BrandName.schtml
@model string

@(Html.Kendo().AutoComplete()
    .Name(ViewData.TemplateInfo.GetFullHtmlFieldName(""))
    .DataTextField("Name")
     .DataSource(dataSource => dataSource.Read(read => read.Action("GetBrand", "CustomerUnitReports").Data("filterBrand")).ServerFiltering(true))
    .HtmlAttributes(new { @class = "k-widget k-autocomplete k-input", style = string.Format("width:200px") })
    .Delay(500)
    .HighlightFirst(true)
)  

Below is partial view under EditorTemplates: ModelNo.schtml
@model string

@(Html.Kendo().ComboBoxFor(m => m)
                  .AutoBind(false)
                          .Placeholder("Select Model#...")
                                  .DataTextField("ModelNumber")
                              .DataValueField("ModelNumber")
                  .DataSource(dataSource =>
                  {
                      dataSource.Read(read => read.Action("GetModelNo", "CustomerUnitReports").Data("filterModel"))
                                .ServerFiltering(true);
                  })
                  .CascadeFrom("BrandName")
)


@Html.ValidationMessageFor(m => m)

Thanks a lot,

[Petur Subev]

Hello Rick,

The ComboBox widget is the one that is the closest that we have according to what you described. The value of the ComboBox is whatever item is selected in the list, if there is no match then the value becomes whatever the user have typed in the textbox. With this having in mind you should make the property on the server to be of type string - so it can be "1" or some text. If the Property that you edit ModelNo is of type int - then the value on the server won't be mapped since string cannot be converted to number.

I hope this clarifies the situation.

Kind Regards,
Petur Subev
Telerik