popup editing in a grid - razor examples

[mww]

are there any code examples using  MVC Razor for popup editing in a grid ?  The supplied demos only seem to have standard html and no cshtml

[Atanas Korchev]

Hello Mark,

 You can check the sample application shipped with your distribution. More info can be found here: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/introduction#running-the-sample-application

Kind regards,
Atanas Korchev
the Telerik team

[Annie]

I looked in the MVC Demos - Kendo UI for ASP.NET MVC that came with our installation and dont see this sample in there. I need an example for Razor MVC Popup editing. My update saves in the Database but does not automatically refresh the Grid. If I manually refresh, then it shows up. Not sure why.

[Atanas Korchev]

Hello Annie,

 I am afraid that my initial response was wrong.The current official version doesn't include a dedicated popup editing example. We will rectify this problem in our next official release which is due by the end of this month. Please accept my sincere apologies for the inconvenience caused.

 Fortunately it is very easy to show how to use popup editing. Take the inline editing example: (<install location>\wrappers\aspnetmvc\Examples\Areas\razor\Views\web\grid\editing_inline.cshtml) and just change the editing mode to popup:

.Editable(editable => editable.Mode(GridEditMode.PopUp))

Regards,
Atanas Korchev
the Telerik team

[Annie]

Thanks Atanas. I still wasn't able to get it to refresh the grid though. I have put in a support ticket with my code.

[Abhishek]

i am also facing the same issue. Grid doesnt display the current row that is inserted or edited in popup editor. Please suggest a way to refresh the Kendo Grid so tht it displays the latest value.

[Annie]

For my scenario, the solution was to return the updated ViewModel from the action. Like so....

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdateEmployee([DataSourceRequest] DataSourceRequest request, Employee emp)
{
    if (emp != null && ModelState.IsValid)
    {
        var empToUpdate = db.Employee.First(a => a.EmpId == emp.EmpId);
 
        if (empToUpdate != null)
        {
            TryUpdateModel(empToUpdate);
        }
    }
 
    var viewModel = new EmployeeViewModel
            {
                EmpId = emp.EmpId,
                NameFirst = emp.NameFirst,
                NameMiddle = emp.NameMiddle,
                NameLast = emp.NameLast,
                Title = emp.Title,
            };
 
    return Json(new[] { viewModel }.ToDataSourceResult(request));
}

Hope this helps.

[Abhishek]

i am using jquery code to to bind d grid.


 

$(document).ready(function () {

        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Region/GetRegion",
                    dataType: "json"
                },
                update: {
                    url: "/Region/EditRegion",
                    type: "update",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
               },
                destroy: {
                    url: "/Region/DeleteRegion",
                    type: "Delete",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                },
                create: {
                    url: "/Region/NewRegion",
                    type: "Create",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                },

                parameterMap: function (model, operation) {
                    //debugger;
                    if (operation !== "read" && model) {
                        return kendo.stringify(model);

                    }
                }
            },
            batch: false,
            pageSize: 20,
            schema: {
                model: {
                    id: "RegionId",
                    fields: {
                        RegionId: { editable: false, nullable: true },
                        RegionName: { validation: { required: true } },
                        TenantName: { validation: { required: true } },
                        PlantName: { validation: { required: true } }
                    }
                }
            }
        });

        $("#Regiongrid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            cache: false,
            height: 430,
            toolbar: ["create"],
            columns: [
                { field: "RegionId", type: "number", title: "Region Id", width: 10 },
                { field: "RegionName", width: 30, title: "Region Name" },
                { field: "TenantName", width: 100, title: "Tenant Name", attributes: { style: "text-align:left;" } },
                { field: "PlantName", width: 30, title: "Plant Name" },
                { command: ["edit", "destroy"], title: " ", width: "160px" }],
            editable: "popup",

        });



    });