Reputation: 809
I am having an application where I do have a KendoGrid in which 2 Columns are there.In the First column i am appending a label based on Condition Now I want to disable this Column for each row.I am using Incell Editing for editing the Data of the Column so when I click to the First Column while editing through InCell Editing of the KendoGrid it must be disabled that is must not be edited. here My Code as Below:
@(Html.Kendo().Grid(Model)
.Name("Remark")
.TableHtmlAttributes(new { style = "height:20px; " })
.Columns(columns =>
{
columns.Bound(p => p.RemarkID).Hidden(true).ClientTemplate("#= RemarkID#" + "<input type='hidden' class='RemarkID' value='#=RemarkID#' />");
//columns.Bound(p => p.RemarkCode).Title("Remark Code").Width(3).ClientTemplate("#= RemarkCode#" + "<input type='hidden' class='RemarkCode' value='#=RemarkCode#' />");
columns.Bound(p => p.RemarkDescription).Title("Type").Width(10).ClientTemplate("#= RemarkDescription#" + "<input type='hidden' class='RemarkDescription' value='#=RemarkDescription#' />");
columns.Bound(p => p.Remark).Title("Remark").Width(50).ClientTemplate("#= Remark#" + "<input type='hidden' class='Remark' value='#=Remark#' />");
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Navigatable()
.Sortable()
.Scrollable(scr => scr.Height(200))
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model =>
model.Id(p => p.RemarkID)
)
.Create("Editing_Create", "Grid")
.Read("Remark_Read", "Document")
.Update("Editing_Update", "Grid")
.Destroy("Editing_Destroy", "Grid")
)
)
$(".AddNewRemark").click(function () {
//grid.addRow();
var dataSource = grid.dataSource;
var total = dataSource.data().length;
dataSource.insert(total, {});
dataSource.page(dataSource.totalPages());
grid.editRow(grid.tbody.children().last());
var it = $(this).text().trim();
$("#RemarkDescription").val(it);
$("#RemarkDescription").attr('readonly', 'readonly');
grid.dataSource._data[total].RemarkDescription = it;
for(var i=0;i<=total;i++){
grid.dataSource.at(i).fields["RemarkDescription"].editable=false;
}
});
Upvotes: 1
Views: 4690
Reputation:
Make editable as false in the schema declaration for that particular column which you want to disable.
Upvotes: 0
Reputation: 8020
Try this , It's just an example,
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.kendoui.com/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true },editable: false, },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 430,
toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 110 },
{ field: "UnitsInStock", title: "Units In Stock", width: 110 },
{ field: "Discontinued", width: 110 },
{ command: "destroy", title: " ", width: 90 }],
editable: true
});
});
</script>
</div>
If you want to Disable
one column in Incell Editing Grid then use editable: false
for that column.
If you use editable: false
property for your grid column and you want to add new item in that grid your first column should always be Disabled
. And i don't known the ans for Razor syntax.
Upvotes: 3