Popup Editing not posting to Controller

[Reid]

I have a grid showing a set of records with a configuration of "editable: "popup" that is working to display the records.  The popup shows the row data but when I click the "update" button the popup goes away but the associated controller action does not get called. 

I am following along with these links:
http://demos.telerik.com/kendo-ui/grid/editing-popup
http://docs.telerik.com/kendo-ui/controls/data-management/grid/editing

My code is the same :

$(document)
  .ready(function() {
    dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/Test/TestsAnswerTypesRead",
                dataType: "jsonp"
            },
            update: {
                url: "/Test/UpdateTestAnswerType",
                dataType: "jsonp"
            },
            destroy: {
                url: "/Test/DestroyTestAnswerType",
                            dataType: "jsonp"
            },
            create: {
                url: "/Test/CreateTestAnswerType",
                dataType: "jsonp"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return { models: kendo.stringify(options.models) };
                }
            }
        },
        batch: true,
        pageSize: 20,
        schema: {
            model: {
                id: "Id",
                fields: {
                    Id: { editable: false, nullable: true },
                    Name: { validation: { required: true } },
                    Description: {},
                    Instruction: {}
                }
            }
        }
    });

    $("#grid")
    .kendoGrid({
        dataSource: dataSource,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 8
        },
        groupable: true,
        scrollable: true,
        sortable: true,
        filterable: true,
        resizable: true,
        reorderable: true,
        height: 550,
        toolbar: ["create", "excel"],
        excel: {
            fileName: "TestsExport.xlsx",
            proxyURL: "/ExportTestDomain",
            filterable: true
        },
        columns: [
            { field: "Name", title: "Name", width: "150px" },
            { field: "Description", title: "Description", width: "150px" },
            { field: "Instruction", title: "Instruction", width: "150px" },
            { command: ["edit", "destroy"], title: " ", width: "150px" }
        ],
        editable: "popup"
    });
});

 

Here is the Controller action for the Update :

public JsonResult UpdateTestAnswerType()
{
    var models = this.DeserializeObject<IEnumerable<NCC.Model.DTO.TestAnswerType>>("models");
    if (models != null)
    {
        // Update Here
    }
    return this.Jsonp(models);
}

And I tried this format:

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult UpdateTestAnswerType([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")] IEnumerable<NCC.Model.DTO.TestAnswerType> gridtestAnswerTypess)
{
    var models = this.DeserializeObject<IEnumerable<NCC.Model.DTO.TestAnswerType>>("models");
    if (models != null)
    {
        // Update Here
    }
    return this.Jsonp(models);
}

When I click the "add new record" button on the toolbar and post that it does the same, closes with no post to the controller.

Also, how can you make the popup dialog for an insert say, "Adding new record" instead of "Edit", and the dialog's update button say, "Save"?

 

Any help would be greatly appreciated.

 

Thanks,

Reid

 

 

 

 

 

 

 

[Dimiter Madjarov]

Hello Reid,

A DataSourceRequest parameter will only be serialized when the Grid is configured through the MVC wrappers (or it's type and appropriate properties are manually set via JavaScript). Regarding the current configuration, I would suggest to refer to the following sample project:

https://github.com/telerik/kendo-examples-asp-net-mvc/tree/master/grid-crud

which demonstrates how to configure the CRUD action methods for a JavaScript Grid. Could you check it and let me know of the result?

Regarding the second question, the "update" text could be set through the following Grid configuration option:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.command.text.update

but the dialog title should be updated manually, for example in the edit event handler of the Grid.
E.g.

edit: function(e) {
  if (e.model.isNew()) {
    e.container.closest(".k-window")
     .find(".k-window-title").text("Add new record");
  }
}

Regards,
Dimiter Madjarov
Telerik by Progress