Loading ...
Sorry, an error occurred while loading the content.

YUI checkbox question?

Expand Messages
  • silver.grunt
    I am trying to add a check box to my db query results, so that I could select each query individually or all of them together. But I cant get it to work. here
    Message 1 of 4 , Jan 31, 2008
    • 0 Attachment
      I am trying to add a check box to my db query results, so that I could
      select each query individually or all of them together. But I cant get
      it to work.

      here is my code:->

      var headers = [
      {key:'ID', label:'ID', sortable:true} ,
      {key:'OnlineDate', label:'Online Date', sortable:true},
      {key:'Num', label:'num', sortable: true},
      {key:'Name', label:'Name', sortable: true},
      {key:editor:"checkbox", editor:"checkbox",
      editorOptions:{checkboxOptions:["0","1"]}} ,
      ];

      this.myDataSource = new YAHOO.util.DataSource(response);
      this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
      this.myDataSource.responseSchema = {
      resultsList: "records",
      fields: ["ID","OnlineDate", "Num", "Name", editor:"checkbox"]
      };
      end of code:->

      what I would like to do is when you click on the checkbox button in
      the header it then selects all of the checkboxes in results.

      When I click checkbox on the result is selects current result

      and then I would like to retrieve ID's of selected check boxes so
      that i could perform other operations to them. ID is where key:ID is.

      I have looked at yahoo yui but i could not figure out how to put the
      code together to get it working.

      Any help would be appreciated.
    • silver.grunt
      here is the picture link of what i would like to do. http://img190.imagevenue.com/aAfkjfp01fo1i-3448/loc182/10084_test_122_182lo.jpg
      Message 2 of 4 , Jan 31, 2008
      • 0 Attachment
        here is the picture link of what i would like to do.

        http://img190.imagevenue.com/aAfkjfp01fo1i-3448/loc182/10084_test_122_182lo.jpg

        --- In ydn-javascript@yahoogroups.com, "silver.grunt"
        <silver.grunt@...> wrote:
        >
        > I am trying to add a check box to my db query results, so that I could
        > select each query individually or all of them together. But I cant get
        > it to work.
        >
        > here is my code:->
        >
        > var headers = [
        > {key:'ID', label:'ID', sortable:true} ,
        > {key:'OnlineDate', label:'Online Date', sortable:true},
        > {key:'Num', label:'num', sortable: true},
        > {key:'Name', label:'Name', sortable: true},
        > {key:editor:"checkbox", editor:"checkbox",
        > editorOptions:{checkboxOptions:["0","1"]}} ,
        > ];
        >
        > this.myDataSource = new YAHOO.util.DataSource(response);
        > this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        > this.myDataSource.responseSchema = {
        > resultsList: "records",
        > fields: ["ID","OnlineDate", "Num", "Name", editor:"checkbox"]
        > };
        > end of code:->
        >
        > what I would like to do is when you click on the checkbox button in
        > the header it then selects all of the checkboxes in results.
        >
        > When I click checkbox on the result is selects current result
        >
        > and then I would like to retrieve ID's of selected check boxes so
        > that i could perform other operations to them. ID is where key:ID is.
        >
        > I have looked at yahoo yui but i could not figure out how to put the
        > code together to get it working.
        >
        > Any help would be appreciated.
        >
      • Satyam
        Let me start with a minor detail because otherwise I will forget. Don t use that trailing comma in the last item on your headers array, it will cause IE to
        Message 3 of 4 , Jan 31, 2008
        • 0 Attachment
          Let me start with a minor detail because otherwise I will forget. Don't use
          that trailing comma in the last item on your headers array, it will cause IE
          to fail. It is not a YUI thing, it is IE that assumes an empty element
          after that comma so it reports the length of the array as one more than it
          should.

          Now as for your question. I wouldn't use the checkbox editor, it is
          actually meant to support multiple yes/no options on the same field, not a
          single checkbox per cell. Use the checkbox formatter instead, it will
          produce a single checkbox per cell, which is more likely what you want. To
          place a checkbox in the header, put the HTML for that checkbox in the label
          property of the header:

          {key:'checkbox',label:'<input type="checkbox" />', formatter:"checkbox"}

          Notice the value of the key property should be a string, I am not sure why
          your browser might have not complained or what might it have understood.
          Same goes for the fields array in the DataSource responseSchema, the fields
          array does not have any property called editor. Editors, if any, are listed
          in the DataTable, not in the DataSource. The fields definition either takes
          plain strings as field names or objects of the format
          {key:'myFieldName',parser:myParserFunction}. So, instead of:

          fields: ["ID","OnlineDate", "Num", "Name", editor:"checkbox"]

          put:

          fields: ["ID","OnlineDate", "Num", "Name", "checkbox"]

          The name of the field should match the key for the column. I believe your
          data has no actual column for that last checkbox. In this case, it doesn't
          matter, it will simply add a field with value null to every cell which,
          since it evaluates to null, it will produce an unchecked checkbox.

          So far, we have the DataTable drawn, at least I hope so.

          To respond to the click on the checkbox on the header cell you can listen to
          event headerCellClickEvent:

          http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html#headerCellClickEvent

          It will be fired by any click on any header cell. It is also the one used
          to sort. That's fine. You can have more than one listener per event. Just
          as the column sorting checks to see if the column is declared as sortable,
          you check whether the column is the the one containing the checkboxes and
          respond if it is.

          this.myDataTable.subscribe('headerCellClickEvent',function (ev) {
          var column = this.getColumn(ev.target);
          if (column.key == 'checkbox') {
          // that's your column, ignore any other
          }
          });

          To listen to checkboxes, you use checkboxClickEvent and, since you would
          only have a single column with checkboxes, if you ever get that event, you
          know where it comes from, otherwise, you would check for column.key as
          above:

          http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html#checkboxClickEvent

          Once you get the event, you have to change the Record to reflect it. The
          DataTable is drawn based on the RecordSet, if the table is refreshed, it
          will do it based on the Recordset. Since you have a column marked as
          sortable, that might produce a table refresh so you have to make sure it is
          refreshed correctly.

          this.myDataTable.subscribe('checkboxClickEvent',function (ev) {
          var record = this.getRecord(ev.target);
          var recordData = record.getData();
          recordData.checkbox = ev.target.checked;
          this.updateRow(record,recordData);
          });

          With the state of the checkbox safely stored in the recordset, if the table
          gets sorted, it will be shown correctly.

          I left the header cell checkbox pending because I had to tell you about
          updating the recordset so, now you know. You will have to loop through the
          whole of the recordset modifying the state of the checkbox field according
          to the checked property of the header checkbox, then you will have to call
          refreshView to make show it.

          I guess that's about it.

          Satyam





          ----- Original Message -----
          From: "silver.grunt" <silver.grunt@...>
          To: <ydn-javascript@yahoogroups.com>
          Sent: Thursday, January 31, 2008 7:27 PM
          Subject: [ydn-javascript] YUI checkbox question?


          >I am trying to add a check box to my db query results, so that I could
          > select each query individually or all of them together. But I cant get
          > it to work.
          >
          > here is my code:->
          >
          > var headers = [
          > {key:'ID', label:'ID', sortable:true} ,
          > {key:'OnlineDate', label:'Online Date', sortable:true},
          > {key:'Num', label:'num', sortable: true},
          > {key:'Name', label:'Name', sortable: true},
          > {key:editor:"checkbox", editor:"checkbox",
          > editorOptions:{checkboxOptions:["0","1"]}} ,
          > ];
          >
          > this.myDataSource = new YAHOO.util.DataSource(response);
          > this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
          > this.myDataSource.responseSchema = {
          > resultsList: "records",
          > fields: ["ID","OnlineDate", "Num", "Name", editor:"checkbox"]
          > };
          > end of code:->
          >
          > what I would like to do is when you click on the checkbox button in
          > the header it then selects all of the checkboxes in results.
          >
          > When I click checkbox on the result is selects current result
          >
          > and then I would like to retrieve ID's of selected check boxes so
          > that i could perform other operations to them. ID is where key:ID is.
          >
          > I have looked at yahoo yui but i could not figure out how to put the
          > code together to get it working.
          >
          > Any help would be appreciated.
          >
          >
          >
          >
          > Yahoo! Groups Links
          >
          >
          >
          >
          >
          > --
          > No virus found in this incoming message.
          > Checked by AVG Free Edition.
          > Version: 7.5.516 / Virus Database: 269.19.17/1252 - Release Date:
          > 30/01/2008 20:51
          >
          >
        • silver.grunt
          the checkbox appears in the header, but It cannot be checked, also, i see the events that you have showed, but i still have trouble to get them working with
          Message 4 of 4 , Feb 1, 2008
          • 0 Attachment
            the checkbox appears in the header, but It cannot be checked, also, i
            see the events that you have showed, but i still have trouble to get
            them working with js. If i add onlclick(doThis()) inside header <input
            checkbox. the doThis is never called, even thought the function is in
            the same file.

            What i would like to do it, when someone clicks on header checkbox is
            to checkbox all of the checkboxes in the list, and when i uncheck the
            header checkbox , all of the checkboxes would uncheck. also the check
            boxes that show below the header i would like them to have the same
            name so that I could retrieve them with $_POST in php, and the value
            of one of the field in header so that i could retrieve them later on
            with php when i use $_POST.


            --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@...> wrote:
            >
            > Let me start with a minor detail because otherwise I will forget.
            Don't use
            > that trailing comma in the last item on your headers array, it will
            cause IE
            > to fail. It is not a YUI thing, it is IE that assumes an empty element
            > after that comma so it reports the length of the array as one more
            than it
            > should.
            >
            > Now as for your question. I wouldn't use the checkbox editor, it is
            > actually meant to support multiple yes/no options on the same field,
            not a
            > single checkbox per cell. Use the checkbox formatter instead, it will
            > produce a single checkbox per cell, which is more likely what you
            want. To
            > place a checkbox in the header, put the HTML for that checkbox in
            the label
            > property of the header:
            >
            > {key:'checkbox',label:'<input type="checkbox" />', formatter:"checkbox"}
            >
            > Notice the value of the key property should be a string, I am not
            sure why
            > your browser might have not complained or what might it have
            understood.
            > Same goes for the fields array in the DataSource responseSchema, the
            fields
            > array does not have any property called editor. Editors, if any,
            are listed
            > in the DataTable, not in the DataSource. The fields definition
            either takes
            > plain strings as field names or objects of the format
            > {key:'myFieldName',parser:myParserFunction}. So, instead of:
            >
            > fields: ["ID","OnlineDate", "Num", "Name", editor:"checkbox"]
            >
            > put:
            >
            > fields: ["ID","OnlineDate", "Num", "Name", "checkbox"]
            >
            > The name of the field should match the key for the column. I
            believe your
            > data has no actual column for that last checkbox. In this case, it
            doesn't
            > matter, it will simply add a field with value null to every cell which,
            > since it evaluates to null, it will produce an unchecked checkbox.
            >
            > So far, we have the DataTable drawn, at least I hope so.
            >
            > To respond to the click on the checkbox on the header cell you can
            listen to
            > event headerCellClickEvent:
            >
            >
            http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html#headerCellClickEvent
            >
            > It will be fired by any click on any header cell. It is also the
            one used
            > to sort. That's fine. You can have more than one listener per
            event. Just
            > as the column sorting checks to see if the column is declared as
            sortable,
            > you check whether the column is the the one containing the
            checkboxes and
            > respond if it is.
            >
            > this.myDataTable.subscribe('headerCellClickEvent',function (ev) {
            > var column = this.getColumn(ev.target);
            > if (column.key == 'checkbox') {
            > // that's your column, ignore any other
            > }
            > });
            >
            > To listen to checkboxes, you use checkboxClickEvent and, since you
            would
            > only have a single column with checkboxes, if you ever get that
            event, you
            > know where it comes from, otherwise, you would check for column.key as
            > above:
            >
            >
            http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html#checkboxClickEvent
            >
            > Once you get the event, you have to change the Record to reflect it.
            The
            > DataTable is drawn based on the RecordSet, if the table is
            refreshed, it
            > will do it based on the Recordset. Since you have a column marked as
            > sortable, that might produce a table refresh so you have to make
            sure it is
            > refreshed correctly.
            >
            > this.myDataTable.subscribe('checkboxClickEvent',function (ev) {
            > var record = this.getRecord(ev.target);
            > var recordData = record.getData();
            > recordData.checkbox = ev.target.checked;
            > this.updateRow(record,recordData);
            > });
            >
            > With the state of the checkbox safely stored in the recordset, if
            the table
            > gets sorted, it will be shown correctly.
            >
            > I left the header cell checkbox pending because I had to tell you about
            > updating the recordset so, now you know. You will have to loop
            through the
            > whole of the recordset modifying the state of the checkbox field
            according
            > to the checked property of the header checkbox, then you will have
            to call
            > refreshView to make show it.
            >
            > I guess that's about it.
            >
            > Satyam
            >
            >
            >
            >
            >
            > ----- Original Message -----
            > From: "silver.grunt" <silver.grunt@...>
            > To: <ydn-javascript@yahoogroups.com>
            > Sent: Thursday, January 31, 2008 7:27 PM
            > Subject: [ydn-javascript] YUI checkbox question?
            >
            >
            > >I am trying to add a check box to my db query results, so that I could
            > > select each query individually or all of them together. But I cant get
            > > it to work.
            > >
            > > here is my code:->
            > >
            > > var headers = [
            > > {key:'ID', label:'ID', sortable:true} ,
            > > {key:'OnlineDate', label:'Online Date', sortable:true},
            > > {key:'Num', label:'num', sortable: true},
            > > {key:'Name', label:'Name', sortable: true},
            > > {key:editor:"checkbox", editor:"checkbox",
            > > editorOptions:{checkboxOptions:["0","1"]}} ,
            > > ];
            > >
            > > this.myDataSource = new YAHOO.util.DataSource(response);
            > > this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
            > > this.myDataSource.responseSchema = {
            > > resultsList: "records",
            > > fields: ["ID","OnlineDate", "Num", "Name", editor:"checkbox"]
            > > };
            > > end of code:->
            > >
            > > what I would like to do is when you click on the checkbox button in
            > > the header it then selects all of the checkboxes in results.
            > >
            > > When I click checkbox on the result is selects current result
            > >
            > > and then I would like to retrieve ID's of selected check boxes so
            > > that i could perform other operations to them. ID is where key:ID is.
            > >
            > > I have looked at yahoo yui but i could not figure out how to put the
            > > code together to get it working.
            > >
            > > Any help would be appreciated.
            > >
            > >
            > >
            > >
            > > Yahoo! Groups Links
            > >
            > >
            > >
            > >
            > >
            > > --
            > > No virus found in this incoming message.
            > > Checked by AVG Free Edition.
            > > Version: 7.5.516 / Virus Database: 269.19.17/1252 - Release Date:
            > > 30/01/2008 20:51
            > >
            > >
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.