Cascaded typeahead textbox in grid

2 posts, 0 answers
  1. Rick
    Rick avatar
    21 posts
    Member since:
    Mar 2012

    Posted 11 Sep 2014 Link to this post

    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,
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 15 Sep 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top