oj-list-view with two oj-checkboxset, values not reflected for the 2nd checkboxset on first load

Wrushasen Dakhane

this.asmHandleCheckbox = function (id) {           

return self.asmCoAuthSelected().indexOf(id) === -1 ? [] : ["checked"];

};

this.principalAsmHandleCheckbox = function (id) {           

return self.principalAsmCoAuthSelected().indexOf(id) === -1 ? [] : ["checked"];

};

this.senHandleCheckbox = function (id) {

return self.senCoAuthSelected().indexOf(id) === -1 ? [] : ["checked"];

};

this.principalSenHandleCheckbox = function (id) {

return self.principalSenCoAuthSelected().indexOf(id) === -1 ? [] : ["checked"];

};

John 'JB' Brock-Oracle

Can you please paste that code, as code instead of an image? I'll try to reproduce the issue locally. Tough to write out all of that code from an image. :-)

Thanks!

Wrushasen Dakhane

As it is inside the oj-dialog first time when the page loads default tab is selected but the handler for 2nd checkbox in the listview is not getting triggered, thats what I see.

<oj-dialog style="display:none;width: 40vw;" id="authorize_contact" dialog-title="Add Others">

  <div slot="body">

    <div id='buttons-container'>

      <oj-buttonset-one id="individualContactType" value="{{individualContactType}}" on-value-changed="[[handleIndividualContactTypeChange]]">

        <oj-option value='external'>

          <span>External</span>

        </oj-option>

        <oj-option value='asmcommittee'>

          <span>Assembly Committee</span>

        </oj-option>

        <oj-option value='sencommittee'>

          <span>Senate Committee</span>

        </oj-option>

      </oj-buttonset-one>

    </div>

<div class="oj-flex" style="line-height: 40px;">

<oj-navigation-list drill-mode="collapsible" 

item.selectable="[[externalContactOnly]]" expanded="[[expanded]]" :id="externalContactList">

<ul data-bind="template: {name: 'externalContactTemplate', foreach: externalContactsForRequest(), as: 'externalContact'}">

</ul>

</oj-navigation-list>

</div>

<script type="text/html" id="externalContactTemplate">

<li data-bind="attr: {id: id}, css: {'oj-disabled': externalContact.disabled}">

<a href="#">

<!-- ko text: label-->

<!-- /ko -->

</a>

<!-- ko if: !externalContact.children -->

<oj-button id='addExternalContact' data-bind="click: $module.addExternalContact(externalContact)">ADD</oj-button>         

<!-- /ko -->

<!-- ko if: externalContact.children -->

<ul data-bind="template: {name: 'externalContactTemplate', foreach: externalContact.children, as: 'externalContact'}">

</ul>

<!-- /ko -->

</li>

</script>

     

  </div>

  <div slot="footer">

    <div class="oj-flex-item">

      <oj-button id="aauth-addButton" on-oj-action="[[addAuthContact]]">ADD</oj-button>

    </div>

  </div>

</oj-dialog>

John 'JB' Brock-Oracle

This code does not match the listview question at the top. This is using navigation list.

Beyond that, you really need to stop mixing Knockout bindings inside of JET custom elements. What version of JET are you working with? What is the real code that is inside of the dialog and is giving trouble?