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

Re: YUI checkbox question?

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