Problems with editor showing html tags instead of data - asp.net-mvc-4

Question

I have a kendo grid having some columns. The index page listing my data. My problem is that when i click edit button the whole row become html tags. Do anyone have idea about this problem.My code as following.
#(Html.Kendo().Grid<kendoUsing.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(product => product.ProductID).Width(50);
columns.Bound(product => product.ProductName);
columns.Bound(product => product.UnitsInStock).Width(50);
columns.Command(commands =>
{
commands.Edit();
commands.Destroy(); // The "destroy" command removes data items.
}).Title("Commands").Width(200);
})
.DataSource(dataSource =>
dataSource.Ajax()
.Batch(true) // Enable batch updates.
.Model(model =>
{
model.Id(product => product.ProductID); // Specify the property which is the unique identifier of the model.
model.Field(product => product.ProductID).Editable(false); // Make the ProductID property not editable.
})
.Create(create => create.Action("Products_Create", "Home")) // Action method invoked when the user saves a new data item.
.Read(read => read.Action("Products_Read", "Home")) // Action method invoked when the grid needs data.
.Update(update => update.Action("Products_Update", "Home")) // Action method invoked when the user saves an updated data item.
.Destroy(destroy => destroy.Action("Products_Destroy", "Home")) // Action method invoked when the user removes a data item.
)
.Pageable()
)
My output is

Answer 1

Editable grid items should be defined when using the grid.
.Editable(editable =>
{
editable.Mode(GridEditMode.PopUp);
})
so should be like this :
#(Html.Kendo().Grid<kendoUsing.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(product => product.ProductID).Width(50);
columns.Bound(product => product.ProductName);
columns.Bound(product => product.UnitsInStock).Width(50);
columns.Command(commands =>
{
commands.Edit();
commands.Destroy(); // The "destroy" command removes data items.
}).Title("Commands").Width(200);
})
.DataSource(dataSource =>
dataSource.Ajax()
.Batch(true) // Enable batch updates.
.Model(model =>
{
model.Id(product => product.ProductID); // Specify the property which is the unique identifier of the model.
model.Field(product => product.ProductID).Editable(false); // Make the ProductID property not editable.
})
.Create(create => create.Action("Products_Create", "Home")) // Action method invoked when the user saves a new data item.
.Read(read => read.Action("Products_Read", "Home")) // Action method invoked when the grid needs data.
.Update(update => update.Action("Products_Update", "Home")) // Action method invoked when the user saves an updated data item.
.Destroy(destroy => destroy.Action("Products_Destroy", "Home")) // Action method invoked when the user removes a data item.
)
.Pageable()
.Editable(editable =>
{
editable.Mode(GridEditMode.PopUp);
})
)