XML datasource not getting Kendo UI collapse styling

[n/a]

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>

[Stefan]

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

[n/a]

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.