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

Re: [ydn-javascript] YUI checkbox question?

Expand Messages
  • 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 1 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 2 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.