Grid column template breaks Create action

[Brett]

I have a column field named Email in a datasource of Users. When I apply a template to the field (i.e. "<a href="mailto:#=Email#">#=Email#</a>"), and I click the Add new record button on the toolbar, I get an error stating that the field named Email is undefined. When I remove the template, the create action works like it should.

Here is the code that recreates the error:

/// <reference path="_references.js" />

 

var users = [

  { Id: '0', FirstName: 'Bruce', MiddleName: 'Ethan', LastName: 'Fletcher', Email: '[e-mail]', BirthDate: '1/3/1986' },

  { Id: '1', FirstName: 'Sally', MiddleName: 'Mary', LastName: 'Holland', Email: '[e-mail]', BirthDate: '7/12/1990' }

];

 

$(function () {

  var userViewModel = new kendo.data.Model.define({

    id: 'Id',

    fields: {

      Id: { editable: false, defaultValue: '9999' },

      FirstName: { editable: true, nullable: false, validation: { required: true} },

      LastName: { editable: true, nullable: false, validation: { required: true} },

      MiddleName: { editable: true, nullable: false },

      Email: { editable: true, nullable: false, type: 'email', validation: { required: true} },

      BirthDate: { editable: true, nullable: false, type: 'date' }

    }

  });

 

  var userDataSource = new kendo.data.DataSource({

    data: users,

    schema: {

      model: userViewModel

    },

    pageSize: 5

  });

 

  $('#user_grid').kendoGrid({

    dataSource: userDataSource,

    toolbar: [{ name: 'create'}],

    columns: [

      { field: 'FirstName', title: 'First Name' },

      { field: 'MiddleName', title: 'Middle Name' },

      { field: 'LastName', title: 'Last Name' },

      { field: 'Email', title: 'Email Address', template: '<a href="mailto:#=Email#">#=Email#</a>', encoded: false }, // !! apply a template to break create !!

      { field: 'BirthDate', title: 'Birth Date', format: '{0:MM/dd/yyyy}' },

      { command: [{ name: 'edit', text: '' }, { name: 'destroy', text: ''}], title: '', width: '86px' }

    ],

    pageable: {

      refresh: true

    },

    editable: 'popup'

  });

});

[Vladimir Iliev]

Hi Brett,

 

After reviewing the provided code it seems that the issue comes from invalid model definition - the email field data type is set to "email" but the possible values are string,boolean,number and date. You should change the data type to string, and if you need to validate the field for email input, you can add email:true to the validator.

e.g.:

Email: { editable: true, nullable: false, type: 'string', validation: { required: true , email: true} },

Kind Regards,
Vladimir Iliev
the Telerik team