Forum Stats

  • 3,780,909 Users
  • 2,254,454 Discussions
  • 7,879,490 Comments

Discussions

ojTable not updating when bound to oj.ArrayTableDataSource based on computed

Jim.Marion-Oracle
Jim.Marion-Oracle Member Posts: 929
edited Mar 29, 2016 6:17PM in Oracle JET

I want to filter an ojTable bound to an oj.ArrayTableDataSource. I looked at Filtering - Fully-fetched Collection, which is based on oj.Collection. It uses the where method, which doesn't appear to exist in either oj.ArrayTableDataSource or oj.TableDataSource. My first thought was to wrap the oj.ArrayTableDataSource around a computed and filter the computed as described here: Jim's JavaScript Journal: Filtering Table Data with Knockout Computeds. I put together a fiddle of this here: https://jsfiddle.net/jmarion/0nfg10oL/2/ (requires an ES6 browser such as chrome or use the polyfilled version here: https://jsfiddle.net/jmarion/0nfg10oL/1/). Unfortunately, the table preview doesn't update when the computed recomputes. I put lots of console.log statements in the code, so open the console and notice that the computed does recompute and it does return just a subset. The ojTable just doesn't update. I've seen the Table - Using ko.observableArray example which seems to be just updating the underlying observableArray and the table updates to show array changes. This is why I thought a computed would be satisfactory.

Here is another version that does NOT use computeds, but uses the reset method instead: https://jsfiddle.net/jmarion/0nfg10oL/3/. This works great. Is this the way I'm supposed to filter an ojTable based on an oj.ArrayTableDataSource? Am I missing something?

Best Answer

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,710 Employee
    edited Mar 29, 2016 4:31PM Accepted Answer

    Hey Jim,

    Here is the fix.

    In the fiddle, replace the datasource declaration with this:

        self.datasource = new oj.ArrayTableDataSource(

          self.deptObservableArray,

          {idAttribute: 'DepartmentId'});

      };

    The in the computed, make two changes.

    On line 182, instead of returning just "result"  make it this:

          return self.deptObservableArray(result);

    I changed the "no filter" return to also return     

         return self.deptObservableArray(deptArray);

    This way if you clear out the filter it will return to the full result.

    Hope this helps

Answers

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,710 Employee
    edited Mar 28, 2016 12:50PM

    Hey Jim,

    Sorry for the delayed response.

    You should be able to just change the observable underlying everything and not have to touch the datasource or table component.

  • Jim.Marion-Oracle
    Jim.Marion-Oracle Member Posts: 929
    edited Mar 29, 2016 1:25PM

    JB, If I were using an observable array as the base for the oj.ArrayTableDataSource, I believe that would be correct. In this case, however, I'm filtering based on user input and have the oj.ArrayTableDataSource wrapping a computed. The computed contains an observable and an observableArray. I know that changing the observable used by the computed causes the computed to recompute. I put log statements in the computed to demonstrate this. You can see it in the jsfiddle by opening the console window, typing something into the dept search field (10,20,30,40), and then tabbing out of the field. When using a knockout foreach binding, the contents re-renders when the computed changes. The oj.ArrayTableDataSource, however doesn't update.

    I'm using a computed because I don't want to change the array when filtering. I just want to change the view. I suppose another alternative would be to create a second observableArray that I update when the search field value changes. Would that be any different from using the reset method (jsfiddle: https://jsfiddle.net/jmarion/0nfg10oL/3/)?

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,710 Employee
    edited Mar 29, 2016 4:31PM Accepted Answer

    Hey Jim,

    Here is the fix.

    In the fiddle, replace the datasource declaration with this:

        self.datasource = new oj.ArrayTableDataSource(

          self.deptObservableArray,

          {idAttribute: 'DepartmentId'});

      };

    The in the computed, make two changes.

    On line 182, instead of returning just "result"  make it this:

          return self.deptObservableArray(result);

    I changed the "no filter" return to also return     

         return self.deptObservableArray(deptArray);

    This way if you clear out the filter it will return to the full result.

    Hope this helps

  • Jim.Marion-Oracle
    Jim.Marion-Oracle Member Posts: 929
    edited Mar 29, 2016 5:32PM

    JB, I made a new fiddle with how I interpreted what you said: https://jsfiddle.net/jmarion/8ypu5Lkj/. I may have started from a different fiddle than you, but I also had to change lines ~84 and ~102 to use deptArray as the basis instead of deptObservableArray. Otherwise changing the filter would have little to no impact because it would continue to filter the filtered results (filtering the observable.


    Question: in this scenario, replacing the observableArray and the reset method both have the same effect. Is there a reason you would choose one over the other?


    Since the computed isn't technically bound, I think I would rewrite this to use a subscription instead of a computed. Here is an updated fiddle that uses a subscription rather than a computed: https://jsfiddle.net/jmarion/3Lzzsmmt/.

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,710 Employee
    edited Mar 29, 2016 6:17PM

    Hi Jim, 

    I don't know that there is a right or wrong method with this.  I personally like to work with arrays and then let the DataSource object do it's thing for whichever components are using it.  The reset method may very well be doing the same thing under the covers.  I don't know enough about the source code to tell you if one method is more efficient than another.

    I started with this fiddle that you provide in the original post:

    https://jsfiddle.net/jmarion/0nfg10oL/3/

    Jim.Marion-Oracle