This is a migrated thread and some comments may be shown as answers.

Grid column template breaks Create action

1 Answer 139 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brett
Top achievements
Rank 2
Brett asked on 01 Oct 2012, 09:09 PM
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: 'fake.email@nowhere.com', BirthDate: '1/3/1986' },
  { Id: '1', FirstName: 'Sally', MiddleName: 'Mary', LastName: 'Holland', Email: 'fake.email@nowhere.com', 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'
  });
});

1 Answer, 1 is accepted

Sort by
0
Accepted
Vladimir Iliev
Telerik team
answered on 04 Oct 2012, 01:08 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Brett
Top achievements
Rank 2
Answers by
Vladimir Iliev
Telerik team
Share this question
or