Question

我正在使用javascript中的Inline可编辑选项开发一个KendoUI Grid，并且无法使用Update按钮来触发click事件并将数据发布到服务器端更新事件。单击“更新”按钮甚至不会更新客户端上的网格。

希望有人可以帮助我指出我在这里做错了什么。

这并不重复，因为我已经厌倦了答案中的jfiddle链接而且它也没有用。 kendo UI grid update function wont fire

<div id="grid"></div>

 @section Scripts{

<script type="text/javascript">

    $(function () {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "Home/GetPupilsAsJson",
                    dataType: 'json'
                },                    
                update: {
                    url: "Home/UpdatePupils",
                    dataType: 'json',
                    type: 'POST'
                }
            },
            pageSize: 5,
            autoSync: true                
        });

        $('#grid').kendoGrid({
            dataSource: dataSource,
            editable: "inline",
            pageable: true,
            columns: [{
                field: "Id",
                title: "Id",
                width: 150,
                hidden: true
            }, {
                field: "Firstname",
                title: "Firstname",
                width: 150
            }, {
                field: "Lastname",
                title: "Lastname",
                width: 150
            }, {
                field: "DateOfBirth",
                title: "DateOfBirth",
                width: 150
            }, {
                field: "Class",
                title: "Class",
                width: 150
            }, {
                field: "Year",
                title: "Year",
                width: 150
            },
            {
                command: ["edit"],
                width: 150
            }]
        });       
    });
</script>    
 }

的HomeController

 public ActionResult GetPupilsAsJson()
    {            
        return Json(GetPupils(), JsonRequestBehavior.AllowGet);
    }

[AcceptVerbs(HttpVerbs.Post)]
    [HttpPost]
    public void UpdatePupils(Pupil p)
    {
          //never reach here
    }

Answer 1

我不知道为什么，但通过提供架构信息来修复它。

schema: {
        model: {
            id: "Id",
            fields: {
                Firstname: { editable: true, validation: { required: true } },
                Lastname: { validation: { required: true } },
                DateOfBirth: { validation: { required: true } },
                Class: { validation: { required: true } },
                Year: { validation: { required: true } }
            }
        }
    }

Answer 2

使用@Url.Action("GetPupilsAsJson", "Home")'，因此无需像base url一样在更新操作中传递BASEURL+ "Home/GetPupilsAsJson"。

 var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: '@Url.Action("GetPupilsAsJson", "Home")',
                    dataType: 'json'
                },                    
                update: {
                    url:'@Url.Action("UpdatePupils", "Home")',
                    dataType: 'json',
                    type: 'POST'
                }
            },
            pageSize: 5,
            autoSync: true                
        });

Answer 3

使用参数图传递模型值

<script type="text/javascript">

    $(function () {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: '@Url.Action("GetPupilsAsJson", "Home")',,
                    dataType: 'json'
                },                    
                update: {
                    url: '@Url.Action("UpdatePupils", "Home")',
                    dataType: 'json',
                    type: 'POST'
                },
                parameterMap: function (options, operation) {
                   if (operation !== "read" && options.models) {
                      return { models: kendo.stringify(options.models) };
                       }
                }
            },
            pageSize: 5,
            autoSync: true                
        });

使用parameterMap调用Controller

public JsonResult UpdatePupils(string models)
        {

            return Json(..);
        }

Answer 4

您的任何单元格文字是否包含<或>等HTML标记，请将其删除并点击更新。将触发更新事件。

Kendo UI网格更新按钮未触发

4 个答案: