XML datasource not getting Kendo UI collapse styling

3 posts, 1 answers
  1. Joel
    Joel avatar
    3 posts
    Member since:
    Apr 2015

    Posted 11 Jul Link to this post

    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. Answer
    Stefan
    Admin
    Stefan avatar
    264 posts

    Posted 13 Jul Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Joel
    Joel avatar
    3 posts
    Member since:
    Apr 2015

    Posted 09 Aug Link to this post

    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.
Back to Top