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

How to access selected rows of a datatable from a button click event?

Expand Messages
  • jliuecmd
    Hi, I have a datatable (myDataTable), and if I do this: myDataTable.subscribe( rowClickEvent , function(oArgs) { this.onEventSelectRow(oArgs); alert
    Message 1 of 7 , Apr 28 3:09 PM
    • 0 Attachment
      Hi,

      I have a datatable (myDataTable), and if I do this:

      myDataTable.subscribe("rowClickEvent", function(oArgs) {
      this.onEventSelectRow(oArgs);
      alert (this.getRecordSet().getRecord(this.getSelectedRows()[0]).getData('columnA'));
      });


      When I click on a row, I got a row selected, and the alert shows the value of the columnA of the selected row.

      Now I leave the row selected, and from a button click event I want to access the selected row again:

      myButton.on("click", function() {
      alert(myDataTable.getRecordSet().getRecord(myDataTable.getSelectedRows()[0]).getData('columnA'));
      });

      This time I got nothing. Of course, myDataTable is within the scope of myButton.

      Please help! Thank you very much!

      Jun
    • jliuecmd
      Did some more work, not figured out yet, however I think the problem is the scoping, that in myButton click event function, we cannot see myDataTable. I did
      Message 2 of 7 , Apr 28 7:29 PM
      • 0 Attachment
        Did some more work, not figured out yet, however I think the problem is the scoping, that in myButton click event function, we cannot see myDataTable.

        I did have myDataTable and myButton declared side-by-side before either one is instantiated with a new. Would that be the problem?

        I am in urgent need of this, so I appreciate any help!

        Thanks!

        Jun


        --- In ydn-javascript@yahoogroups.com, "jliuecmd" <jliuecmd@...> wrote:
        >
        > Hi,
        >
        > I have a datatable (myDataTable), and if I do this:
        >
        > myDataTable.subscribe("rowClickEvent", function(oArgs) {
        > this.onEventSelectRow(oArgs);
        > alert (this.getRecordSet().getRecord(this.getSelectedRows()[0]).getData('columnA'));
        > });
        >
        >
        > When I click on a row, I got a row selected, and the alert shows the value of the columnA of the selected row.
        >
        > Now I leave the row selected, and from a button click event I want to access the selected row again:
        >
        > myButton.on("click", function() {
        > alert(myDataTable.getRecordSet().getRecord(myDataTable.getSelectedRows()[0]).getData('columnA'));
        > });
        >
        > This time I got nothing. Of course, myDataTable is within the scope of myButton.
        >
        > Please help! Thank you very much!
        >
        > Jun
        >
      • Valentin Jacquemin
        Hi, It would be nice to see your code directly to be effective but a way to get it I think is to pass a reference directly to your button event handler:
        Message 3 of 7 , Apr 28 11:12 PM
        • 0 Attachment
          Hi,

          It would be nice to see your code directly to be effective but a way to get it I think is to pass a reference directly to your button event handler:

          myButton.on("click", function(ev, dt) {
           alert(dt.getRecordSet().getRecord(dt.getSelectedRows()[0]).getData('columnA'));
          }, myDataTable);

          Valentin Jacquemin


          On Wed, Apr 29, 2009 at 4:29 AM, jliuecmd <jliuecmd@...> wrote:


          Did some more work, not figured out yet, however I think the problem is the scoping, that in myButton click event function, we cannot see myDataTable.

          I did have myDataTable and myButton declared side-by-side before either one is instantiated with a new. Would that be the problem?

          I am in urgent need of this, so I appreciate any help!

          Thanks!

          Jun



          --- In ydn-javascript@yahoogroups.com, "jliuecmd" <jliuecmd@...> wrote:
          >
          > Hi,
          >
          > I have a datatable (myDataTable), and if I do this:
          >
          > myDataTable.subscribe("rowClickEvent", function(oArgs) {
          > this.onEventSelectRow(oArgs);
          > alert (this.getRecordSet().getRecord(this.getSelectedRows()[0]).getData('columnA'));
          > });
          >
          >
          > When I click on a row, I got a row selected, and the alert shows the value of the columnA of the selected row.
          >
          > Now I leave the row selected, and from a button click event I want to access the selected row again:
          >
          > myButton.on("click", function() {
          > alert(myDataTable.getRecordSet().getRecord(myDataTable.getSelectedRows()[0]).getData('columnA'));
          > });
          >
          > This time I got nothing. Of course, myDataTable is within the scope of myButton.
          >
          > Please help! Thank you very much!
          >
          > Jun
          >


        • Satyam
          It would be helpful if you could show us the code. The smalls segments you show us are mostly fine (DataTable method getRecord is just as good as RecordSet
          Message 4 of 7 , Apr 29 12:58 AM
          • 0 Attachment
            It would be helpful if you could show us the code. The smalls segments
            you show us are mostly fine (DataTable method getRecord is just as good
            as RecordSet method getRecord so you can skip one level there), so the
            culprit is probably elsewhere, and if we can't see that, your pleas
            won't make a difference.

            Satyam


            jliuecmd escribió:
            > Did some more work, not figured out yet, however I think the problem is the scoping, that in myButton click event function, we cannot see myDataTable.
            >
            > I did have myDataTable and myButton declared side-by-side before either one is instantiated with a new. Would that be the problem?
            >
            > I am in urgent need of this, so I appreciate any help!
            >
            > Thanks!
            >
            > Jun
            >
            >
            > --- In ydn-javascript@yahoogroups.com, "jliuecmd" <jliuecmd@...> wrote:
            >
            >> Hi,
            >>
            >> I have a datatable (myDataTable), and if I do this:
            >>
            >> myDataTable.subscribe("rowClickEvent", function(oArgs) {
            >> this.onEventSelectRow(oArgs);
            >> alert (this.getRecordSet().getRecord(this.getSelectedRows()[0]).getData('columnA'));
            >> });
            >>
            >>
            >> When I click on a row, I got a row selected, and the alert shows the value of the columnA of the selected row.
            >>
            >> Now I leave the row selected, and from a button click event I want to access the selected row again:
            >>
            >> myButton.on("click", function() {
            >> alert(myDataTable.getRecordSet().getRecord(myDataTable.getSelectedRows()[0]).getData('columnA'));
            >> });
            >>
            >> This time I got nothing. Of course, myDataTable is within the scope of myButton.
            >>
            >> Please help! Thank you very much!
            >>
            >> Jun
            >>
            >>
            >
            >
            >
            >
            > ------------------------------------
            >
            > Yahoo! Groups Links
            >
            >
            >
            > ------------------------------------------------------------------------
            >
            >
            > No virus found in this incoming message.
            > Checked by AVG - www.avg.com
            > Version: 8.5.287 / Virus Database: 270.12.6/2084 - Release Date: 04/28/09 06:15:00
            >
            >
          • jliuecmd
            Thank you for your help Valentin and Satyam. Here is more details and some progress I made on this, but I still need help. I am building a site that shows
            Message 5 of 7 , Apr 29 5:57 PM
            • 0 Attachment
              Thank you for your help Valentin and Satyam. Here is more details and
              some progress I made on this, but I still need help.

              I am building a site that shows personalized tabs.

              An account can have multiple persons, and each person will have a
              tab, and the tabs are created dynamically as following:

              // first tab to create tabview and add datatable/button containers
              var tabview = new YAHOO.widget.TabView();
              for (var i=0; i<persons.length; i++)
              {
              person = persons[i];
              var divDataTablePerPerson = 'divdatatable' + person.id;
              var divButtonPerPerson = 'divbutton' + person.id;

              var htmlStr = 'table: <div id="' + divDataTablePerPerson + '"></div>';
              htmlStr += 'submit: <div id="' + divButtonPerPerson + '"></div>';

              tabview.addTab(new YAHOO.widget.Tab({
              label: person.firstname + '(' + person.personid + ')',
              content: htmlStr
              }));
              }

              tabview.appendTo('mytabviewcontainer');

              this will create tabview like this:

              tab1(firstname1(id1)) tab2(firstname2(id2)) ...

              and each tab has the following containers:

              <div id='divdatatableid1'> </div>
              <div id='divbuttonid1'> </div>

              Now I need to fill the datatable and the button within each tab and add events:

              // second tab to populate containers with actual datatable and button,
              // and add events:
              for (var i=0; i<persons.length; i++)
              {
              person = persons[i];
              var divDataTablePerPerson = 'divdatatable' + person.id;
              var divButtonPerPerson = 'divbutton' + person.id;

              var columnDefs = [
              {key:"column1", label:"ColumnA", sortable:true},
              {key:"column2", label:"ColumnB", sortable:true}
              ];

              var datasource = new YAHOO.util.DataSource(person.purchaserecords);
              datasource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
              datasource.responseSchema = {
              fields: [
              {key:"column1"},
              {key:"column2"}
              ]
              };

              var configs = {
              selectionMode:"single",
              sortedBy:{key:"column1", dir:YAHOO.widget.DataTable.CLASS_ASC}
              };

              // create the datatable for person i:
              var datatable = new YAHOO.widget.DataTable(divDataTablePerPerson, columnDefs, datasource, configs);

              // subscribe to rowClickEvent in order to select row:
              datatable.subscribe("rowClickEvent", datatable.onEventSelectRow);

              // create the button:
              var button = new YAHOO.widget.Button(divButtonPerPerson);
              button.on("click", function() {
              alert(datatable.getRecordSet().getRecord(datatable.getSelectedRows()[0]).column1);
              });
              }

              Now interesting thing happens. If I had, say, three persons in the
              account. All three datatables are shown correctly under the correct
              tab. When I select a row in the first two tables (for the first two
              people), the button click under the respective tab does not show
              anything. If I select a row in the third (i.e., the last) table, when
              I click on ALL three buttons, it shows the value for the selected row
              in the THIRD table.

              So I suspect that ALL three buttons are pointing to the last table.
              As you can see that the variables are local within hte second for
              loop, so I don't understand how this could happen and how to get
              around it. I tried to define all columnDefs/datasource/configs
              /datatable/button as array outside of the second for loop, such that
              I would have defined the datatable and button like the following:


              datatable[i] = new YAHOO.widget.DataTable(divDataTablePerPerson, columnDefs[i], datasource[i], configs[i]);
              button[i] = new YAHOO.widget.Button(divButtonPerPerson);

              But this time even selecting a row in the last table does not show up
              in the button click events.

              So I think this is probably an interesting problem to solve, and hope
              can get an answer pretty quickly (my PLEA)!

              Thank you!

              Jun
            • jliuecmd
              It must be my understanding of JavaScript variable scoping is so bad. In the button click event function, I added: alert ( divDataTablePerPerson = +
              Message 6 of 7 , Apr 29 7:12 PM
              • 0 Attachment
                It must be my understanding of JavaScript variable scoping is so bad.

                In the button click event function, I added:

                alert ("divDataTablePerPerson = " + divDataTablePerPerson);

                No matter which button I clicked, I always get:

                divdatatableid3

                Happen to be the last one in the loop.

                How can I fix this now?

                Thank you!

                Jun

                --- In ydn-javascript@yahoogroups.com, "jliuecmd" <jliuecmd@...> wrote:
                >
                > Thank you for your help Valentin and Satyam. Here is more details and
                > some progress I made on this, but I still need help.
                >
                > I am building a site that shows personalized tabs.
                >
                > An account can have multiple persons, and each person will have a
                > tab, and the tabs are created dynamically as following:
                >
                > // first tab to create tabview and add datatable/button containers
                > var tabview = new YAHOO.widget.TabView();
                > for (var i=0; i<persons.length; i++)
                > {
                > person = persons[i];
                > var divDataTablePerPerson = 'divdatatable' + person.id;
                > var divButtonPerPerson = 'divbutton' + person.id;
                >
                > var htmlStr = 'table: <div id="' + divDataTablePerPerson + '"></div>';
                > htmlStr += 'submit: <div id="' + divButtonPerPerson + '"></div>';
                >
                > tabview.addTab(new YAHOO.widget.Tab({
                > label: person.firstname + '(' + person.personid + ')',
                > content: htmlStr
                > }));
                > }
                >
                > tabview.appendTo('mytabviewcontainer');
                >
                > this will create tabview like this:
                >
                > tab1(firstname1(id1)) tab2(firstname2(id2)) ...
                >
                > and each tab has the following containers:
                >
                > <div id='divdatatableid1'> </div>
                > <div id='divbuttonid1'> </div>
                >
                > Now I need to fill the datatable and the button within each tab and add events:
                >
                > // second tab to populate containers with actual datatable and button,
                > // and add events:
                > for (var i=0; i<persons.length; i++)
                > {
                > person = persons[i];
                > var divDataTablePerPerson = 'divdatatable' + person.id;
                > var divButtonPerPerson = 'divbutton' + person.id;
                >
                > var columnDefs = [
                > {key:"column1", label:"ColumnA", sortable:true},
                > {key:"column2", label:"ColumnB", sortable:true}
                > ];
                >
                > var datasource = new YAHOO.util.DataSource(person.purchaserecords);
                > datasource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
                > datasource.responseSchema = {
                > fields: [
                > {key:"column1"},
                > {key:"column2"}
                > ]
                > };
                >
                > var configs = {
                > selectionMode:"single",
                > sortedBy:{key:"column1", dir:YAHOO.widget.DataTable.CLASS_ASC}
                > };
                >
                > // create the datatable for person i:
                > var datatable = new YAHOO.widget.DataTable(divDataTablePerPerson, columnDefs, datasource, configs);
                >
                > // subscribe to rowClickEvent in order to select row:
                > datatable.subscribe("rowClickEvent", datatable.onEventSelectRow);
                >
                > // create the button:
                > var button = new YAHOO.widget.Button(divButtonPerPerson);
                > button.on("click", function() {
                > alert(datatable.getRecordSet().getRecord(datatable.getSelectedRows()[0]).column1);
                > });
                > }
                >
                > Now interesting thing happens. If I had, say, three persons in the
                > account. All three datatables are shown correctly under the correct
                > tab. When I select a row in the first two tables (for the first two
                > people), the button click under the respective tab does not show
                > anything. If I select a row in the third (i.e., the last) table, when
                > I click on ALL three buttons, it shows the value for the selected row
                > in the THIRD table.
                >
                > So I suspect that ALL three buttons are pointing to the last table.
                > As you can see that the variables are local within hte second for
                > loop, so I don't understand how this could happen and how to get
                > around it. I tried to define all columnDefs/datasource/configs
                > /datatable/button as array outside of the second for loop, such that
                > I would have defined the datatable and button like the following:
                >
                >
                > datatable[i] = new YAHOO.widget.DataTable(divDataTablePerPerson, columnDefs[i], datasource[i], configs[i]);
                > button[i] = new YAHOO.widget.Button(divButtonPerPerson);
                >
                > But this time even selecting a row in the last table does not show up
                > in the button click events.
                >
                > So I think this is probably an interesting problem to solve, and hope
                > can get an answer pretty quickly (my PLEA)!
                >
                > Thank you!
                >
                > Jun
                >
              • jliuecmd
                I figured out the solution, is to use array definitions on all datasource, configs, columndefs, datatables, buttons, and div names for datatables and buttons
                Message 7 of 7 , May 1, 2009
                • 0 Attachment
                  I figured out the solution, is to use array definitions on all datasource, configs, columndefs, datatables, buttons, and div names for datatables and buttons (one-to-one correspondence on all these arrays).

                  The trick is when adding the event listener to the button, need to pass in the index as an extra parameter:

                  button[i].on("click", function(ev, index) {
                  // access the values of the same index, i.e., pertaining to the same person.
                  }, i, true);

                  That would do it.

                  --- In ydn-javascript@yahoogroups.com, "jliuecmd" <jliuecmd@...> wrote:
                  >
                  > It must be my understanding of JavaScript variable scoping is so bad.
                  >
                  > In the button click event function, I added:
                  >
                  > alert ("divDataTablePerPerson = " + divDataTablePerPerson);
                  >
                  > No matter which button I clicked, I always get:
                  >
                  > divdatatableid3
                  >
                  > Happen to be the last one in the loop.
                  >
                  > How can I fix this now?
                  >
                  > Thank you!
                  >
                  > Jun
                  >
                  > --- In ydn-javascript@yahoogroups.com, "jliuecmd" <jliuecmd@> wrote:
                  > >
                  > > Thank you for your help Valentin and Satyam. Here is more details and
                  > > some progress I made on this, but I still need help.
                  > >
                  > > I am building a site that shows personalized tabs.
                  > >
                  > > An account can have multiple persons, and each person will have a
                  > > tab, and the tabs are created dynamically as following:
                  > >
                  > > // first tab to create tabview and add datatable/button containers
                  > > var tabview = new YAHOO.widget.TabView();
                  > > for (var i=0; i<persons.length; i++)
                  > > {
                  > > person = persons[i];
                  > > var divDataTablePerPerson = 'divdatatable' + person.id;
                  > > var divButtonPerPerson = 'divbutton' + person.id;
                  > >
                  > > var htmlStr = 'table: <div id="' + divDataTablePerPerson + '"></div>';
                  > > htmlStr += 'submit: <div id="' + divButtonPerPerson + '"></div>';
                  > >
                  > > tabview.addTab(new YAHOO.widget.Tab({
                  > > label: person.firstname + '(' + person.personid + ')',
                  > > content: htmlStr
                  > > }));
                  > > }
                  > >
                  > > tabview.appendTo('mytabviewcontainer');
                  > >
                  > > this will create tabview like this:
                  > >
                  > > tab1(firstname1(id1)) tab2(firstname2(id2)) ...
                  > >
                  > > and each tab has the following containers:
                  > >
                  > > <div id='divdatatableid1'> </div>
                  > > <div id='divbuttonid1'> </div>
                  > >
                  > > Now I need to fill the datatable and the button within each tab and add events:
                  > >
                  > > // second tab to populate containers with actual datatable and button,
                  > > // and add events:
                  > > for (var i=0; i<persons.length; i++)
                  > > {
                  > > person = persons[i];
                  > > var divDataTablePerPerson = 'divdatatable' + person.id;
                  > > var divButtonPerPerson = 'divbutton' + person.id;
                  > >
                  > > var columnDefs = [
                  > > {key:"column1", label:"ColumnA", sortable:true},
                  > > {key:"column2", label:"ColumnB", sortable:true}
                  > > ];
                  > >
                  > > var datasource = new YAHOO.util.DataSource(person.purchaserecords);
                  > > datasource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
                  > > datasource.responseSchema = {
                  > > fields: [
                  > > {key:"column1"},
                  > > {key:"column2"}
                  > > ]
                  > > };
                  > >
                  > > var configs = {
                  > > selectionMode:"single",
                  > > sortedBy:{key:"column1", dir:YAHOO.widget.DataTable.CLASS_ASC}
                  > > };
                  > >
                  > > // create the datatable for person i:
                  > > var datatable = new YAHOO.widget.DataTable(divDataTablePerPerson, columnDefs, datasource, configs);
                  > >
                  > > // subscribe to rowClickEvent in order to select row:
                  > > datatable.subscribe("rowClickEvent", datatable.onEventSelectRow);
                  > >
                  > > // create the button:
                  > > var button = new YAHOO.widget.Button(divButtonPerPerson);
                  > > button.on("click", function() {
                  > > alert(datatable.getRecordSet().getRecord(datatable.getSelectedRows()[0]).column1);
                  > > });
                  > > }
                  > >
                  > > Now interesting thing happens. If I had, say, three persons in the
                  > > account. All three datatables are shown correctly under the correct
                  > > tab. When I select a row in the first two tables (for the first two
                  > > people), the button click under the respective tab does not show
                  > > anything. If I select a row in the third (i.e., the last) table, when
                  > > I click on ALL three buttons, it shows the value for the selected row
                  > > in the THIRD table.
                  > >
                  > > So I suspect that ALL three buttons are pointing to the last table.
                  > > As you can see that the variables are local within hte second for
                  > > loop, so I don't understand how this could happen and how to get
                  > > around it. I tried to define all columnDefs/datasource/configs
                  > > /datatable/button as array outside of the second for loop, such that
                  > > I would have defined the datatable and button like the following:
                  > >
                  > >
                  > > datatable[i] = new YAHOO.widget.DataTable(divDataTablePerPerson, columnDefs[i], datasource[i], configs[i]);
                  > > button[i] = new YAHOO.widget.Button(divButtonPerPerson);
                  > >
                  > > But this time even selecting a row in the last table does not show up
                  > > in the button click events.
                  > >
                  > > So I think this is probably an interesting problem to solve, and hope
                  > > can get an answer pretty quickly (my PLEA)!
                  > >
                  > > Thank you!
                  > >
                  > > Jun
                  > >
                  >
                Your message has been successfully submitted and would be delivered to recipients shortly.