Problems with editor showing html tags instead of data

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);
            })
)