DataSource Schema Model for Templates

5 posts, 0 answers
  1. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 03 Jun 2015 Link to this post

    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?

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 05 Jun 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 05 Jun 2015 in reply to Vladimir Iliev Link to this post

    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.
  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 09 Jun 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 10 Jun 2015 in reply to Vladimir Iliev Link to this post

    Thanks Vladimir.
Back to Top
Kendo UI is VS 2017 Ready