1 Reply Latest reply on Feb 19, 2020 3:07 AM by John 'JB' Brock-Oracle

    Fetch on listView and selected item

    3033788

      JET version 8.0

       

      I am trying to select the item from the listview . I can see the keyset object in event.data.value. I would best need to get the selected id and name out from the model or read the id from the event.data.value - keyset object.

       

      2 problems,

       

      I am not able to bind the collection when fetch is completed.

      //  self.locations.fetch().done(function () { 

            self.dataProvider = new CollectionDataProvider(self.locations);

         //  });

       

      I cant bind list on fetch.done();

      Even after I fetch the data into collection, collection.get(event.data.value) complains of a Promise Error.

       

      HTML:

       

        <div id="listViewContainer">

       

                  <oj-list-view id="listview" aria-label="simple list" data="[[dataProvider]]" selection-mode="single" on-selected-changed="[[handleSelectionChanged]]">

                      <template slot="itemTemplate" data-oj-as="item">

                          <span>

                              <oj-bind-text value='[[item.data.propertyName]]'></oj-bind-text>

                          </span>

                      </template>

                  </oj-list-view>

              </div>

       

      viewModel:

       

      define(['ojs/ojcore','knockout', 'ojs/ojmodel','ojs/ojcollectiondataprovider',

       

      'ojs/ojarraydataprovider','ojs/ojknockout', 'ojs/ojbutton', 'ojs/ojinputtext','ojs/ojlistview','ojs/ojkeyset'],

      function(oj,ko,Model,CollectionDataProvider,ArrayDataProvider,KeySetImpl)

      {

       

        function pageData(enterprise,propertyId)

        {

          this.enterprise = enterprise;

          this.propertyId = propertyId;

        }


        var self = this;

        self.dataProvider = ko.observableArray();

        self.myLocationCol = ko.observableArray();

       

        

      // Use a singleton so that the state is not lost when navigating back

        var viewModel =

        {

          initialize: function (info)

          {

            viewModel.parentRouter = info.parentRouter;

            var enterprise = info.parentRouter.pageData.enterprise(); //do this as this is observable

            self.RESTurl = 'url'


            self.parseLocation = function (response) {

              return {

                propertyId: response.propertyId,

                propertyName: response.propertyName,   

              };

            };


            //Single line of data

            self.locationModel = Model.Model.extend({

              urlRoot: RESTurl,

              parse: self.parseLocation,

              idAttribute: 'propertyId'

            });


            self.mylocation = new self.locationModel();


            //Multiple models i.e. multiple lines of data

            self.locationCollection = new Model.Collection.extend({

              url: RESTurl,

              model: mylocation,

              comparator: 'propertyId'

            });


            self.locations = new self.locationCollection();

       

          //  self.locations.fetch().done(function () { 

            self.dataProvider = new CollectionDataProvider(self.locations);

         //  });

          

        },


          handleSelectionChanged: function(event)

          {

            this.selectedids = event.detail.value;      

            viewModel.parentRouter.pageData = new pageData(enterprise,event.detail.value);

         

          /*  var findselected = self.locations.get(event.detail.value)       //event.detail.value contains the ID of the selected list item 

            .then(function(res){ 

                console.log(res); //Whole model object 

                console.log(res.attributes);//Attributes of the model 

            });  */

            

             //return true;

          }

        };


        return viewModel;

      });

        • 1. Re: Fetch on listView and selected item
          John 'JB' Brock-Oracle

          The easiest way to get the data associated with a selected item in a listview is to bind the first-selected-item attribute to an observable and then access that variable from the on-selected-changed event handler.  It will return the key and a data object which will contain all of the data for that specific item.

           

          Something like this should work.

           

          this.changeHandler = (event) => {
                  var sel = document.getElementById('listview').firstSelectedItem;
                  console.log('changeHandler: '+JSON.stringify(sel));
                }