DataSource Schema Model for Templates

[Ashleigh L]

I'm using Kendo templates for the first time, and used a previous grid example to create a datasource object for my template. As a result, my template datasources all have a schema > model > fields section, which I've determined I (probably?) don't need. The issue I'm having, however, is that attempting to remove these bits of code causes a low-level error in the Kendo JS:

TypeError: e.slice is not a function

..._pristineTotal=a._total,a._pristineData=e.slice(0),a._detachObservableParents(),...


kendo.all.min.js (line 11, col 23501)

Here's the original datasource code:

var datasource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/Controllers/MainController.cfc?method=getConfig",
            type: "get",
            dataType: "json",
            data: {
                ID: id
            }
        }
    },
    schema : {
        type: "json",
        data: "Config",
        model: {
            fields: {
                CategoryIcon: { field: "CategoryIcon", type: "string" },
                Category: { field: "CategoryName", type: "string" },
                Page: { field: "PageName", type: "string" },
                TileVisible: { field: "TileVisible", type: "number" },
                ListVisible: { field: "ListVisible", type: "number" },
                DefaultView: { field: "DefaultView", type: "string" },
                SearchVisible: { field: "SearchVisible", type: "number" },
                GroupByVisible: { field: "GroupByVisible", type: "number" },
                GroupByDefault: { field: "GroupByDefault", type: "string" },
                SortByVisible: { field: "SortByVisible", type: "number" },
                SortByDefault: { field: "SortByDefault", type: "string" },
                TagsVisible: { field: "TagsVisible", type: "number" },
                TagsDefault: { field: "TagsDefault", type: "string" },
                EnrolledVisible: { field: "EnrolledVisible", type: "number" },
                CompletedVisible: { field: "CompletedVisible", type: "number" },
                CatalogueVisible: { field: "CatalogueVisible", type: "number" }
            }
        }
    }
});

And here's some sample JSON returned from the function:

