I have configured a grid’s bound column with an editor. I would like the editor to be suppressed, or otherwise not available to the user, when creating a new row. I’ve only thus far been able to use jQuery’s .html() function to empty the inner HTML, but there must be a more elegant solution. Any attempts to replace the inner HTML with content result in that content becoming part of the editor (clickable to see the editor's dropdown).
What do you advise I do in the Edit event handler?
Reference Threads:
http://www.telerik.com/forums/column-readonly-in-edit-mode-but-editable-in-add-mode-
http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/editor-templates
--- CODE FOLLOWS ---
Here is the grid’s view model (showing the annotation):
public sealed class GridViewModel
{
...
[UIHint("DisplayOrderEditor")]
public Int32 DisplayOrder { get; set; }
}
Here is the editor template DisplayOrderEditor.cshtml:
@(Html.Kendo().DropDownList()
.Name("DisplayOrder")
.DataValueField("Value")
.DataTextField("Text")
.BindTo((IEnumerable<SelectListItem>)ViewData["displayorders"])
)
Here is the inline editable grid using AJAX for binding to remote data:
@(Html.Kendo().Grid<MyController.GridViewModel>()
.Name("grid")
.Columns(columns =>
{
...
columns.Bound(h => h.DisplayOrder);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Events(events => events.Edit("onEdit"))
.DataSource(dataSource => dataSource
.Ajax()
...
)
Here is the handler for the Edit event:
function onEdit(e) {
if (e.model.isNew() == true) {
$('[name="DisplayOrder"]').parent().html("");
}
}
What do you advise I do in the Edit event handler?
Reference Threads:
http://www.telerik.com/forums/column-readonly-in-edit-mode-but-editable-in-add-mode-
http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/editor-templates
--- CODE FOLLOWS ---
Here is the grid’s view model (showing the annotation):
public sealed class GridViewModel
{
...
[UIHint("DisplayOrderEditor")]
public Int32 DisplayOrder { get; set; }
}
Here is the editor template DisplayOrderEditor.cshtml:
@(Html.Kendo().DropDownList()
.Name("DisplayOrder")
.DataValueField("Value")
.DataTextField("Text")
.BindTo((IEnumerable<SelectListItem>)ViewData["displayorders"])
)
Here is the inline editable grid using AJAX for binding to remote data:
@(Html.Kendo().Grid<MyController.GridViewModel>()
.Name("grid")
.Columns(columns =>
{
...
columns.Bound(h => h.DisplayOrder);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Events(events => events.Edit("onEdit"))
.DataSource(dataSource => dataSource
.Ajax()
...
)
Here is the handler for the Edit event:
function onEdit(e) {
if (e.model.isNew() == true) {
$('[name="DisplayOrder"]').parent().html("");
}
}