How do I add an HTML element to a specific location in listview of kendo ui after the datasource has been loaded?

Question

I am working on an app that I am using telerik platform to build it. I am down to the last bit, in which I want to add a 'li' element as the second one in order to put html in it. I dont need the data source for this block for it will be strictly HTML and CSS no data.

Here is what I have for the page:

<div data-role="view" data-layout="main" id="top" data-title="Headlines" data-model="viewModel[0]">
    <ul data-role="listview" data-style="inset" class="newslist" data-template="storyList-template" data-bind="source: newsItems, events: { click: selectHeadline }"></ul>
</div>

And here is my template for the list:

<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>

<script type="text/x-kendo-template" id="storyList-template">
    <a href="\\#">
        <div class="storyImg #: id #" style=" background-image: url( #:thumbnail# ); margin-top: 0;">
        </div>
        <div class="blackBox">
            <div class="storyTitle">#: trunc_title #</div>
            <div class="timeStamp">#: list_date #</div>
        </div>                
    </a>
</script>

And here is a mock database: (In my actual code I am reading it in from another url)

{
    "newsItems": [
        {
            "id": 1,
            "trunc_title": "Title for 1",
            "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id placerat nisl. In finibus scelerisque tempor. Nunc eleifend quam risus, lacinia fermentum dui tincidunt gravida. </p>",
            "list_date": "2015-10-31 11:08:00",
            "thumbnail": "http://example.com/image.jpg"
        },
        {
            "id": 2,
            "trunc_title": "Title for 2",
            "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id placerat nisl. In finibus scelerisque tempor. Nunc eleifend quam risus, lacinia fermentum dui tincidunt gravida. </p>",
            "list_date": "2015-10-31 11:08:00",
            "thumbnail": "http://example.com/image.jpg"
        },
        {
            "id": 3,
            "trunc_title": "Title for 3",
            "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id placerat nisl. In finibus scelerisque tempor. Nunc eleifend quam risus, lacinia fermentum dui tincidunt gravida. </p>",
            "list_date": "2015-10-31 11:08:00",
            "thumbnail": "http://example.com/image.jpg"
        },
    ]
}

I want to add a list item below the 1st line that says "Top Stories" with a blue background and the links to the social media sites. I have tried to google it without any success, I don't know if I am not using the proper terminology or what. Any help would be very appreciated. Also here is a pic to make it a little more clear on what I want:

Thank you for your help!

Lars Höppner · Accepted Answer · 2015-03-14T14:29:44.083

3

You can do something like this:

$("#listView").kendoListView({
    dataSource: dataSource,
    template: kendo.template($("#template").html()),
    dataBound: function() {
        this.wrapper.children().eq(0).after("<div class='product'>my content</div>");
    }
});

or, since you're using declarative initialization, change your binding:

data-bind="source: newsItems, 
           events: { click: selectHeadline, dataBound: onDataBound }"

(where onDataBound would contain the same code as above).

For a mobile list view, you'd want to insert an <li> element instead, e.g. using an onDataBound method in your view model:

var viewModel = new kendo.observable({
  newsItems: new kendo.data.DataSource({
    data: data.AllArticles
  }),
  selectedStory: {},
  selectHeadline: function(e) {
    e.preventDefault();
    var story = e.dataItem;
    story.dateString = story.date.toLocaleDateString();
    viewModel.set("selectedStory", story);
    app.navigate("#detailsPage");
  },
  onDataBound: function (e) {
    console.log(e.sender)
    e.sender.element.children().eq(1).after('<li class=\'product\'>my content</li>');
  } 
});

used by the view:

<ul id ="homeList" 
 data-role="listview" data-style="inset" class="newslist" 
 data-template="storyList-template" 
 data-bind="source: newsItems, events:{click: selectHeadline, dataBound: onDataBound}">
</ul>

(demo)

edited Mar 14 '15 at 14:29

answered Feb 28 '15 at 00:32

Lars Höppner

18,252
2
45
73

dataBound is the right event but keep in mind that it would be called more than once if you use server paging. – The_Black_Smurf Feb 28 '15 at 00:38
if you only want to insert it on the first page, you can do it conditionally (inspect dataSource.page()) – Lars Höppner Feb 28 '15 at 00:55
I changed it to this : "
" and the console says that the dataBound is not supported by the ListView widget
– kingcobra1986 Mar 06 '15 at 22:36
create a demo please, it should work: http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/listview#events-dataBound – Lars Höppner Mar 07 '15 at 02:28
Sorry it took a while but here is my demo: http://jsbin.com/naxolu/2/edit?html,css,js,output – kingcobra1986 Mar 13 '15 at 15:33
see edit; you should add handlers to your view model – Lars Höppner Mar 14 '15 at 14:30
Is there documentation on how to use using declarative initialization? – kingcobra1986 Mar 20 '15 at 05:56
depends on what you're looking for, there are a few links on this page: http://docs.telerik.com/kendo-ui/basics/markup – Lars Höppner Mar 20 '15 at 17:30

How do I add an HTML element to a specific location in listview of kendo ui after the datasource has been loaded?

1 Answers1