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

Suscribe Events In A DataTable

Expand Messages
  • soccerdudemulder
    I have a DataTable populated with information and when a user double clicks on a row I would like it to link to specific page associated with that row. I have
    Message 1 of 10 , Jul 29, 2008
      I have a DataTable populated with information and when a user double
      clicks on a row I would like it to link to specific page associated
      with that row. I have been looking at the API and haven't noticed
      anything in that regards. I was wondering if someone could point me
      in the right direction. Each row of the table has a unique number as
      well. These are my subscribe events:

      this.myTable.subscribe("rowMouseoverEvent",
      this.myTable.onEventHighlightRow);

      this.myTable.subscribe("rowMouseoutEvent",
      this.myTable.onEventUnhighlightRow);

      this.myTable.subscribe("rowClickEvent", this.myTable.onEventSelectRow);

      this.myTable.subscribe("rowDblclickEvent", ?);

      Depending on the row I want to show a different page.

      Regards,
      Michael
    • Satyam
      ... this.myTable.subscribe( rowDblclickEvent , function (oArgs) { var rec = this.getRecord(oArgs.target); window.location = some.base.url?data= +
      Message 2 of 10 , Jul 29, 2008
        soccerdudemulder wrote:
        > I have a DataTable populated with information and when a user double
        > clicks on a row I would like it to link to specific page associated
        > with that row. I have been looking at the API and haven't noticed
        > anything in that regards. I was wondering if someone could point me
        > in the right direction. Each row of the table has a unique number as
        > well. These are my subscribe events:
        >
        > this.myTable.subscribe("rowMouseoverEvent",
        > this.myTable.onEventHighlightRow);
        >
        > this.myTable.subscribe("rowMouseoutEvent",
        > this.myTable.onEventUnhighlightRow);
        >
        > this.myTable.subscribe("rowClickEvent", this.myTable.onEventSelectRow);
        >
        > this.myTable.subscribe("rowDblclickEvent", ?);
        >
        >

        this.myTable.subscribe("rowDblclickEvent", function (oArgs) {
        var rec = this.getRecord(oArgs.target);
        window.location = 'some.base.url?data=' + escape(rec.getData('someField'));
        });

        The above code would use the value of the field 'someField' as an
        argument to a full URL. You can access the values of any of the fields
        in the record with getData and the key name for that column.

        Satyam


        > Depending on the row I want to show a different page.
        >
        > Regards,
        > Michael
        >
        >
        > ------------------------------------
        >
        > Yahoo! Groups Links
        >
        >
        >
        >
        > No virus found in this incoming message.
        > Checked by AVG - http://www.avg.com
        > Version: 8.0.138 / Virus Database: 270.5.6/1574 - Release Date: 25/07/2008 16:27
        >
        >
        >
        >
      • Frank Dietrich
        ... You could do something like: var oDT = this.myTable; oDT.subscribe( rowSelectEvent , this.onRowSelect, this, false); and this.onRowSelect = function(args,
        Message 3 of 10 , Jul 29, 2008
          >I have a DataTable populated with information and when a user double
          >clicks on a row I would like it to link to specific page associated
          >with that row. I have been looking at the API and haven't noticed
          >anything in that regards. I was wondering if someone could point me
          >in the right direction. Each row of the table has a unique number as
          >well. These are my subscribe events:
          >
          >this.myTable.subscribe("rowMouseoverEvent",
          >this.myTable.onEventHighlightRow);
          >
          >this.myTable.subscribe("rowMouseoutEvent",
          >this.myTable.onEventUnhighlightRow);
          >
          >this.myTable.subscribe("rowClickEvent", this.myTable.onEventSelectRow);
          >
          >this.myTable.subscribe("rowDblclickEvent", ?);
          >
          >Depending on the row I want to show a different page.


          You could do something like:

          var oDT = this.myTable;

          oDT.subscribe("rowSelectEvent", this.onRowSelect, this, false);


          and


          this.onRowSelect = function(args, me) {

          // You get the record as argument
          var oRecord = args.record;

          // or get the data:
          var data = this.getRecordSet().getRecord( this.getSelectedRows()[0]._oData;
          alert("You have selected the record with the id "+ data.id);


          // do something with it like getting the actual index
          var nIndex = this.getRecordIndex(args.record);

          ...
          }



          with one or the other information, You should be able to call the new page
          hope this helps
        • soccerdudemulder
          I still seem to be having trouble. As of now, I m just trying to get the alert box to appear and the exception I receive is a callback one related to
          Message 4 of 10 , Jul 29, 2008
            I still seem to be having trouble. As of now, I'm just trying to
            get the alert box to appear and the exception I receive is a
            callback one related to rowSelectEvent. I don't think its getting
            to the function. Here is the code so far:

            YAHOO.util.Event.addListener(window, "load", function() {
            YAHOO.example.RowSelection = new function() {
            // key is column name in database
            var myColumnDefs =
            [
            {key:"Case_Number", sortable:true, label:"Case
            Number"},
            {key:"First_Name", sortable:true, editor:"textarea",
            label:"First Name"},
            {key:"Last_Name", sortable:true, editor:"textarea",
            label:"Last Name"},
            {key:"Case_Status", sortable:true, editor:"dropdown",
            editorOptions:{dropdownOptions:YAHOO.example.Data.case_status},
            label:"Case Status"},
            {key:"Case_Status_Date",
            formatter:YAHOO.widget.DataTable.formatDate, sortable:true,
            editor:"date", label:"Case Status Date"}
            ];

            this.myDataSource = new YAHOO.util.DataSource
            (YAHOO.example.Data.people);
            this.myDataSource.responseType =
            YAHOO.util.DataSource.TYPE_JSON;
            this.myDataSource.responseSchema =
            {
            resultsList: "messages",
            fields:
            ["Date","First_Name","Last_Name","Case_Status","Case_Number","Case_St
            atus_Date"]
            };

            this.myTable = new YAHOO.widget.DataTable("divtag",
            myColumnDefs, this.myDataSource,
            {
            caption:"<center>Select An Employee
            Case</center>",
            selectionMode:"single"
            });

            // Subscribe to events for row selection
            this.myTable.subscribe("rowMouseoverEvent",
            this.myTable.onEventHighlightRow);
            this.myTable.subscribe("rowMouseoutEvent",
            this.myTable.onEventUnhighlightRow);
            this.myTable.subscribe("rowClickEvent",
            this.myTable.onEventSelectRow);
            this.myTable.subscribe("cellDblclickEvent",
            this.myTable.onEventShowCellEditor);

            // Programmatically select the first row
            this.myTable.selectRow(this.myTable.getTrEl(0));

            var oDT = this.myTable;
            oDT.subscribe("rowSelectEvent", this.onRowSelect, this,
            false);
            this.onRowSelect = function(args,me)
            {
            var oRecord = args.record;
            var data = this.getRecordSet().getRecord
            (this.getSelectedRows()[o]._oData);
            alert("You have selected the record with the id " +
            data.id);

            var nIndex = this.getRecordIndex(args.record);
            }
            };
            });
          • Satyam
            ... The custom events for DataTable call the listener in the scope of the DataTable itself. You don t need to add that third and fourth argument to the
            Message 5 of 10 , Jul 30, 2008
              soccerdudemulder wrote:
              > I still seem to be having trouble. As of now, I'm just trying to
              > get the alert box to appear and the exception I receive is a
              > callback one related to rowSelectEvent. I don't think its getting
              > to the function. Here is the code so far:
              >
              > YAHOO.util.Event.addListener(window, "load", function() {
              > YAHOO.example.RowSelection = new function() {
              > // key is column name in database
              > var myColumnDefs =
              > [
              > {key:"Case_Number", sortable:true, label:"Case
              > Number"},
              > {key:"First_Name", sortable:true, editor:"textarea",
              > label:"First Name"},
              > {key:"Last_Name", sortable:true, editor:"textarea",
              > label:"Last Name"},
              > {key:"Case_Status", sortable:true, editor:"dropdown",
              > editorOptions:{dropdownOptions:YAHOO.example.Data.case_status},
              > label:"Case Status"},
              > {key:"Case_Status_Date",
              > formatter:YAHOO.widget.DataTable.formatDate, sortable:true,
              > editor:"date", label:"Case Status Date"}
              > ];
              >
              > this.myDataSource = new YAHOO.util.DataSource
              > (YAHOO.example.Data.people);
              > this.myDataSource.responseType =
              > YAHOO.util.DataSource.TYPE_JSON;
              > this.myDataSource.responseSchema =
              > {
              > resultsList: "messages",
              > fields:
              > ["Date","First_Name","Last_Name","Case_Status","Case_Number","Case_St
              > atus_Date"]
              > };
              >
              > this.myTable = new YAHOO.widget.DataTable("divtag",
              > myColumnDefs, this.myDataSource,
              > {
              > caption:"<center>Select An Employee
              > Case</center>",
              > selectionMode:"single"
              > });
              >
              > // Subscribe to events for row selection
              > this.myTable.subscribe("rowMouseoverEvent",
              > this.myTable.onEventHighlightRow);
              > this.myTable.subscribe("rowMouseoutEvent",
              > this.myTable.onEventUnhighlightRow);
              > this.myTable.subscribe("rowClickEvent",
              > this.myTable.onEventSelectRow);
              > this.myTable.subscribe("cellDblclickEvent",
              > this.myTable.onEventShowCellEditor);
              >
              > // Programmatically select the first row
              > this.myTable.selectRow(this.myTable.getTrEl(0));
              >
              > var oDT = this.myTable;
              > oDT.subscribe("rowSelectEvent", this.onRowSelect, this,
              > false);
              > this.onRowSelect = function(args,me)
              > {
              > var oRecord = args.record;
              > var data = this.getRecordSet().getRecord
              > (this.getSelectedRows()[o]._oData);
              > alert("You have selected the record with the id " +
              > data.id);
              >
              > var nIndex = this.getRecordIndex(args.record);
              > }
              > };
              > });
              >
              The custom events for DataTable call the listener in the scope of the
              DataTable itself. You don't need to add that third and fourth argument
              to the listener
              You can get the data from oRecord by simply doing:

              var data = oRecord.getData();

              or simply:

              alert(oRecord.getData('id'));

              Don't use variables starting with underscore, they are meant to be
              private. There are ways around it.
              Your index to getSelectedRows seems to be a letter o instead of the
              number zero.

              Satyam
            • soccerdudemulder
              ... the ... argument ... the ... So your saying I don t need to bother with the rowSelected event? That is where I m still getting an exception.
              Message 6 of 10 , Jul 30, 2008
                --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                > The custom events for DataTable call the listener in the scope of
                the
                > DataTable itself. You don't need to add that third and fourth
                argument
                > to the listener
                > You can get the data from oRecord by simply doing:
                >
                > var data = oRecord.getData();
                >
                > or simply:
                >
                > alert(oRecord.getData('id'));
                >
                > Don't use variables starting with underscore, they are meant to be
                > private. There are ways around it.
                > Your index to getSelectedRows seems to be a letter o instead of
                the
                > number zero.
                >
                > Satyam
                >

                So your saying I don't need to bother with the rowSelected event?
                That is where I'm still getting an exception.
              • Satyam
                ... The custom events for DataTable call the listener in the scope of the DataTable itself. You don t need to add that third and fourth argument to the
                Message 7 of 10 , Jul 30, 2008


                  soccerdudemulder wrote:
                  --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                    
                  The custom events for DataTable call the listener in the scope of 
                      
                  the 
                    
                  DataTable itself.  You don't need to add that third and fourth 
                      
                  argument 
                    
                  to the listener
                  You can get the data from oRecord by simply doing:
                  
                      var data = oRecord.getData();
                  
                  or simply:
                  
                      alert(oRecord.getData('id'));
                  
                  Don't use variables starting with underscore, they are meant to be 
                  private.  There are ways around it.
                  Your index to getSelectedRows seems to be a letter o instead of 
                      
                  the 
                    
                  number zero.
                  
                  Satyam
                  
                      
                  So your saying I don't need to bother with the rowSelected event?  
                  That is where I'm still getting an exception.  
                  
                    

                  No, I'm not saying that, I'm talking about the contents of the listener to rowSelect event, that's where you get your oRecord reference which I use in the code above, I am simply replacing that long expression you had, which included private members and had a letter o instead of a number zero as an index by a much simpler statement, which is the supported means to do it.

                  Satyam

                  
                  ------------------------------------
                  
                  Yahoo! Groups Links
                  
                  <*> To visit your group on the web, go to:
                      http://groups.yahoo.com/group/ydn-javascript/
                  
                  <*> Your email settings:
                      Individual Email | Traditional
                  
                  <*> To change settings online go to:
                      http://groups.yahoo.com/group/ydn-javascript/join
                      (Yahoo! ID required)
                  
                  <*> To change settings via email:
                      mailto:ydn-javascript-digest@yahoogroups.com 
                      mailto:ydn-javascript-fullfeatured@yahoogroups.com
                  
                  <*> To unsubscribe from this group, send an email to:
                      ydn-javascript-unsubscribe@yahoogroups.com
                  
                  <*> Your use of Yahoo! Groups is subject to:
                      http://docs.yahoo.com/info/terms/
                  
                  
                  No virus found in this incoming message.
                  Checked by AVG - http://www.avg.com 
                  Version: 8.0.138 / Virus Database: 270.5.6/1579 - Release Date: 29/07/2008 6:43
                  
                  
                  
                    
                • soccerdudemulder
                  You said to remove the 3 and 4th args from the listener. Could you point to this line? From reading the API, it seemed as it needed to have 5 args. The
                  Message 8 of 10 , Jul 30, 2008
                    You said to remove the 3 and 4th args from the listener. Could you
                    point to this line? From reading the API, it seemed as it needed to
                    have 5 args. The whole o/0 issue is because the text editor
                    interpreted it incorrectly. What is id when calling getData? It must
                    be some part of the row I clicked on right?

                    New code:

                    var onRowSelect = function()
                    {
                    var oRecord;
                    alert(oRecord.getData('id'));

                    }
                    this.myTable.subscribe("rowDblclickEvent" ,onRowSelect());


                    Thanks.
                  • soccerdudemulder
                    Thank you for your help in this matter. Everything looks good! ... this.myTable.onEventSelectRow); ... escape(rec.getData( someField )); ... 25/07/2008 16:27
                    Message 9 of 10 , Jul 30, 2008
                      Thank you for your help in this matter. Everything looks good!

                      --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                      >
                      >
                      >
                      > soccerdudemulder wrote:
                      > > I have a DataTable populated with information and when a user double
                      > > clicks on a row I would like it to link to specific page associated
                      > > with that row. I have been looking at the API and haven't noticed
                      > > anything in that regards. I was wondering if someone could point me
                      > > in the right direction. Each row of the table has a unique number as
                      > > well. These are my subscribe events:
                      > >
                      > > this.myTable.subscribe("rowMouseoverEvent",
                      > > this.myTable.onEventHighlightRow);
                      > >
                      > > this.myTable.subscribe("rowMouseoutEvent",
                      > > this.myTable.onEventUnhighlightRow);
                      > >
                      > > this.myTable.subscribe("rowClickEvent",
                      this.myTable.onEventSelectRow);
                      > >
                      > > this.myTable.subscribe("rowDblclickEvent", ?);
                      > >
                      > >
                      >
                      > this.myTable.subscribe("rowDblclickEvent", function (oArgs) {
                      > var rec = this.getRecord(oArgs.target);
                      > window.location = 'some.base.url?data=' +
                      escape(rec.getData('someField'));
                      > });
                      >
                      > The above code would use the value of the field 'someField' as an
                      > argument to a full URL. You can access the values of any of the fields
                      > in the record with getData and the key name for that column.
                      >
                      > Satyam
                      >
                      >
                      > > Depending on the row I want to show a different page.
                      > >
                      > > Regards,
                      > > Michael
                      > >
                      > >
                      > > ------------------------------------
                      > >
                      > > Yahoo! Groups Links
                      > >
                      > >
                      > >
                      > >
                      > > No virus found in this incoming message.
                      > > Checked by AVG - http://www.avg.com
                      > > Version: 8.0.138 / Virus Database: 270.5.6/1574 - Release Date:
                      25/07/2008 16:27
                      > >
                      > >
                      > >
                      > >
                      >
                    • Satyam
                      ... See: http://developer.yahoo.com/yui/event/#customsubscribe ... Right. In your example, you accessed property id in object data (data.id) so I showed how
                      Message 10 of 10 , Jul 31, 2008
                        soccerdudemulder wrote:
                        > You said to remove the 3 and 4th args from the listener. Could you
                        > point to this line? From reading the API, it seemed as it needed to
                        > have 5 args.
                        See:

                        http://developer.yahoo.com/yui/event/#customsubscribe

                        > The whole o/0 issue is because the text editor
                        > interpreted it incorrectly. What is id when calling getData? It must
                        > be some part of the row I clicked on right?
                        >
                        Right. In your example, you accessed property id in object data
                        (data.id) so I showed how to get that same value using getData. Any
                        column key name would do just as well.
                        > New code:
                        >
                        > var onRowSelect = function()
                        > {
                        > var oRecord;
                        > alert(oRecord.getData('id'));
                        >
                        > }
                        > this.myTable.subscribe("rowDblclickEvent" ,onRowSelect());
                        >
                        >
                        > Thanks.
                        >
                        >
                        > ------------------------------------
                        >
                        > Yahoo! Groups Links
                        >
                        >
                        >
                        >
                        > No virus found in this incoming message.
                        > Checked by AVG - http://www.avg.com
                        > Version: 8.0.138 / Virus Database: 270.5.6/1579 - Release Date: 29/07/2008 6:43
                        >
                        >
                        >
                        >
                      Your message has been successfully submitted and would be delivered to recipients shortly.