{"Config":{"CatalogueVisible":0,"GroupByVisible":1,"PageName":"Enrolled","TagsVisible":1,"ListVisible"
:1,"SortByVisible":1,"EnrolledVisible":1,"GroupByDefault":"Group","CategoryName":"Category 1","TagsDefault"
:"first tag","SearchVisible":1,"DefaultView":"tile","Tags":[{"Name":"Ceci est une phrase française que
 je suis en train d'utiliser pour tester les caractères spéciaux"},{"Name":"first tag"},{"Name":"random
 tag"},{"Name":"taggggggggg"},{"Name":"taggity"},{"Name":"this is a super long tag to test the new responsive
 learner dashboard for testing purposes wheeeeeee"},{"Name":"นี้เป็นประโยคฝรั่งเศสที่ฉันพยายามที่จะใ
ช้ในการทดสอบตัวอักษรพิเศษ"}],"CompletedVisible":0,"TileVisible":1,"SortByDefault":"Course","CategoryIcon"
:"fa-icon-university"}}

I started off trying to remove the whole model section, but got the error above. I then tried to remove the whole schema section, but got the same error. Then I thought it might be a specific field causing the error, so I went field by field, removing them one at a time until I got the error again. Unfortunately, it doesn't seem to be a specific field, since it's not until I got rid of all of them that there's an error again.

Here's an example of how I'm using these fields in my template:

<div class="row k-block k-block-no-radius">
    <div class="col-xs-12 col-sm-9 action-row padding">
        # if (data.TileVisible == 1) { #
            <a href="\#" onclick="javascript: generateCourseView('tile', #= data.EnrolledVisible #, #= data.CompletedVisible #, #= data.CatalogueVisible #);" data-role="button" class="k-button" role="button" aria-disabled="false" tabindex="0">
                <i class="fa-icon-th-large"></i>
            </a>
        # } #
        # if (data.ListVisible == 1) { #
            <a href="\#" onclick="javascript: generateCourseView('list', #= data.EnrolledVisible #, #= data.CompletedVisible #, #= data.CatalogueVisible #);" data-role="button" class="k-button" role="button" aria-disabled="false" tabindex="0">
                <i class="fa-icon-th-list"></i>
            </a>
        # } #
        <select id="display" class="content-box">
            <option value="Default">Display</option>
            <option value="All">All</option>
            # if (data.EnrolledVisible == 1) { #
                <option value="Enrolled">Enrolled</option>
            # } #
            # if (data.CompletedVisible == 1) { #
                <option value="Completed">Completed</option>
            # } #
            # if (data.CatalogueVisible == 1) { #
                <option value="Catalgoue">Catalogue</option>
            # } #
        </select>
        # if (data.GroupByVisible == 1) { #
            <select id="groupby" class="content-box">
                <option value="Default">Default</option>
                <option value="Category">Category</option>
                <option value="Group">Group</option>
            </select>
        # } #
        # if (data.SortByVisible == 1) { #
            <select id="sortby" class="content-box">
                <option value="Default">Default</option>
                <option value="Course">Course</option>
                <option value="DueAsc">Due (asc)</option>
                <option value="DueDesc">Due (desc)</option>
            </select>
        # } #
        # if (data.TagsVisible == 1) { #
            <select id="category" class="content-box">
                <option value="Default">Default</option>
                # for (t = 0; t < data.Tags.length; t++) { #
                    <option value="#= data.Tags[t].Name #">#= data.Tags[t].Name #</option>
                # } #
            </select>
        # } #
    </div>
    <div class="clearfix visible-xs-block"></div>
    # if (data.SearchVisible == 1) { #
        <div id="search" class="col-xs-12 col-sm-3 action-row padding pull-right xs-margin-up">
            <span class="k-textbox k-button k-space-left col-xs-12 search-box">
                <i class="fa-icon-search"></i>
                <input value="Search..." />
            </span>
        </div>
    # } #
</div>

I'm guessing it has something to do w/ the boolean checks I'm using in the template, but I'm not sure how to cast the values as booleans w/o using the schema model. 

So two questions - do I need to have the schema model for a template? And if not, how do I prevent the errors I'm receiving when I remove it?

[Vladimir Iliev]

Hello,

From the provided information it's not clear for us how exactly you are binding the dataSource data to the template - could you please provide runable example where the issue is reproduced (you can simulate the server response as shown in this demo)? This would help us pinpoint the exact reason for this behavior.

Regards,
Vladimir Iliev
Telerik

 

 

[Ashleigh L]

I've updated the example - it looks like it saves automatically? Hope so! Anyway, I've got it in a state that's functioning the same way my page is - the dropdowns are all generated and filled, then 'Kendo-ized'. If you remove the model section, you should get the same error in the console that I've been seeing on my end.

[Vladimir Iliev]

Hello,

The reason for current behavior is that the nested object "Config" in the response doesn't contain array but object. You can remove the model definition if you can return the contents of this object as array:

e.success({
    "Config": [{
        "CatalogueVisible": 0,
        "GroupByVisible": 1,
        "PageName": "Enrolled",
        "TagsVisible": 1,
        "ListVisible": 1,
        "SortByVisible": 1,
        "EnrolledVisible": 1,
        "GroupByDefault": "Group",
        "CategoryName": "Category 1",
        "TagsDefault": "first tag",
        "SearchVisible": 1,
        "DefaultView": "tile",
        "Tags": [{
            "Name": "Ceci est une phrase française que je suis en train d 'utiliser pour tester les caractères spéciaux"
        }, {
            "Name": "first tag"
        }, {
            "Name": "random tag "
        }, {
            "Name": "taggggggggg "
        }, {
            "Name ": "taggity "
        }, {
            "Name ": "this is a super long tag to test the new responsive learner dashboard for testing purposes wheeeeeee "
        }, {
            "Name ": " นี้ เป็ นประโยคฝรั่ งเศสที่ ฉั นพยายามที่ จะใ ช้ ในการทดสอบตั วอั กษรพิเศษ "
        }],
        "CompletedVisible ": 0,
        "TileVisible ": 1,
        "SortByDefault ": "Course ",
        "CategoryIcon ": "fa - icon - university "
    }]
});

Regards,
Vladimir Iliev
Telerik

 

 

[Ashleigh L]

Thanks Vladimir.