Kendo 创建新行时的网格，使用现有行中的值自动填充字段

Question

我有 5 列（kendo 网格）从数据库中获取数据。我想做的是，每当我添加新行时，我希望某些列能够动态自动填充。

例如，我有 Name、country、state、value 和 effDate 列。

姓名、国家、州字段为 editable = false。所以用户只能编辑 value 和 effDate 字段。

如果 Name = John，Country = USA，State = Alaska，Value = 123，effDate = 9/11/2019，当我添加新行时，我希望使用 Name 填充 Name、country、state 字段- 约翰，国家 - 美国，州 - 阿拉斯加。 Value 和 effDate 只能为空，以便用户可以添加新数据。

我目前正在使用模板。我试过用它来填充国家/地区列，但它没有显示任何内容。

template: "#= Country #"

有没有办法在创建新行时动态预填充？

我的部分网格代码模型：

{
    id: "NameKey",
    HouseKey: houseKey,
    fields: {
        Name: { editable: false },
        Country: { editable: false },
        State: { editable: false },
        Value: {
            validation: {
                pattern: {
                    value: "^[0-9.]{0,10}$",
                    message: "Only numbers"
                },
                required: {
                    message: "Value is required"
                },
            }
        },
        EffDate: { validation: { required: true }, type: "date", format: "{0:MM/dd/yyyy}" },
    },

...

部分栏目

columns: [
    { field: "Name", template: "#=(Name== '') ? 'Fields are auto populated' : Name#", title: "Name", width: 250 },
    { field: "Country", template: "#=(Country== '') ? 'Fields are auto populated' : Countr#", title: "Country", width: 210 },
    { field: "State", template: "#=(StateName == '') ? 'Fields are auto populated' : State#", title:"State", width: 200 },
    { field: "Value", title:"Value", width: 200 },
    {
        field: "EffDate", title;"Date", template: "#= kendo.toString(kendo.parseDate(data.EffDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #", width: 140
    },
],

Answer 1

您可以使用 beforeEdit 事件来实现该行为。每当用户尝试 edit 或 create 网格中的新条目时，都会调用该事件。它接收当前模型，您可以根据需要更改它：

beforeEdit: function(e) {
    let model = e.model;

    if (model.isNew()) {
        model.Name = "John";
        model.Country = "USA";
        model.State = "Alaska";
    }
}

Demo

Kendo 创建新行时的网格，使用现有行中的值自动填充字段

Kendo grid when create a new row, auto populate fields with values from existing row

javascript

jquery

kendo-ui

kendo-grid

kendo-asp.net-mvc