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,
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,