This is a migrated thread and some comments may be shown as answers.

Popup Editing not posting to Controller

1 Answer 347 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Reid
Top achievements
Rank 2
Reid asked on 23 Jan 2017, 10:35 AM

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

 

 

 

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 25 Jan 2017, 07:37 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Reid
Top achievements
Rank 2
Answers by
Dimiter Madjarov
Telerik team
Share this question
or