Template error on undefined item.

[Lyndsy]

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?

[Kiril Nikolov]

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

[Grant]

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

[Kiril Nikolov]

Hi,

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

http://dojo.telerik.com/OLobi

Regards,
Kiril Nikolov
Telerik by Progress

 

 

[Grant]

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

[Kiril Nikolov]

Hi,

Thanks for sharing!

I am glad that the problem is resolved. 

Regards,
Kiril Nikolov
Telerik by Progress

 

 

[Graham]

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?

 

[Graham]

correction:

 

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