How can I change the text/image for an item in Listview from javascript?

[itg-assistant]

michael asked 2016-11-15 23:02:44 UTC

Hi,... I'm trying to access the item object from javascript...

I don't know how!..

Maybe something like that...

App.Desktop.ListView.item("xxx").setValue('xxx');

App.Desktop.ListView.item("xxx").setIcon('xxx');

Some idea?

[itg-assistant]

Luca answered 2016-11-16 16:18:01 UTC

Not that easy. The ListView and DataGrid view use a remote data store that pulls pages of data from the server and cache them as you scroll (pull method, works for populating, scrolling and large data sets). They are also able to push changes (push method) works for small changes applied on the server and that don't justify a full reload. However, the server keeps track of the number of "push" changes and after a certain threshold it issues a page reload instead of pushing the data.

Then the widget on the client, renders the data model. This is more or less how all javascript widget classes bound to data sets, from all vendors, work. So, any change has to be applied to the data model, not the widget.

For wisej.web.ListView you can do it like this (assuming "this" is the listview):

this.updateItems([{
  action: 0. /*0=Update, 1=Delete, 2=Insert*/
  index: # /*The index of the item*/,
  rowData: {
    data: {
      icon: iconUrl, /*Can be a theme icon, a url, or a base64 image*/
      stateIcon: "", /*Same as above*/
      "0": "Item text",
      "1": "Subitem 1 text",
      ....
    }
  }
}]);

You can pass more than 1 updates. The method will pass it to either the list view or datagrid view.

If you want to bypass the updateItems() method and go directly to the view, you have simpler methods:

this.itemView.deleteItem(index);
this.itemView.updateItem(index, rowData); // rowData is the same map described above.
this.itemView.insertItem(index, rowData); // rowData is the same map described above.

When you change the data model on the client only it will not change on the server, the next update, or scroll, will feed back the data from the server.

Also, we may change the javascript api without notice, since it's not documented to be used directly.

HTH

Best,

Luca

[itg-assistant]

Luca answered 2016-11-16 16:22:03 UTC

Forgot to add that for the listview there is an additional virtual layer for the rendering of the items. The items you see in the browser are created only for the visible view and reused or destroyed as the user scrolls. When you push or modify the data in the data model, the model fires a data model changed event, the listview then decides if the data is in view and updates the corresponding widget.

For the datagrid view it’s different since the rows are not widgets, they are rendered directly inside the scrollable pane. In that case, the data model still fires the data changed event, but the grid recreates the html for the affected rows/cells, or ignores it if out of view.

[itg-assistant]

michael answered 2016-11-16 18:02:31 UTC

mmmm...

I have a background process in client side....

I have a listview with an items that i need to modify also in client side.

If I upload from the server side.. the application will stop (miliseconds) in this process, but when i make multiple changes in realtime this miliseconds are very annoying!.

[itg-assistant]

Luca answered 2016-11-16 18:56:48 UTC

You can do both:

• Update the item on the client.

• Send the same data back to the server using a [WebMethod]: https://docs.wisej.com/docs/concepts/javascript-object-model

HTH

Best,

Luca

[itg-assistant]

michael answered 2016-11-16 22:05:15 UTC

• Send the same data back to the server using a [WebMethod]: https://docs.wisej.com/docs/concepts/javascript-object-model

Ok, but how can I do the reference to my Listview??

I have a Desktop, the listview is called ListV and i have the items, i know the name of the items..

How can I do the reference?

App.Desktop.ListV.itemName.setText('xxx')

Or how do you suggest can i use WebMethod?

Thanks