CODEWITHSUNDEEP
c#angularjsasp.net-mvckendo-uikendo-grid
Halcyon
Halcyon

Reputation: 14971

Performing An Inline Edit With A Kendo Grid Using Angular.js, Kendo UI and ASP.NET MVC

I'm using Angular.js, Kendo UI, ASP.NET MVC and C#. I have a Kendo Grid on which I'd like to perform an inline edit. When I click the edit button in the grid, update the data in the row and then click the update button, the request is being sent to the server and hitting my MVC controller method, but there is no data being passed back in the request. What do I need to change to get the inline editing working correctly?

<section ng-app="manageProjectsApp" ng-controller="manageProjectsController as vm">
    <div kendo-grid="grid" options="vm.kendoGridOptions"></div>
</section>

<script>
    ...

    vm.kendoGridOptions = {
        scrollable: false,
        sortable: true,
        pageable: false,
        editable: 'inline',
        columns: [{
            field: 'ProjectName',
            title: 'Project Name'
        }, {
            field: 'Active',
            title: 'Is Active?'
        }, {
            command: ['edit']
        }],
        dataSource: new kendo.data.DataSource({
            transport: {
                read: {
                    url: '/manage-projects/get-projects',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json'
                }, update: {
                    url: '/manage-projects/update-project',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json'
                }, parameterMap: function (options, operation) {
                    if (operation !== 'read' && options.models) {
                        return {
                            models: kendo.stringify(options.models)
                        };
                    }
                }
            }, schema: {
                model: {
                    id: 'ProjectId',
                    fields: {
                        ProjectId: {
                            type: 'number',
                            editable: false,
                            nullable: false
                        },
                        ProjectName: {
                            type: 'string',
                            nullable: false,
                            validation: {
                                required: true
                            }
                        },
                        Active: {
                            type: 'boolean',
                            nullable: false
                        }
                    }
                }
            }
        })
    };
</script>

[Route("manage-projects/update-project")]
public JsonResult UpdateProject(ProjectData projectData)
{
  // save the data...

  return Json(true, JsonRequestBehavior.DenyGet);
}

public class ProjectData
{
  public int ProjectId { get; set; }
  public string ProjectName { get; set; }
  public bool Active { get; set; }
}

Upvotes: 0

Views: 254

Answers (1)

ertdiddy
ertdiddy

Reputation: 407

I would say remove JsonRequestBehavior.DenyGet from your Json result. Also if it is a POST method, mark your method with the [HttpPost] attribute.

Upvotes: 0

Related Questions