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

Template error on undefined item.

7 Answers 1553 Views
Templates
This is a migrated thread and some comments may be shown as answers.
Lyndsy
Top achievements
Rank 1
Lyndsy asked on 23 Jun 2013, 11:40 PM
I am having an issue with the template system

my datasource is volatile by design to allow for maximum flexibility. Everything works great except I have one problem. If an item is undefined it ceases to render any other items if a template is applied. I will use a grid object to explain.

$("#grid").kendoGrid({
                dataSource: dataSource,
                groupable: true,
                sortable: true,
                pageable: {                   
                    pageSizes: true
                },
                columns: [{
                    field: "FirstName",                   
                    title: "First Name"                   
                }
                ,
                {
                    field: "LastName",                   
                    title: "Last Name"
                }
                ,
                {
                    field: "City"
                }
                ,
                {
                    field: "Title"
                }
                ,
                {
                    field: "BirthDate",
                    title: "Birth Date",
                    template: '#: FormatDate(BirthDate,"dd MMMM yyyy") #'
                }
                ,
                {
                    field: "Age"
                }
                ]
            });

Incoming Data
[
{"FirstName":"John","LastName":"Smith","City":"Smalltown","Title":"AR","BirthDate":"1984-07-16T05:00:00Z","Age":28},
{"FirstName":"John","LastName":"Smith","City":"Smalltown","Title":"AR","BirthDate":"1984-07-16T05:00:00Z"},
{"FirstName":"John","LastName":"Smith","City":"Smalltown","Title":"AR"}
]

If the template is not set it works as expected non existing members are not shown and everything is hunky dory. But with the template an error gets thrown when it can find BirthDate and stops rendering the grid.
ReferenceError: BirthDate is not defined
 
kendo.all.js Line 281 : return new Function(argumentName, functionBody);


I've tried doing an if statement in the template to return null if the object is undefined but that didn't seem to make a difference.

Any thoughts on possible workarounds?

7 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 25 Jun 2013, 10:26 AM
Hello Lyndsy,

 The problems comes from the fact that when you do not have "BirthDate" field in your DataSource, then it is evaluated as "undefined". When using Kendo UI Templates you are allowed to write JavaScript expressions in order to format the data in a proper way. This is why I would suggest you the following template, where you check if you have BirthDate and return an empty string if it is undefined:

template:  "#= (data.BirthDate) ? kendo.toString(BirthDate, 'dd MMMM yyyy') : '' #"
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Grant
Top achievements
Rank 2
Veteran
Iron
answered on 09 Nov 2016, 11:55 AM

Hi Kiril, 

Is there a way to do this for a boolean value?
The above template displays blank if my boolean is false or undefined. I'd like it to display 'No' instead.

Code: 

template: "#= (data.global) ? global.getYesNo() : '' #"

*assume that getYesNo() returns a string, 'Yes' or 'No'

Thanks,
Grant

0
Kiril Nikolov
Telerik team
answered on 10 Nov 2016, 08:41 AM
Hi,

Please check the following sample and let me know if it helps:

http://dojo.telerik.com/OLobi

Regards,
Kiril Nikolov
Telerik by Progress
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
0
Grant
Top achievements
Rank 2
Veteran
Iron
answered on 10 Nov 2016, 09:29 AM

Hi Kiril,

Thanks for the response. You example unfortunatly didnt help, but while I was duplicating the error in Dojo, I was able to solve the problem :)

Heres the sample for interest sake http://dojo.telerik.com/OLobi/2.

Thanks anyway,
Grant

0
Kiril Nikolov
Telerik team
answered on 10 Nov 2016, 12:53 PM
Hi,

Thanks for sharing!

I am glad that the problem is resolved. 

Regards,
Kiril Nikolov
Telerik by Progress
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
0
Graham
Top achievements
Rank 1
answered on 27 Feb 2018, 04:18 PM

Hi, just to put my 2 pence in, I am increasingly finding my templates littered with:

#= (typeof area == "undefined" || area == null) ? '' : 'No Area' #

The typeof check is needed if populating at runtime.  Isn't this the type of boilerplate stuff that you should do in your template renderer? 

The template renderer throwing an error if the property is null is also irritating; surely just return an empty string? 

Lots of REST frameworks remove null properties from returned objects to reduce wire overhead and this just makes the client fragile.

Whilst I understand previous responses and your philosophy of "fastest possible", but surely the overhead of doing an eval on a javascript block (#= rather than #:) is more than the overhead of the template engine just doing a hasOwnProperty on the bound object and returning an empty string if not found?

 

0
Graham
Top achievements
Rank 1
answered on 27 Feb 2018, 04:22 PM

correction:

 

#= (typeof area == "undefined" || area == null) ? '' : area #

Tags
Templates
Asked by
Lyndsy
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Grant
Top achievements
Rank 2
Veteran
Iron
Graham
Top achievements
Rank 1
Share this question
or