Kendo UI Grid incell edit with client template - Razor view - kendo-ui

Question

i am using kendo grid Q2 2014 and i want to use client template in cell edit mode. But it not work as i want . I need to click into that cell in order to get into edit mode.
Here is my grid .
#(Html.Kendo().Grid<AdminProject.Common.ViewModels.ProjectActivityViewModel>()
.Name("gridName")
.Columns(columns =>
{
columns.Bound(d => d.ResourceName);
columns.Bound(d => d.TotalHours).Title("Total Hours").Width(150).ClientFooterTemplate("Sum: #=sum#");
columns.Bound(d => d.TotalCost).Title("Total Cost").Format("{0:c0}").Width(150).ClientFooterTemplate("Sum: #= kendo.toString(sum, 'c0')#");
columns.Bound(d => d.Hours)
.ClientTemplate(Html.Kendo().TextBox().Name("NewHours").ToClientTemplate().ToHtmlString());
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.ToolBar(toolbar =>
{
toolbar.Save(); // The "save" command saves the changed data items
})
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5)
)
.Sortable()
.Events(e => e.Edit("onEdit"))
.AutoBind(true)
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(10)
.Aggregates(aggregates =>
{
aggregates.Add(p => p.TotalHours).Sum();
aggregates.Add(p => p.TotalCost).Sum();
})
.Events(events => { events.Error("error_handler").Sync("sync_handler"); })
.ServerOperation(true)
.Model(model =>
{
model.Id(product => product.ResourceId); // Specify the property which is the unique identifier of the model
model.Field(product => product.TotalHours).Editable(false);
model.Field(product => product.TotalCost).Editable(false);
model.Field(product => product.ResourceName).Editable(false);
})
.Read(read => read.Action(AdminProject.Common.Constants.ActionNames.GetDetail, AdminProject.Common.Constants.ControllerNames.Project).Data("additionalData"))
.Update(update => update.Action(AdminProject.Common.Constants.ActionNames.UpdateActivity, AdminProject.Common.Constants.ControllerNames.Project).Data("additionalData2"))
.Sort(sort => sort.Add(s => s.ResourceId).Ascending())
))
Sorry , i can not post the photo so i uploaded it into another host .
Before enter link description here
After enter link description here

Answer 1

have look on this http://jsfiddle.net/khNsE/70/ example.
This is kendo ui script you can use this instead of mvc wrapper.
var _roleDataSource = new kendo.data.DataSource({
data: [
{ id: 1, title: "Software Engineer" },
{ id: 2, title: "Quality Assurance Engineer" },
{ id: 3, title: "Team Lead" }
]
});
var _peopleDataSource = new kendo.data.DataSource({
data: [
{ id: 1, name: "John", roleId: 1, roleTitle: "Software Engineer" },
{ id: 2, name: "Dave", roleId: 2, roleTitle: "Quality Assurance Engineer" },
{ id: 3, name: "Aaron", roleId: 3, roleTitle: "Team Lead" }
]
});
var _grid = $("#grid").kendoGrid({
dataSource: _peopleDataSource,
columns: [
{
field: "name",
title: "Name"
},{
field: "roleTitle",
title: "Role",
editor: function(container, options) {
$("<input data-bind='value:roleTitle' />")
// .attr("id", "ddl_roleTitle")
.appendTo(container)
.kendoDropDownList({
dataSource: _roleDataSource,
dataTextField: "title",
dataValueField: "title",
template: "<span data-id='${data.id}'>${data.title}</span>",
select: function(e) {
var id = e.item.find("span").attr("data-id");
var person =_grid.dataItem($(e.sender.element).closest("tr"));
person.roleId = id;
setTimeout(function() {
$("#log")
.prepend($("<div/>")
.text(
JSON.stringify(_grid.dataSource.data().toJSON())
).append("<br/><br/>")
);
});
}
});
}
}
],
editable: true
}).data("kendoGrid");
Hope this helps
Regards
vinit

Answer 2

You may force the last Cell into edit mode through
var grid = $('#gridName').data('kendoGrid');
grid.editCell(grid.tbody.find('tr:eq(0) td:last'));
please refer to this fiddle: http://jsfiddle.net/houssamk/7z0ubup7/1/
NOTE:
Please do not put this call inside the "edit" event handler because it will fire the edit event again. please see http://docs.telerik.com/kendo-ui/api/web/grid#methods-editCell