Forum Stats

  • 3,760,221 Users
  • 2,251,664 Discussions
  • 7,871,026 Comments

Discussions

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

Wrushasen Dakhane
Wrushasen Dakhane Member Posts: 242 Red Ribbon


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"];

};

Tagged:

Answers

  • 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
    Wrushasen Dakhane Member Posts: 242 Red Ribbon

    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>

  • 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?