Kendo网格：如何创建在添加新行而不是在编辑时执行一些任务

Question

In my KendoGrid I want to add default value for input field in my popup form.

I have created a function that I intend to call on clicking Create button, but the following function does not work. I searched a lot but could not find any help, so it would nice if someone can give me a hint where the problem is.

 function add_m(e) {
    debugger;
    $("#DeviceIP").val("123");
}
$("#turbingrid").kendoGrid({
     //   debugger;

     dataSource: dataSource,
     scrollable: false,
     //toolbar: ["create"],
     toolbar: [
                  {name: "create",text: "add new turbine"}
              ],
     columns: [
                  { field: 'DeviceIP', title: 'DeviceIP', width: '100px', id: 'DeviceIP' },
                  { field: 'Producer', title: 'Producer', width: '80px', id:'Producer'},//editor: ProductNameDropDownEditor,
                  { field: 'Model', title: 'Model', width: '220px',id:'Model' },
                  { field: 'DeviceType', title: 'DeviceType', width: '100px', editor: deviceTypesList },
                  { field: 'Description', title: 'Description', width: '220px' },
                  { field: 'Username', title: 'Username', width: '120px' },
                  { field: 'Password', title: 'Password', width: '100px' },
                  { field: 'PublicIP', title: 'PublicIP', width: '120px' },
                  { field: 'TurbineId', title: 'TurbineId', width: '120px', hidden: true },
                  { field: 'device_id', title: 'device_id', width: '120px', hidden: true },
                  { field: 'ModelProducer', title: 'Producer/Model', hidden: true, editor: modelProducer },
                  {command: ["edit"], title: " "}
             ],
        //{
        //    command: [
        //                 {
        //                     name: "Edit",
        //                     click: function (e) {
        //                             temp = $(e.target).closest("tr"); //get the row
        //                     }
        //                 }
        //             ]
        //}


     editable: "popup",
     create:add_m,

Answer 1

to assign val or attribute dynamically use

edit :

edit: function(e) {
    if (e.model.isNew()) {
       e.container.find("input[name=test]").val(5555); // name changed, but worked for me
      // e.container.find("input[name=device_id]").val(123);
    }
}

or

beforeEdit :

beforeEdit: function(e) {
    if (e.model.isNew()) {
      $("#DeviceIP").val("123");
    }
}

Answer 2

You can use the beforeEdit event, not create . It fires when the create button is clicked in the toolbar.

Answer 3

Here is the working DEMO .

Below is the code snippet that pastes the default value for DeviceIP on Add row event .

$("#turbingrid").kendoGrid({
....
.........
//ON CLICK ADD/EDIT BUTTON FOR PRODUCT ITEM
        edit: function(e) {

            // CHANGE ADD/EDIT PRODUCTITEM POPUP FORM TITLE
            if (e.model.isNew()) //ON ADD NEW
            {
                $(".k-window-title").text("Add New Turbine");
                // HERE e.container IS THE ADD/EDIT POPUP FORM ELEMENT
                e.container
                    .find("[name=DeviceIP]") // get the span element for the field
                    .val("123") // set the value
                .change(); // trigger change in order to notify the model binding

            } 
            else // ON EDIT
            {
                $(".k-window-title").text("Edit Turbine");
            }
        }
........
....
});

Here is the complete code from the DEMO fiddle.

(function () {



      var dataSource = new kendo.data.DataSource({
            data: {
                id: 1,
                DeviceIP: "192.168.1.1",
                Producer: 'Producer',
                Model: 'Model',
                DeviceType: 'DeviceType',
                Description: 'Description',
                Username: 'Username',
                Password: 'Password',
                PublicIP: '216.168.123.156',
                TurbineId: 1,
                device_id: 2,
                ModelProducer: 'ModelProducer',
            },
            schema: {
                model: {
                    id: 'id',
                    fields: {
                        DeviceIP: {},
                        Producer: {},
                        Model: {},
                        DeviceType: {},
                        Description: {},
                        Username: {},
                        Password: {},
                        PublicIP: {},
                        TurbineId: {},
                        device_id: {},
                        ModelProducer: {},

                    }
                }
            }
        });


    $('#grid').kendoGrid({
     dataSource: dataSource,
     scrollable: false,
     //toolbar: ["create"],
     toolbar: [
                  {name: "create",text: "add new turbine"}
              ],
     columns: [
                  { field: 'DeviceIP', title: 'DeviceIP', width: '100px', id: 'DeviceIP' },
                  { field: 'Producer', title: 'Producer', width: '80px', id:'Producer'},//editor: ProductNameDropDownEditor,
                  { field: 'Model', title: 'Model', width: '220px',id:'Model' },
                  { field: 'DeviceType', title: 'DeviceType', width: '100px' },
                  { field: 'Description', title: 'Description', width: '220px' },
                  { field: 'Username', title: 'Username', width: '120px' },
                  { field: 'Password', title: 'Password', width: '100px' },
                  { field: 'PublicIP', title: 'PublicIP', width: '120px' },
                  { field: 'TurbineId', title: 'TurbineId', width: '120px', hidden: true },
                  { field: 'device_id', title: 'device_id', width: '120px', hidden: true },
                  { field: 'ModelProducer', title: 'Producer/Model', hidden: true },
                  {command: ["edit"], title: " "}
             ],
        editable: 'popup',
        //ON CLICK ADD/EDIT BUTTON FOR PRODUCT ITEM
        edit: function(e) {

            // CHANGE ADD/EDIT PRODUCTITEM POPUP FORM TITLE
            if (e.model.isNew()) //ON ADD NEW
            {
                $(".k-window-title").text("Add New Turbine");
                // HERE e.container IS THE ADD/EDIT POPUP FORM ELEMENT
                e.container
                    .find("[name=DeviceIP]") // get the span element for the field
                    .val("123") // set the value
                .change(); // trigger change in order to notify the model binding

            } 
            else // ON EDIT
            {
                $(".k-window-title").text("Edit Turbine");
            }
        }
    });
})()