This is a migrated thread and some comments may be shown as answers.

XML datasource not getting Kendo UI collapse styling

2 Answers 84 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
n/a
Top achievements
Rank 1
n/a asked on 11 Jul 2016, 02:55 PM

I have the following code adding xml datasource to a template. The data comes over but is not formatted as a collapse ui. This is in Appbuilder hybrid ui.

<div data-role="view" data-title="Events" data-layout="main" data-model="app.eventView" data-show="app.eventView.onShow" data-after-show="app.eventView.afterShow">
 
    <!-- START_CUSTOM_CODE_eventView -->
    <!-- Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes -->
    <div class="msf-event-header">
    
    </div>
 
 
            <div id="msf-events" data-use-native-scrolling="true"></div>
 
            <script id="msf-event-template" type="text/x-kendo-template">
                <div data-role="collapsible">
                    <h3><span class="event-title">#= title #</span><span class="event-date">#= date #</span> <span class="event-location">#= location #</span><span></span></span></h3>
                    <p>#= body #</p>
                    <p>
                     <a href="" data-role="button" data-animated="true" clas="km-primary">Add to Calendar</a> <a href="" data-role="button" data-animated="true" clas="km-primary">Get Tickets</a>
                    </p>
                </div>
            </script>
 
 
            <script>
                 
  
                    function onChage() {
                        $("#msf-events").html(kendo.render(template, this.view()));
                    }
 
                    var template = kendo.template($("#msf-event-template").html());
                 
                    var dataSource = new kendo.data.DataSource({
                        transport: {
                            read: "http://msf.bitphaser.com/?q=msf-events"
                        },
                        schema: {
                            type: "xml",
                            data: "/events/event",
                            model: {
                                fields: {
                                    title: "title/text()",
                                    date: "field_date/text()",
                                    location: "field_location/text()",
                                     body: "body/text()",
                                }
                            }
                        },
                        change: onChage
                    });
 
                    dataSource.read();
 
            </script>
 
     
    
    <!-- END_CUSTOM_CODE_eventView -->
</div>

2 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 13 Jul 2016, 02:56 PM
Hello Joel,

I noticed that the data in the provided code snippet comes in JSON format, while the Kendo UI DataSource configuration expects XML response.

I changed the DataSource configuration to match the server response and tested the provided example, but I was not able to reproduce the issue where the data is not styled correctly after collapsing.

Please check the following information regarding the styling of the Kendo UI hybrid components:

http://docs.telerik.com/kendo-ui/controls/hybrid/styles/styling

If this is not helpful, please send a runnable AppBuilder application that reproduces the issue.

Regards,
Stefan
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
0
n/a
Top achievements
Rank 1
answered on 09 Aug 2016, 01:37 PM
In this instance, I ended up following the weather app where a kendo template is created and json is imported. Imports were taking a really long time so now i'm using the built in content types provided by Telerik.
Tags
Data Source
Asked by
n/a
Top achievements
Rank 1
Answers by
Stefan
Telerik team
n/a
Top achievements
Rank 1
Share this question
or