6 Replies Latest reply on May 25, 2017 10:59 AM by Saif Farhan-Oracle

    Unable to bind checkbox in the table header


      I am using ojtable for rendering table and have put a checkbox in the header to select all the rows. But when I try to bind click event or checked, none of them are getting bind. I also tried $root for click function but then also it's not working.


      Below is the code:

      <div id="patchesDiv">

          <table id="patchesTable"  summary="Patches List" aria-label="Patch List" data-bind="ojComponent: {component: 'ojTable',

                                      data: patchList, rootAttributes: {style:'border: 1px solid #CCC;'},

                                      columnsDefault: {sortable: 'enabled'}, columns: [

                                                {headerTemplate: 'header_tmp1'},

                                                {headerText: 'Patch Id',

                                                 field: 'patchId'},

                                                {headerText: 'Description',

                                                 field: 'patchDescription'}],

                                       rowTemplate: 'row_tmpl', 

                                       selectionMode: {row: 'none', column:'none'}      }">




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


              <td><input type="checkbox" class="patchCheckbox" data-bind="attr: {id: patchId}"/></td>

              <td><div id='patchId' data-bind="text: patchId , rootAttributes: {style:'max-width:200px'}"></div></td>

              <td><div id="patchDescription" data-bind="text: patchDescription, rootAttributes: {style:'max-width:400px'}" ></div></td>




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

          <th style="padding-left: 15px;">

            <input id="chknox_head" type="checkbox" data-bind="checked: $root.checkAll" />




      I have defined a checkAll variable in the corresponding javascript defined as:

      self.checkAll = ko.observable(true);


      But it still shows false on ui. Also tried click method binding but didn't work. Can you please suggest what can be the reason? As soon as I move this checkbox outside from table, it starts working.

        • 1. Re: Unable to bind checkbox in the table header
          John 'JB' Brock-Oracle



          Please take a look at the CRUD demo provided as part of the Common Model Cookbook pages

          Oracle JET - CRUD - CRUD Using Table


          This isn't exactly what you are doing, but it's very close and should give you an idea of how we did it for the individual rows.  The same should be possible for the column header.

          Please let me know if this helps or not.

          • 2. Re: Unable to bind checkbox in the table header

            Hi John,


            Thanks for your reply. I was trying it in the same way as per this link but click (or checked) binding is not working for me. So, when I bind a checkAll method with $root (similar to enableDelete in example) it's not getting executed on click. The same problem I have for the table rows as well with $root. But in the case of table row, I could bind a function for row record itself so I didn't really need a root level function to bind. But in the case of table header, I need root level binding since datasource function and data are for individual rows.


            Can you please suggest what can be the reason or a way to debug this issue. We are on jet version 1.2.0-22069

            • 3. Re: Unable to bind checkbox in the table header
              John 'JB' Brock-Oracle

              It would be easiest to look at a running application to try and debug the code.  Because you say you are using v1.2.0 of JET, I will assume that you are actually an Oracle employee.  Can you please ask this same question on the internal forum and provide a link to the project so that we can take a look at it?



              • 4. Re: Unable to bind checkbox in the table header



                I am using OracleJet version 2,2 and I want to do something similar.

                I want to put a input text at the column header for searching on that column

                I can put the inputtext there, but I cannot find a way to bind the value of the text to my Viewmodel (also not with $root).

                Do you know how to do that?


                    <table id="customertable" summary="Customer List" aria-label="Customer Table" data-bind="ojComponent: {component: 'ojTable',

                                                data: datasource,

                                               selectionMode: {row: 'single'},

                                                columnsDefault: {sortable: 'enabled'},

                                                columns: [{headerText: 'Customer Number',   field: 'CustomerNumber'}, 

                                                          {headerTemplate: 'country_temp',   field: 'Country'}


                                                            rootAttributes: {'style':'height: 300px; width:100%;'}}" } ">





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


                        <div class="inline-form">

                           <input id="a" name="b" data-bind="ojComponent: {

                                                component: 'ojInputText', value: $root.country}" } />         <!-- or value: country, also does not work -->






                in the viewmodel:

                        self.country = ko.observable('text');



                              (function(newValue) {

                                    console.log('does this work?');



                • 6. Re: Unable to bind checkbox in the table header
                  Saif Farhan-Oracle



                  I was facing the same issue. I searched and finally chanced upon this discussion. As JB suggested, I went to the CRUD example. I tried to follow the sample but that didn't fix my issue. Then i found that the context my click function was defined in, was not really the $root but the $parent.


                  This change worked for me:

                  click: function(data, event){$parent.openDomain(domainName,data,event)}


                  Mine was a button control in one of the columns.