How do I get the sorted list back?

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

    Posted 23 May 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">
       </div>
    </script>

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

    Which later gets populated in Javascript:

                this.pObservableContent = kendo.observable({
                    contentDataSource: new kendo.data.DataSource({
                        data: [],
                    }),
                });

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

                // put the list somewhere
                let listHtml = listView.render();
                this.pView.element.find('.contents-list').html(listHtml);

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

    Also, some content gets added later on:

               this.pObservableContent.contentDataSource.data(this.pReportDefinition.contents);

    The user may then re-order the list.

    this.pObservableContent.contentDataSource.data() does not reflect the user selected order. How do I know what the new order is?

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

    Posted 23 May 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
    Admin
    Stefan avatar
    1147 posts

    Posted 25 May Link to this post

    Hello Gerry,

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

    http://dojo.telerik.com/aRUVA

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

    http://docs.telerik.com/kendo-ui/api/javascript/ui/sortable#events-change

    I hope this is helpful.

    Regards,
    Stefan
    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
    12 posts
    Member since:
    May 2017

    Posted 25 May in reply to Stefan Link to this post

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