popup editing in a grid - razor examples

8 posts, 0 answers
  1. mww
    mww avatar
    257 posts
    Member since:
    Sep 2012

    Posted 25 Oct 2012 Link to this post

    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
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 25 Oct 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Annie
    Annie avatar
    5 posts
    Member since:
    Jan 2013

    Posted 06 Mar 2013 Link to this post

    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.
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 07 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Annie
    Annie avatar
    5 posts
    Member since:
    Jan 2013

    Posted 07 Mar 2013 Link to this post

    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.
  7. Abhishek
    Abhishek  avatar
    2 posts
    Member since:
    Apr 2013

    Posted 06 May 2013 Link to this post

    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.
  8. Annie
    Annie avatar
    5 posts
    Member since:
    Jan 2013

    Posted 06 May 2013 Link to this post

    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.
  9. Abhishek
    Abhishek  avatar
    2 posts
    Member since:
    Apr 2013

    Posted 06 May 2013 Link to this post

    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",
                 
            });
     
     
     
        });
Back to Top
Kendo UI is VS 2017 Ready