0

我在数据库中有两个视图。奖金和员工。一对多(奖金)。我有 kendo ui 网格(kendo web),它显示来自名为 Bonuses 的控制器的 ajax 结果和一个自动编译元素 - Employee Combobox 与网格的 Employee 字段绑定。

在此处输入图像描述

网格的数据源:

        // bind json result from /Bonuses/GetPagedJsonBonuses
        var bonusesDataSource = new kendo.data.DataSource({
            transport: {                        
                read: "@Url.Action("GetPagedJsonBonuses", "Bonuses")",
                update: {
                    url: "@Url.Action("Edit", "Bonuses")",
                    type: "PUT"
                },
                create: {
                    url: "@Url.Action("Create", "Bonuses")",
                    type: "POST"
                },
                parameterMap: function(options, operation) {
                    if (operation === "update" || operation === "create") {
                        // updates the BonusDTO.EmployeeId with selected value
                        if (newValueEmployeeId !== undefined)
                            options.EmployeeId = newValueEmployeeId;
                    }
                    return options;
                }
            },                    
            schema: {
                data: "Data", // PagedResponse.Data
                total: "TotalCount", // PagedResponse.TotalCount
                model: {
                    id: "BonusId",  // Data
                    fields: {
                        EmployeeId: { type: "number" },
                        EmployeeLastName: {
                            type: "string",
                            editable: true, 
                            //validation: { required: {message: "Employee's last name is required"}}
                        },
                        Amount: {
                            type: "number",
                            editable: true,
                            nullable: false,
                            validation: {
                                required: { message: "Amount is required to be set" }
                            }
                        }                           
                    } // fields
                } // model
            }// schema 
        });

网格元素如下所示:

// creates bonuses grid control
                $("#bonusesGrid").kendoGrid({
                    dataSource: bonusesDataSource,
                    toolbar: ["create"],
                    editable: "inline",                                        
                    columns: [
                        "BonusId",                                                         
                        "EmployeeId",                                                    
                        {
                            field: "EmployeeLastName",                                                        
                            editor: employeeAutocompletingEditor,
                            template: "#=EmployeeLastName#"
                        },
                        "Amount",                        
                        {
                            command: ["edit"],
                            title: " "
                        }
                    ],
                    save: function(e) {
                        if (newValueEmployeeId !== undefined && newValueEmployeeLastName !== undefined) {
                            e.model.EmployeeId = newValueEmployeeId; // it's a hack to bind model and autocomplete control
                            e.model.EmployeeLastName = newValueEmployeeLastName;
                        }
                    },
                    edit: function(e) {
                        setCurrentValueEmployeeIdAndLastName(e.model.EmployeeId, e.model.EmployeeLastName);
                    },
                    cancel: function(e) {
                        setCurrentValueEmployeeIdAndLastName(e.model.EmployeeId, e.model.EmployeeLastName);
                    }
                });

自动完成组合框有它自己的使用 ajax 的数据源:

// datasource for autocomlete combobox to lookup employees names from
                var employeesDataSource = new kendo.data.DataSource({                    
                    transport: {
                        read: "@Url.Action("GetJsonEmployeesByLastName", "Bonuses")",
                    },                    
                    parameterMap: function(options, operation) {
                        if (operation === "update" || operation === "create") {
                            setNewValueEmployeeIdAndLastName(options.Id, options.LastName);
                        }
                        return options;
                    },                    
                });

自动编译组合框看起来像这样:

function employeeAutocompletingEditor(container, options) {
                    $('<input required data-text-field="LastName" data-value-field="EmployeeId" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoComboBox({                            
                            // sets the local variables to update values of current row.
                            change: function() {
                                setNewValueEmployeeIdAndLastName(this.value(), this.text());
                            },
                            dataBinding: function (e) {                                
                                console.log("dataBinding: ", e, this.dataItem());
                            },
                            dataBound: function (e) {
                                console.log("dataBound: ", e, this.dataItem());
                            },
                            dataSource: employeesDataSource
                        });
                }

我使用编辑器绑定将值(EmployeeId)和文本(EmployeeLastName)从网格传递到组合框。我还使用类似时间变量(newValueEmployeeId,currentValueEmployeeId)的技巧将选定的员工发送到组合框中,并将其传递给网格以进行正确保存。A 发现将值传回网格是最常见的做法。

我的问题是:如果我第一次按网格上的编辑按钮组合框从网格行显示当前员工的姓名:

在此处输入图像描述

如果我按下取消按钮并再次按下编辑按钮,组合框不显示网格的当前值(员工姓名)如果我输入一些名称,更改一些其他值和 Udate(保存)值,下次组合框再次显示员工姓名,但在按下取消之前只有一次。

在此处输入图像描述

我是剑道 UI 的新手,这个问题让我发疯......我认为组合框失去了它的绑定或不更新。我尝试在 onBound 和 onBinding 事件时设置值,但这无济于事。请帮助我提供建议和示例。

PS所有事件和功能是我尝试调试和寻找解决方案。

4

1 回答 1

0

只有一个修复帮助了我:

var employeeList = new List<Employee>()
employeeList.add(new Emplpyee())  // add fake employee record.

return Json(employeeList)

我不知道为什么,但是如果我返回空的员工列表或 null,网格控件开始循环空的 ajax 请求。这不起作用:

return Json(new List<Employee>());
return Json(null);

我认为这是剑道组合框本身的问题,因为它还没有准备好接收和处理空列表或 null 作为 json 结果。我还听到一些消息,JQuery 不再支持空或空结果......也许这就是原因

于 2013-04-19T12:22:52.190 回答