Template with nested properties

[Volker]

Hi, 

during evaluation of the KEndo library, I am now facing the next problem which I spent a lot time with now...

I try to create a listview. My viewmodel contains references to other classes, let's say I have a model class Person, which contains a property Address of type Address, which again has properties "Street" and "City".

So, I defined my template like this (also my editor template):

<script type="text/x-kendo-tmpl" id="template">
     <div>
       <dl>
         <dt>Street</dt> <dd>${Address.Street}</dd>
         <dt>City</dt> <dd>${Address.City}</dd>
       </dl>
     </div>
 </script>

But this leads to JavaScript exceptions, saying that the property is undefined. How can I handle this? Any idea is welcome, but this really a serious problem with complex data models. I cannot reduce my viewmodel to only have primitive properties, that woud cause too much effort...

Thanks!

[Petur Subev]

Hello Volker,

Could you share with us how your data that is used by the ListView looks like? It sounds like that these properties are not serialized at all.

You can try the following code in the browser console to see how the data by the ListView actually looks like.

JSON.stringify($('.k-listview').data().kendoListView.dataSource.data())

Could you share your results it with us? If you do not have these Street and Address objects as fields then they are not coming from the server at all  which means you cannot display them on the client.

Kind Regards,
Petur Subev
the Telerik team

[Volker]

HI Petur,

thanks for the reply, and also for the hint regarding the console command. You were right - I had a Problem with the consistency of the database, which is now fixed. But the Problem remains when I create a new item. Then I get an exception in the following line of code:

var o,e=kendo.htmlEncode;with(data){o='\n <div class="product-view">\n
<dl>\n <dt>Na,e</dt>\n <dd>'+(e(Name))+'</dd>\n
<dt>Street</dt>\n <dd>'+(e(Address.Street))+'</dd>\n
<dt>Street</dt>\n <dd>'+(e(Address.City))+'</dd>\n
</dl>\n <div class="edit-buttons">\n <a class="k-button
k-button-icontext k-edit-button" href="\#"><span class="k-icon
k-edit"></span>Edit</a>\n <a class="k-button k-button-icontext
k-delete-button" href="\#"><span class="k-icon
k-delete"></span>Delete</a>\n </div>\n
</div>\n';}return o;

The exception is "Address is undefined", which is of course true when I just create a new object - I have then a new object of type "Person", and of course the property "Address" of the Person is null...

How can I handle such a Situation? I wonder that not many other People have the same problem, because displayig a class that contains another class is probably not unusual...

Thanks in advance,
Volker

[Petur Subev]

Hello Volker,

Basically such problems when creating new records on the client are handled with creating default value - so the object is not null when it is created.

Could you try to specify new value? 

e.g.

http://docs.kendoui.com/api/framework/datasource#configuration-schema.model-Objectkendo.data.Model

.DataSource(dataSource => dataSource
        .Ajax()
            .Model(model => {
                model.Id(p => p.ProductID);
                model.Field(f=>f.YourObject).DefaultValue(...)
            })

Kind regards,
Petur Subev
the Telerik team

[Volker]

Thanks, that worked! But where did you find the code snippet that you pasted in your post? In the link you gave me I did not find the Information...

[Petur Subev]

Hello Volder,

The link I shared is for the general case (without using any wrappers - pure JavaScript) when using the MVC wrappers the equivalent is covered here and in the API Reference:

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/configuration#model

Kind Regards,
Petur Subev
the Telerik team