I have a basic grid that utilizes the inline edit feature. My goal is to use a combo box to enforce a specific value that can be saved. However, I'm not sure what I'm missing, as the edit still appears as a text box instead of the combo box, and there are no console errors to indicate any issues.
Here is the cshtml
<div id="datagrid">
@(Html.Kendo().ComboBox()
.Name("DepartmentComboBox")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new[]
{
new { Text = "Sales", Value = "Sales" },
new { Text = "Marketing", Value = "Marketing" },
new { Text = "Development", Value = "Development" },
new { Text = "HR", Value = "HR" }
})
.HtmlAttributes(new { style = "width: 100%" }))
@(Html.Kendo().Grid<MVCSite.Model.ProspectSearchModel>
()
.Name("ProspectSourceGrid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Title("Id").Filterable(false).Visible(false);
columns.Command(command => { command.Edit(); }).Width(200).Title("Change<br>Status").Width(100);
columns.Bound(p => p.Status).EditorTemplateName("DepartmentComboBox").Title("Status").Width(100).Filterable(false);
columns.Bound(p => p.DaysOnMarket).Title("Days On Market").Width(150).HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" }).HtmlAttributes(new { style = "text-align: center" }).Filterable(false);
columns.Bound(p => p.USState).Title("State").Width(100).HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" }).HtmlAttributes(new { style = "text-align: center" }).Filterable(false);
columns.Bound(p => p.FormattedAddress).Title("Address").HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" }).Filterable(false);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Selectable()
.Pageable(pageable => pageable
.Numeric(true)
.Info(true)
.PreviousNext(true)
.Refresh(false)
.PageSizes(true)
.ButtonCount(50))
.Sortable()
.Selectable(s=> s.Mode(GridSelectionMode.Single))
.Scrollable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
// Declare a model field and make it readonly
model.Field(p => p.DaysOnMarket).Editable(false);
model.Field(p => p.USState).Editable(false);
model.Field(p => p.FormattedAddress).Editable(false);
})
.Read(read => read.Action("ProspectSourceGridData", "DataSource"))
.Destroy(update => update.Action("OptionGridInline_Destroy", "DataSource"))
.Update(update => update.Action("EditingInline_Update", "Grid"))
.PageSize(15))
.Events(events => events.DataBound("Autocolumnwidth")
)
)
</div>
here is the model
public class ProspectSearchModel
{
public int Id { get; set; }
public int? DaysOnMarket { get; set; }
public string FormattedAddress { get; set; }
public string Status { get; set; }
public string USState { get; set; }
}
and here is the controller
public ActionResult ProspectSourceGridData([DataSourceRequest] DataSourceRequest dataSourceRequest)
{
IEnumerable<ProspectSearchModel> prospects = GetSampleProspects();
return Json(prospects.ToDataSourceResult(dataSourceRequest), JsonRequestBehavior.AllowGet);
// Returning as a DataSourceResult (using Kendo.Mvc.Extensions)
}
private IEnumerable<ProspectSearchModel> GetSampleProspects()
{
var prospects = new List<ProspectSearchModel>();
var random = new Random();
// Sample data for randomization
var states = new[] { "CA", "NY", "TX", "FL", "NV", "WA", "CO", "AZ", "NC", "PA" };
var statuses = new[] { "Active", "Pending", "Sold", "Expired" };
// Generating 30 sample prospect data
for (int i = 0; i < 30; i++)
{
prospects.Add(new ProspectSearchModel
{
Id = i + 1,
DaysOnMarket = random.Next(1, 301), // Random days on market between 1 and 300
FormattedAddress = $"123 {random.Next(1, 100)} St, Sample City, {states[random.Next(states.Length)]} {random.Next(10000, 99999)}",
Status = statuses[random.Next(statuses.Length)],
USState = states[random.Next(states.Length)]
});
}
return prospects; // Returning the list as an IEnumerable
}
Here is the javascript autocolumnwidth function
function Autocolumnwidth(e) {
//var grid = e.sender;
//for (var i = 0; i < grid.columns.length; i++) {
// grid.autoFitColumn(i);
//}
$("#datagrid .k-grid-content").attr("style", "height: auto");
}
Example of the result
I have a basic grid that utilizes the inline edit feature. My goal is to use a combo box to enforce a specific value that can be saved. However, I'm not sure what I'm missing, as the edit still appears as a text box instead of the combo box, and there are no console errors to indicate any issues.
Here is the cshtml
<div id="datagrid">
@(Html.Kendo().ComboBox()
.Name("DepartmentComboBox")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new[]
{
new { Text = "Sales", Value = "Sales" },
new { Text = "Marketing", Value = "Marketing" },
new { Text = "Development", Value = "Development" },
new { Text = "HR", Value = "HR" }
})
.HtmlAttributes(new { style = "width: 100%" }))
@(Html.Kendo().Grid<MVCSite.Model.ProspectSearchModel>
()
.Name("ProspectSourceGrid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Title("Id").Filterable(false).Visible(false);
columns.Command(command => { command.Edit(); }).Width(200).Title("Change<br>Status").Width(100);
columns.Bound(p => p.Status).EditorTemplateName("DepartmentComboBox").Title("Status").Width(100).Filterable(false);
columns.Bound(p => p.DaysOnMarket).Title("Days On Market").Width(150).HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" }).HtmlAttributes(new { style = "text-align: center" }).Filterable(false);
columns.Bound(p => p.USState).Title("State").Width(100).HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" }).HtmlAttributes(new { style = "text-align: center" }).Filterable(false);
columns.Bound(p => p.FormattedAddress).Title("Address").HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" }).Filterable(false);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Selectable()
.Pageable(pageable => pageable
.Numeric(true)
.Info(true)
.PreviousNext(true)
.Refresh(false)
.PageSizes(true)
.ButtonCount(50))
.Sortable()
.Selectable(s=> s.Mode(GridSelectionMode.Single))
.Scrollable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
// Declare a model field and make it readonly
model.Field(p => p.DaysOnMarket).Editable(false);
model.Field(p => p.USState).Editable(false);
model.Field(p => p.FormattedAddress).Editable(false);
})
.Read(read => read.Action("ProspectSourceGridData", "DataSource"))
.Destroy(update => update.Action("OptionGridInline_Destroy", "DataSource"))
.Update(update => update.Action("EditingInline_Update", "Grid"))
.PageSize(15))
.Events(events => events.DataBound("Autocolumnwidth")
)
)
</div>
here is the model
public class ProspectSearchModel
{
public int Id { get; set; }
public int? DaysOnMarket { get; set; }
public string FormattedAddress { get; set; }
public string Status { get; set; }
public string USState { get; set; }
}
and here is the controller
public ActionResult ProspectSourceGridData([DataSourceRequest] DataSourceRequest dataSourceRequest)
{
IEnumerable<ProspectSearchModel> prospects = GetSampleProspects();
return Json(prospects.ToDataSourceResult(dataSourceRequest), JsonRequestBehavior.AllowGet);
// Returning as a DataSourceResult (using Kendo.Mvc.Extensions)
}
private IEnumerable<ProspectSearchModel> GetSampleProspects()
{
var prospects = new List<ProspectSearchModel>();
var random = new Random();
// Sample data for randomization
var states = new[] { "CA", "NY", "TX", "FL", "NV", "WA", "CO", "AZ", "NC", "PA" };
var statuses = new[] { "Active", "Pending", "Sold", "Expired" };
// Generating 30 sample prospect data
for (int i = 0; i < 30; i++)
{
prospects.Add(new ProspectSearchModel
{
Id = i + 1,
DaysOnMarket = random.Next(1, 301), // Random days on market between 1 and 300
FormattedAddress = $"123 {random.Next(1, 100)} St, Sample City, {states[random.Next(states.Length)]} {random.Next(10000, 99999)}",
Status = statuses[random.Next(statuses.Length)],
USState = states[random.Next(states.Length)]
});
}
return prospects; // Returning the list as an IEnumerable
}
Here is the javascript autocolumnwidth function
function Autocolumnwidth(e) {
//var grid = e.sender;
//for (var i = 0; i < grid.columns.length; i++) {
// grid.autoFitColumn(i);
//}
$("#datagrid .k-grid-content").attr("style", "height: auto");
}
Example of the result
Share Improve this question edited Feb 16 at 19:23 Jay asked Feb 16 at 19:19 JayJay 12 bronze badges New contributor Jay is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.1 Answer
Reset to default 0After hours of trying to use inline, I switched to exactly how this demo works. https://demos.telerik/aspnet-mvc/grid/editing-custom?_gl=1*4rmtvr*_gcl_au*MzM0MzgzMzQxLjE3Mzk2NTQ5MTg.*_ga*NzAyNTMxODYzLjE3Mzk2NTQ5MTg.*_ga_9JSNBCSF54*MTczOTcyNDMxOS4yLjEuMTczOTc1Njg5My41NC4wLjA.