How do I get the sorted list back?

4 posts, 1 answers
  1. Gerry
    Gerry avatar
    26 posts
    Member since:
    May 2017

    Posted 23 May 2017 Link to this post

    I have a templated list:

    <script type="text/x-kendo-tmpl" id="xts-contents-detail-template">
       <div id='contents-list-sortable' data-role="listview sortable" data-template="xts-content-item-template" data-selectable="single"
            data-bind="source: contentDataSource">

    <script type="text/x-kendo-tmpl" id="xts-content-item-template">
          <h5> <span data-bind='text: name'> </span> </h5>
          <span data-bind='text: description'> </span>

    Which later gets populated in Javascript:

                this.pObservableContent = kendo.observable({
                    contentDataSource: new{
                        data: [],

                let listView = new kendo.View('#xts-contents-detail-template', {
                    model: this.pObservableContent,

                // put the list somewhere
                let listHtml = listView.render();

                // make the list sortable
                // this.pView.element.find('#contents-list-sortable').kendoSortable({

    Also, some content gets added later on:


    The user may then re-order the list. does not reflect the user selected order. How do I know what the new order is?

  2. Gerry
    Gerry avatar
    26 posts
    Member since:
    May 2017

    Posted 23 May 2017 in reply to Gerry Link to this post

    I ended up using the change event to manually update the data source every time the user moved an item in the list. Is that the only way to know what the order should be?

    [This strikes me as a bit odd; the most important part of an ordered list is knowing what the order is... yet what example makes use of a re-ordered list? Can't find one.]

  3. Answer
    Stefan avatar
    1878 posts

    Posted 25 May 2017 Link to this post

    Hello Gerry,

    In this scenario I can suggest checking our example of the ListView with a Sortable widget:

    Notice how on the change event of the Sortable, the oldIndex and the newIndex can be retrieved:

    I hope this is helpful.

    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Gerry
    Gerry avatar
    26 posts
    Member since:
    May 2017

    Posted 25 May 2017 in reply to Stefan Link to this post

    thanks, yes I am using the change event as well
Back to Top