To my view I send Model where one property is DataTable(called Data), which I bind to Kendo Grid:
@(Html.Kendo().Grid(Model.Data)
.Name("MyGrid")
.Columns(c =>
{
if (Model.Data != null)
{
int index = 0;
foreach (System.Data.DataColumn column in Model.Data.Columns)
{
var col = c.Bound(column.ColumnName).Width("300px").EditorTemplateName("String");
if (index < 2)
{
col.Locked(true).Lockable(false);
}
index++;
}
}
})
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.Row[0]);
if (Model.Data != null)
{
model.Id(Model.Data.Columns[0].ColumnName);
int index = 0;
foreach (System.Data.DataColumn column in Model.Data.Columns)
{
var field = model.Field(column.ColumnName, column.DataType);
if (index < 2)
{
field.Editable(false);
}
index++;
}
}
})
.PageSize(20)
.Create(update => update.Action("Create", "Home"))
.Update(up => up.Action("UpdateRow", "Home"))
)
.Editable(editable => editable
.Mode(GridEditMode.InCell)
)
.Selectable(selectable =>
{
selectable.Mode(GridSelectionMode.Single);
selectable.Type(GridSelectionType.Row);
})
.Scrollable(scr => scr.Height(500))
.Reorderable(reorder => reorder.Columns(true))
.Resizable(r => r.Columns(true))
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.HtmlAttributes(new { style = "height:100%" })
.Pageable()
.Navigatable()
.Sortable()
.Groupable(g => g.ShowFooter(true))
)
The problem is with line field.Editable(false) - when I try to set true it works. It says that I do not have ID value in my DataRowView - I am pretty sure my DataTable have column called ID, I checked it like 100+times. Exact Error:
Property with specified name: ID cannot be found on type: System.Data.DataRowView Parameter name: propertyName
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.ArgumentException: Property with specified name: ID cannot be found on type: System.Data.DataRowView Parameter name: propertyName
I have baypass the problem. I have used
.Events(events =>
{
events.Edit("edit_handler");
})
where my function looks:
<script type="text/javascript" language="javascript">
function edit_handler(e) {
var grid = $('#MyGrid').data('kendoGrid');
var fieldName = grid.columns[e.container.index()].field;
var columnsToEdit = document.getElementById('EditableColumns').textContent;
var arrayOfColumns = columnsToEdit.split(",");
if (arrayOfColumns.indexOf(fieldName.toUpperCase()) < 0) {
$("#MyGrid").data("kendoGrid").closeCell(e.container);
}
}
</script>
Where "EditableColumns" label contains all columns names which should be editable.