Kendo Grid Complex Object Binding Error

I bind to list of columns, some of them are complex like "ProfileDetails" property.
If we bind to a complex column like “ProfileDetails.FullAddress” while “ProfileDetails” object is null in received data
we get an exception on JavaScript code and no data appear.


Here is My Code Demo To Explain my problem :
 var list= [{
        "EmployeID": "1",
        "ProfileDetails":
            {
                "id": 1,
                "FullAddress": "4 u st.,uk"
            },
 "isAdmin": false},{
        "EmployeID": "2",
        "ProfileDetails":null,
 "isAdmin": true}];
  var tempSource = new kendo.data.DataSource({
        data: list,});
$("#grid").kendoGrid({
        dataSource: tempSource,
        columns: [{field:"EmployeID",title:"ID"},{field:"ProfileDetails.FullAddress",title:"Address"}],});

 Solutions:

1- You can fix it without touch kendo.all.min.js script file as following

By setting template for the field like "template": "#= ProfileDetails && ProfileDetails.FullAddress ? ProfileDetails .FullAddress : 'default empty value' #" 

2-      Modifying Kendo UI All Script by adding my own  fix on script and made function

To add more conditions to kendo ui grid default value check

         for example if we have field  "data.Person.Profile.Address.Name" kendo made condition only to this filed

        like data.Person.Profile.Address.Name == null  and didnt made condition to parent objects

        so my function add more condionts (data == null || data.Person == null || data.Person.Profile == null || data.Person.Profile.Address == null ||)

       

kendo.FixFieldObjectsConditions = function (field) {

            var conditions = "";

            for (var i = 0; i < field.length; i++) {

                if (field[i] === ".") {

                    conditions += field.substring(0, i) + "== null||";

                }

            }

            return conditions;

        }

2 3-      To add  datasource schema parser function that make sure of properties is not null

    var tempSource = new kendo.data.DataSource({

        data: list,

        pageSize: 20,

        /*Solution 2

        schema: {

            parse: function (d) {

                $.each(d, function (idx, item) {

                    if (item.responder == null) {

                        item.responder = {}

                    }

                });

                return d;

            }

        }*/

        });

34 -      make sure object is filled with default values in server method before return to client JavaScript .