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

Question

I have 5 columns (kendo grid) that gets data from the database. What I'm trying to do is, whenever I add a new row, I want certain columns to be auto populated dynamically.

For example, I have Name, country, state, value, and effDate columns.

Name, country, state fields are editable = false . So users are only able to edit value and effDate fields.

If Name = John, Country = USA, State = Alaska, Value = 123, effDate = 9/11/2019 and when I add a new row, I want Name, country, state fields to be populated with Name - John, Country - USA, State - Alaska. Value and effDate should only be empty so that users can add new data.

I'm currently using template. I tried this to populate country column, but it's not showing anything.

template: "#= Country #"

Is there a way to pre-populate dynamically when create a new row?

Part of my grid codes model:

{
    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}" },
    },

...

part of the columns

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

You can use beforeEdit event to achieve that behaviour. That event is called whenever user tried to edit or create a new entry in the grid. It receives the current model, which you can change according to your needs:

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

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

Demo