0

I have a json object which I am binding with a Listbox. In the UI I have the moveUp/movedown functionality in which user can reorder the positions of the items in the listbox. I have written a custom sorting functionality which would sort the items based on ordinal property and binds with the listbox.

In the MoveUp funtion, after changing the ordinal positions of the listbox items, still the sorting doesn't happen i.e. positions of the items are not re-arranged. What I am missing here ?

Please find the code in plunker

 MoveUp()
    {
        var selectedOrdinal = this.selectedValues.ordinal;
        var targetOrdinal = (selectedOrdinal != 1) ? selectedOrdinal - 1 : 1;
        var temp = this.StoryPagesList;
        temp[targetOrdinal].ordinal = selectedOrdinal;
        temp[selectedOrdinal].ordinal = targetOrdinal;

        this.StoryPagesList = temp;
    }
Krishnan
  • 958
  • 5
  • 21
  • 44

1 Answers1

0

Angular2 doesn't support two way binding from code into template. You will have to explicitly trigger Change detection using ChangeDetectorRef. Use it like:

constructor(private ref: ChangeDetectorRef) {}

Then whenever you want to update template for changed values:

this.ref.detectChanges();
blackspacer
  • 343
  • 6
  • 15
  • did the changes as per your comments, but still it doesn't reflect in the UI. http://plnkr.co/edit/aHbWIQoNpbvtfAQmhF3u?p=preview – Krishnan Aug 01 '17 at 16:03
  • My only guess is that your sorting logic is not reflecting the change in your original variable and it remains unsorted. – blackspacer Aug 01 '17 at 16:19
  • oh, is there any way to forcefully apply the sorting here i.e. raise any events to sort? any ideas.. – Krishnan Aug 01 '17 at 16:25
  • Instead of your custom sorting logic you can sort using native javascript if its an array and provide custom function like: https://stackoverflow.com/questions/5002848/how-to-define-custom-sort-function-in-javascript – blackspacer Aug 01 '17 at 16:26