0

I have a RadListView that gets data from an Observable Array of objects and displays its content as text. When modify one of the value of the object in the Observable Array, the RadListView does not refresh or update the value, even with radlist.refresh();

On Android :android: platform, this is not an issue, it works and refreshes fine, but on iOS platform it does not.

Here is my XML code

            ```<lv:RadListView items="{{ groceryList }}" id="marad" row="1" height="100%"
                itemSwipeProgressStarted="onSwipeCellStarted" swipeActions="true">

                <lv:RadListView.itemTemplate>
                    <GridLayout class="grocery-list-item">
                        <Label 
                        id="nameLabel" textWrap="true" class="p-15 radlist"    text="{{ 'ناو: ' + name + '\n' + ' بڕ: ' + quantity + '\n' + ' نرخی یەک دانە: ' + sellPrice }}" />

                    </GridLayout>
                </lv:RadListView.itemTemplate>
                         <lv:RadListView.headerItemTemplate>
                         <StackLayout>
          <Button class="btn btn-primary" text="خوێندنه‌وه‌ بە باڕکۆد" tap="barcodeSell"></Button>

 <Label class="page-placeholder" text="نرخی گشتی" textWrap="true"/>

<Label  

        text="0"
        id="totalprice" 
        textWrap="true"
        class="input input-border"/>

    <Button class="btn btn-primary" text="بفرۆشە" tap="tapSell"></Button>
 </StackLayout>
        </lv:RadListView.headerItemTemplate>

                <lv:RadListView.itemSwipeTemplate>
                                      <GridLayout columns="auto,  *, auto">


                        <GridLayout id="increase-view" col="2" tap="onIncrease"
                            class="increase-view">
                           <Label 
                            text="&#xf101;" class="fonticon duplic" /> 
                        </GridLayout>

                        <GridLayout id="delete-view" col="0" tap="onDelete"
                            class="delete-view">

                            <Label 
                            text="&#xf100;" class="fonticon duplic" /> 

                        </GridLayout>
                    </GridLayout>

                </lv:RadListView.itemSwipeTemplate>
            </lv:RadListView>```

Here is my 'modify the value' function in JS:

exports.onIncrease = function (args) {

  var item = args.view.bindingContext;
  var index = groceryList.indexOf(item);
  var totalPrice = groceryList.getItem(index).sellPrice;

  var element = groceryList.getItem(index);
  var quantity = groceryList.getItem(index);
  var quantity3 = quantity["quantity"];

  dialogs.prompt({

    message: "بڕی کاڵاکە دیاریبکە",
    okButtonText: "هەڵبژێرە",
    cancelButtonText: "داخە",


    inputType: dialogs.inputType.number
}).then(function (r) {


  if(r.result) {
  element["quantity"] = r.text;
  groceryList.setItem(index, element);

 sumPrice = (sumPrice - (Number(totalPrice)*Number(quantity3)));

  sumPrice =  sumPrice + (Number(r.text)*Number(totalPrice));

  label.text = sumPrice;

  radlist.refresh();
 }
  else {
    var rslt = false;
  }
});



};

Here is the code which feeds the RadListView:

function onNavigatingTo(args) {
    const page = args.object;
    label = page.getViewById("totalprice");
    const sideDrawer = app.getRootView();
    sideDrawer.gesturesEnabled = false;

    spanquantity = page.getViewById("quantbtn");

    groceryList = new ObservableArray([

    ]);
    pageData = observableModule.fromObject({
      groceryList: groceryList,

    });

    page.bindingContext = pageData;

    radlist = page.getViewById("marad");
     sumPrice = 0;


}
exports.onNavigatingTo = onNavigatingTo;

And then an item data is pushed to the Observable Array if the input barcode was found the database, but this is not related to this issue, I'm saying these to make the code clear.

One more thing, if I swipe RadListView and tap delete item button, it deletes the item fine, so, in the case of delete button, it updates and refreshes the list, I guess.

So, this issue is related to the increase item quantity process.

plain.js
  • 64
  • 1
  • 6
  • Can you share a minimal Playground sample where the issue can be reproduced? – Manoj May 02 '19 at 18:17
  • I produced it. https://play.nativescript.org/?template=play-js&id=kPmTu7&v=2 – plain.js May 02 '19 at 19:02
  • problem solved (solution in NativeScript Slack #general channel): Ian MacDonald [22 minutes ago] ```groceryList.setItem(index, { ...element });``` Ian MacDonald [22 minutes ago] Your `element` assignment wasn’t registering as a change because the object itself was technically the same. Ian MacDonald [21 minutes ago] This creates a new object instance prior to the set, which properly fires the change event. (edited) – plain.js May 02 '19 at 19:52

0 Answers0