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

ContextMenu in DataTable

Expand Messages
  • Radu
    I am trying to make a context menu within my DataTable. I m using a piece of code from this example:
    Message 1 of 7 , Feb 4, 2008
    • 0 Attachment
      I am trying to make a context menu within my DataTable. I'm using a
      piece of code from this example:
      http://developer.yahoo.com/yui/examples/datatable/dt_contextmenu.html

      I can generate perfectly the DataTable but I have a JS error saying
      that an "object is expected" on this line :

      this.myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu",
      {trigger:this.myDataTable.getTbodyEl()});

      Do I have to import some special library for the ContextMenu class?
      Anyone can tell me why it generates an error?
      Thank you!
    • Satyam
      ... From: Radu To: Sent: Monday, February 04, 2008 11:33 AM Subject: [ydn-javascript] ContextMenu in
      Message 2 of 7 , Feb 4, 2008
      • 0 Attachment
        ----- Original Message -----
        From: "Radu" <rorghi@...>
        To: <ydn-javascript@yahoogroups.com>
        Sent: Monday, February 04, 2008 11:33 AM
        Subject: [ydn-javascript] ContextMenu in DataTable


        >I am trying to make a context menu within my DataTable. I'm using a
        > piece of code from this example:
        > http://developer.yahoo.com/yui/examples/datatable/dt_contextmenu.html
        >
        > I can generate perfectly the DataTable but I have a JS error saying
        > that an "object is expected" on this line :
        >
        > this.myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu",
        > {trigger:this.myDataTable.getTbodyEl()});
        >
        > Do I have to import some special library for the ContextMenu class?

        The menu, element and container components (plus the basic yahoo-dom-event)
        should do.

        > Anyone can tell me why it generates an error?

        If the dependencies are loaded (and anyway, I believe they produce a
        different error message if missing), then the error suggests me to look into
        this.myDataTable, only objects have methods, and that is what it is looking
        for. Any misspelling, case missmatch?

        Satyam



        > Thank you!
        >
        >
        >
        >
        >
        >
        >
        >
        > Yahoo! Groups Links
        >
        >
        >
        >
        >
        > --
        > No virus found in this incoming message.
        > Checked by AVG Free Edition.
        > Version: 7.5.516 / Virus Database: 269.19.19/1257 - Release Date:
        > 03/02/2008 17:49
        >
        >
      • Radu
        Thank you for your fast answer. I post the guilty section of the code. I double checked it a million times and I can t see the error. I guess that I have all
        Message 3 of 7 , Feb 4, 2008
        • 0 Attachment
          Thank you for your fast answer.
          I post the "guilty" section of the code. I double checked it a
          million times and I can't see the error. I guess that I have all the
          classes since the DataTable works perfect.

          <script type="text/javascript">


          var myConfigs = {
          paginated: true,
          paginator: {
          containers: null,
          currentPage: 1,
          dropdownOptions:
          [5,10,20],
          pageLinks: 0,
          rowsPerPage: 5
          }
          };

          // Data Source from a local array
          var txtString =
          document.getElementById("arrayHolder").value;
          // Parse the string into an array in
          order to pass it to the datasource

          var txtArray = new Array();
          var fields = new Array();
          txtSubstrings = txtString.split("#");

          for (var i=0;i<txtSubstrings.length-
          1;i++){
          fields = txtSubstrings
          [i].split(",");
          txtArray[i]=[];
          for (var
          j=0;j<fields.length;j++){
          txtArray[i][j] =
          fields[j];
          }
          }

          //var txt = [["1","-","-","-","-","-
          ","-"],["2","-","-","-","-","-","-"]];

          var myDataSource = new
          YAHOO.util.DataSource(
          txtArray,
          {responseType:
          YAHOO.util.DataSource.TYPE_JSARRAY}
          );


          YAHOO.util.Event.addListener(window, "load", function
          () {
          YAHOO.example.Basic = new function() {
          var myColumnDefs = [
          {key:"<bean:message key='user_id'/>",
          formatter:YAHOO.widget.DataTable.formatNumber, sortable:true,
          resizeable:true},
          {key:"<bean:message
          key='user_first_name'/>", sortable:true, resizeable:true},

          {key:"<bean:message key='user_last_name'/>", sortable:true,
          resizeable:true},

          {key:"<bean:message key='user_role'/>", sortable:true,
          resizeable:true},
          {key:"<bean:message
          key='user_email'/>",sortable:true, resizeable:true},
          {key:"<bean:message
          key='edit_user'/>",sortable:false, resizeable:true},

          {key:'delete',label:'borrar',formatter:function(elCell) {

          elCell.innerHTML = '<img src="images/web/delete.png" title="delete
          row" />';

          elCell.style.cursor = 'pointer';

          }}
          ];

          //this.myDataSource = new
          YAHOO.util.DataSource(document.getElementById('dat'));
          //this.myDataSource.responseType =
          YAHOO.util.DataSource.TYPE_HTMLTABLE;
          this.myDataSource = myDataSource;

          this.myDataSource.responseSchema = {
          fields: ["<bean:message
          key='user_id'/>","<bean:message
          key='user_first_name'/>","<bean:message
          key='user_last_name'/>","<bean:message
          key='user_role'/>","<bean:message key='user_email'/>","<bean:message
          key='edit_user'/>","<bean:message key='delete_user'/>"]
          };

          this.myDataTable = new YAHOO.widget.DataTable
          ("basic1", myColumnDefs, this.myDataSource, myConfigs);



          // Programmatically bring
          focus to the instance so arrow selection works immediately
          this.myDataTable.focus();





          // The following line doesn't work
          this.myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu",
          {trigger:this.myDataTable.getTbodyEl()});

          this.myContextMenu.addItem("Delete Item");
          // Render the ContextMenu instance to the parent container of the
          DataTable
          //this.myContextMenu.render("basic1");
          //this.myContextMenu.clickEvent.subscribe(this.onContextMenuClick,
          this.myDataTable);

          };
          });


          </script>
        • Satyam
          I couldn t find anything obviously wrong, sorry. It is a little hard to follow, with the indentation flattened and lines broken but the section in question is
          Message 4 of 7 , Feb 4, 2008
          • 0 Attachment
            I couldn't find anything obviously wrong, sorry. It is a little hard to
            follow, with the indentation flattened and lines broken but the section in
            question is a copy of the example, no differences that could break it, none
            that I've noticed.

            Satyam



            ----- Original Message -----
            From: "Radu" <rorghi@...>
            To: <ydn-javascript@yahoogroups.com>
            Sent: Monday, February 04, 2008 12:31 PM
            Subject: [ydn-javascript] Re: ContextMenu in DataTable


            > Thank you for your fast answer.
            > I post the "guilty" section of the code. I double checked it a
            > million times and I can't see the error. I guess that I have all the
            > classes since the DataTable works perfect.
            >
            > <script type="text/javascript">
            >
            >
            > var myConfigs = {
            > paginated: true,
            > paginator: {
            > containers: null,
            > currentPage: 1,
            > dropdownOptions:
            > [5,10,20],
            > pageLinks: 0,
            > rowsPerPage: 5
            > }
            > };
            >
            > // Data Source from a local array
            > var txtString =
            > document.getElementById("arrayHolder").value;
            > // Parse the string into an array in
            > order to pass it to the datasource
            >
            > var txtArray = new Array();
            > var fields = new Array();
            > txtSubstrings = txtString.split("#");
            >
            > for (var i=0;i<txtSubstrings.length-
            > 1;i++){
            > fields = txtSubstrings
            > [i].split(",");
            > txtArray[i]=[];
            > for (var
            > j=0;j<fields.length;j++){
            > txtArray[i][j] =
            > fields[j];
            > }
            > }
            >
            > //var txt = [["1","-","-","-","-","-
            > ","-"],["2","-","-","-","-","-","-"]];
            >
            > var myDataSource = new
            > YAHOO.util.DataSource(
            > txtArray,
            > {responseType:
            > YAHOO.util.DataSource.TYPE_JSARRAY}
            > );
            >
            >
            > YAHOO.util.Event.addListener(window, "load", function
            > () {
            > YAHOO.example.Basic = new function() {
            > var myColumnDefs = [
            > {key:"<bean:message key='user_id'/>",
            > formatter:YAHOO.widget.DataTable.formatNumber, sortable:true,
            > resizeable:true},
            > {key:"<bean:message
            > key='user_first_name'/>", sortable:true, resizeable:true},
            >
            > {key:"<bean:message key='user_last_name'/>", sortable:true,
            > resizeable:true},
            >
            > {key:"<bean:message key='user_role'/>", sortable:true,
            > resizeable:true},
            > {key:"<bean:message
            > key='user_email'/>",sortable:true, resizeable:true},
            > {key:"<bean:message
            > key='edit_user'/>",sortable:false, resizeable:true},
            >
            > {key:'delete',label:'borrar',formatter:function(elCell) {
            >
            > elCell.innerHTML = '<img src="images/web/delete.png" title="delete
            > row" />';
            >
            > elCell.style.cursor = 'pointer';
            >
            > }}
            > ];
            >
            > //this.myDataSource = new
            > YAHOO.util.DataSource(document.getElementById('dat'));
            > //this.myDataSource.responseType =
            > YAHOO.util.DataSource.TYPE_HTMLTABLE;
            > this.myDataSource = myDataSource;
            >
            > this.myDataSource.responseSchema = {
            > fields: ["<bean:message
            > key='user_id'/>","<bean:message
            > key='user_first_name'/>","<bean:message
            > key='user_last_name'/>","<bean:message
            > key='user_role'/>","<bean:message key='user_email'/>","<bean:message
            > key='edit_user'/>","<bean:message key='delete_user'/>"]
            > };
            >
            > this.myDataTable = new YAHOO.widget.DataTable
            > ("basic1", myColumnDefs, this.myDataSource, myConfigs);
            >
            >
            >
            > // Programmatically bring
            > focus to the instance so arrow selection works immediately
            > this.myDataTable.focus();
            >
            >
            >
            >
            >
            > // The following line doesn't work
            > this.myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu",
            > {trigger:this.myDataTable.getTbodyEl()});
            >
            > this.myContextMenu.addItem("Delete Item");
            > // Render the ContextMenu instance to the parent container of the
            > DataTable
            > //this.myContextMenu.render("basic1");
            > //this.myContextMenu.clickEvent.subscribe(this.onContextMenuClick,
            > this.myDataTable);
            >
            > };
            > });
            >
            >
            > </script>
            >
            >
            >
            >
            > Yahoo! Groups Links
            >
            >
            >
            >
            >
            > --
            > No virus found in this incoming message.
            > Checked by AVG Free Edition.
            > Version: 7.5.516 / Virus Database: 269.19.19/1257 - Release Date:
            > 03/02/2008 17:49
            >
            >
          • twocupcoffee
            Hi, I ve quickly glanced at your code but I haven t noticed anything that could break it either as Satyam said but there is something that I should mention. I
            Message 5 of 7 , Feb 4, 2008
            • 0 Attachment
              Hi, I've quickly glanced at your code but I haven't noticed anything
              that could break it either as Satyam said but there is something that
              I should mention.

              I haven't passed anonymous objects very extensively so I'm not sure
              how it behaves exactly but in the line

              this.myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu",
              {trigger:this.myDataTable.getTbodyEl()});

              you pass this.myDataTable and I wonder if the context of "this" is
              correct. As an experiment try doing

              var that = this;
              this.myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu",
              {trigger:that.myDataTable.getTbodyEl()});

              Once again, this may have nothing to do with it at all, just a
              suggestion from a quick glance.

              - Andrew Kou


              --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@...> wrote:
              >
              > I couldn't find anything obviously wrong, sorry. It is a little
              hard to
              > follow, with the indentation flattened and lines broken but the
              section in
              > question is a copy of the example, no differences that could break
              it, none
              > that I've noticed.
              >
              > Satyam
              >
              >
              >
              > ----- Original Message -----
              > From: "Radu" <rorghi@...>
              > To: <ydn-javascript@yahoogroups.com>
              > Sent: Monday, February 04, 2008 12:31 PM
              > Subject: [ydn-javascript] Re: ContextMenu in DataTable
              >
              >
              > > Thank you for your fast answer.
              > > I post the "guilty" section of the code. I double checked it a
              > > million times and I can't see the error. I guess that I have all the
              > > classes since the DataTable works perfect.
              > >
              > > <script type="text/javascript">
              > >
              > >
              > > var myConfigs = {
              > > paginated: true,
              > > paginator: {
              > > containers: null,
              > > currentPage: 1,
              > > dropdownOptions:
              > > [5,10,20],
              > > pageLinks: 0,
              > > rowsPerPage: 5
              > > }
              > > };
              > >
              > > // Data Source from a local array
              > > var txtString =
              > > document.getElementById("arrayHolder").value;
              > > // Parse the string into an array in
              > > order to pass it to the datasource
              > >
              > > var txtArray = new Array();
              > > var fields = new Array();
              > > txtSubstrings = txtString.split("#");
              > >
              > > for (var i=0;i<txtSubstrings.length-
              > > 1;i++){
              > > fields = txtSubstrings
              > > [i].split(",");
              > > txtArray[i]=[];
              > > for (var
              > > j=0;j<fields.length;j++){
              > > txtArray[i][j] =
              > > fields[j];
              > > }
              > > }
              > >
              > > //var txt = [["1","-","-","-","-","-
              > > ","-"],["2","-","-","-","-","-","-"]];
              > >
              > > var myDataSource = new
              > > YAHOO.util.DataSource(
              > > txtArray,
              > > {responseType:
              > > YAHOO.util.DataSource.TYPE_JSARRAY}
              > > );
              > >
              > >
              > > YAHOO.util.Event.addListener(window, "load", function
              > > () {
              > > YAHOO.example.Basic = new function() {
              > > var myColumnDefs = [
              > > {key:"<bean:message key='user_id'/>",
              > > formatter:YAHOO.widget.DataTable.formatNumber, sortable:true,
              > > resizeable:true},
              > > {key:"<bean:message
              > > key='user_first_name'/>", sortable:true, resizeable:true},
              > >
              > > {key:"<bean:message key='user_last_name'/>", sortable:true,
              > > resizeable:true},
              > >
              > > {key:"<bean:message key='user_role'/>", sortable:true,
              > > resizeable:true},
              > > {key:"<bean:message
              > > key='user_email'/>",sortable:true, resizeable:true},
              > > {key:"<bean:message
              > > key='edit_user'/>",sortable:false, resizeable:true},
              > >
              > > {key:'delete',label:'borrar',formatter:function(elCell) {
              > >
              > > elCell.innerHTML = '<img src="images/web/delete.png" title="delete
              > > row" />';
              > >
              > > elCell.style.cursor = 'pointer';
              > >
              > > }}
              > > ];
              > >
              > > //this.myDataSource = new
              > > YAHOO.util.DataSource(document.getElementById('dat'));
              > > //this.myDataSource.responseType =
              > > YAHOO.util.DataSource.TYPE_HTMLTABLE;
              > > this.myDataSource = myDataSource;
              > >
              > > this.myDataSource.responseSchema = {
              > > fields: ["<bean:message
              > > key='user_id'/>","<bean:message
              > > key='user_first_name'/>","<bean:message
              > > key='user_last_name'/>","<bean:message
              > > key='user_role'/>","<bean:message key='user_email'/>","<bean:message
              > > key='edit_user'/>","<bean:message key='delete_user'/>"]
              > > };
              > >
              > > this.myDataTable = new YAHOO.widget.DataTable
              > > ("basic1", myColumnDefs, this.myDataSource, myConfigs);
              > >
              > >
              > >
              > > // Programmatically bring
              > > focus to the instance so arrow selection works immediately
              > > this.myDataTable.focus();
              > >
              > >
              > >
              > >
              > >
              > > // The following line doesn't work
              > > this.myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu",
              > > {trigger:this.myDataTable.getTbodyEl()});
              > >
              > > this.myContextMenu.addItem("Delete Item");
              > > // Render the ContextMenu instance to the parent container of the
              > > DataTable
              > > //this.myContextMenu.render("basic1");
              > > //this.myContextMenu.clickEvent.subscribe(this.onContextMenuClick,
              > > this.myDataTable);
              > >
              > > };
              > > });
              > >
              > >
              > > </script>
              > >
              > >
              > >
              > >
              > > Yahoo! Groups Links
              > >
              > >
              > >
              > >
              > >
              > > --
              > > No virus found in this incoming message.
              > > Checked by AVG Free Edition.
              > > Version: 7.5.516 / Virus Database: 269.19.19/1257 - Release Date:
              > > 03/02/2008 17:49
              > >
              > >
              >
            • twocupcoffee
              Ugh, maybe its the late nights, please ignore my last post. - Andrew Kou
              Message 6 of 7 , Feb 4, 2008
              • 0 Attachment
                Ugh, maybe its the late nights, please ignore my last post.

                - Andrew Kou


                --- In ydn-javascript@yahoogroups.com, "twocupcoffee"
                <twocupcoffee@...> wrote:
                >
                > Hi, I've quickly glanced at your code but I haven't noticed anything
                > that could break it either as Satyam said but there is something that
                > I should mention.
                >
                > I haven't passed anonymous objects very extensively so I'm not sure
                > how it behaves exactly but in the line
                >
                > this.myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu",
                > {trigger:this.myDataTable.getTbodyEl()});
                >
                > you pass this.myDataTable and I wonder if the context of "this" is
                > correct. As an experiment try doing
                >
                > var that = this;
                > this.myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu",
                > {trigger:that.myDataTable.getTbodyEl()});
                >
                > Once again, this may have nothing to do with it at all, just a
                > suggestion from a quick glance.
                >
                > - Andrew Kou
                >
                >
                > --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@> wrote:
                > >
                > > I couldn't find anything obviously wrong, sorry. It is a little
                > hard to
                > > follow, with the indentation flattened and lines broken but the
                > section in
                > > question is a copy of the example, no differences that could break
                > it, none
                > > that I've noticed.
                > >
                > > Satyam
                > >
                > >
                > >
                > > ----- Original Message -----
                > > From: "Radu" <rorghi@>
                > > To: <ydn-javascript@yahoogroups.com>
                > > Sent: Monday, February 04, 2008 12:31 PM
                > > Subject: [ydn-javascript] Re: ContextMenu in DataTable
                > >
                > >
                > > > Thank you for your fast answer.
                > > > I post the "guilty" section of the code. I double checked it a
                > > > million times and I can't see the error. I guess that I have all the
                > > > classes since the DataTable works perfect.
                > > >
                > > > <script type="text/javascript">
                > > >
                > > >
                > > > var myConfigs = {
                > > > paginated: true,
                > > > paginator: {
                > > > containers: null,
                > > > currentPage: 1,
                > > > dropdownOptions:
                > > > [5,10,20],
                > > > pageLinks: 0,
                > > > rowsPerPage: 5
                > > > }
                > > > };
                > > >
                > > > // Data Source from a local array
                > > > var txtString =
                > > > document.getElementById("arrayHolder").value;
                > > > // Parse the string into an array in
                > > > order to pass it to the datasource
                > > >
                > > > var txtArray = new Array();
                > > > var fields = new Array();
                > > > txtSubstrings = txtString.split("#");
                > > >
                > > > for (var i=0;i<txtSubstrings.length-
                > > > 1;i++){
                > > > fields = txtSubstrings
                > > > [i].split(",");
                > > > txtArray[i]=[];
                > > > for (var
                > > > j=0;j<fields.length;j++){
                > > > txtArray[i][j] =
                > > > fields[j];
                > > > }
                > > > }
                > > >
                > > > //var txt = [["1","-","-","-","-","-
                > > > ","-"],["2","-","-","-","-","-","-"]];
                > > >
                > > > var myDataSource = new
                > > > YAHOO.util.DataSource(
                > > > txtArray,
                > > > {responseType:
                > > > YAHOO.util.DataSource.TYPE_JSARRAY}
                > > > );
                > > >
                > > >
                > > > YAHOO.util.Event.addListener(window, "load", function
                > > > () {
                > > > YAHOO.example.Basic = new function() {
                > > > var myColumnDefs = [
                > > > {key:"<bean:message key='user_id'/>",
                > > > formatter:YAHOO.widget.DataTable.formatNumber, sortable:true,
                > > > resizeable:true},
                > > > {key:"<bean:message
                > > > key='user_first_name'/>", sortable:true, resizeable:true},
                > > >
                > > > {key:"<bean:message key='user_last_name'/>", sortable:true,
                > > > resizeable:true},
                > > >
                > > > {key:"<bean:message key='user_role'/>", sortable:true,
                > > > resizeable:true},
                > > > {key:"<bean:message
                > > > key='user_email'/>",sortable:true, resizeable:true},
                > > > {key:"<bean:message
                > > > key='edit_user'/>",sortable:false, resizeable:true},
                > > >
                > > > {key:'delete',label:'borrar',formatter:function(elCell) {
                > > >
                > > > elCell.innerHTML = '<img src="images/web/delete.png" title="delete
                > > > row" />';
                > > >
                > > > elCell.style.cursor = 'pointer';
                > > >
                > > > }}
                > > > ];
                > > >
                > > > //this.myDataSource = new
                > > > YAHOO.util.DataSource(document.getElementById('dat'));
                > > > //this.myDataSource.responseType =
                > > > YAHOO.util.DataSource.TYPE_HTMLTABLE;
                > > > this.myDataSource = myDataSource;
                > > >
                > > > this.myDataSource.responseSchema = {
                > > > fields: ["<bean:message
                > > > key='user_id'/>","<bean:message
                > > > key='user_first_name'/>","<bean:message
                > > > key='user_last_name'/>","<bean:message
                > > > key='user_role'/>","<bean:message key='user_email'/>","<bean:message
                > > > key='edit_user'/>","<bean:message key='delete_user'/>"]
                > > > };
                > > >
                > > > this.myDataTable = new YAHOO.widget.DataTable
                > > > ("basic1", myColumnDefs, this.myDataSource, myConfigs);
                > > >
                > > >
                > > >
                > > > // Programmatically bring
                > > > focus to the instance so arrow selection works immediately
                > > > this.myDataTable.focus();
                > > >
                > > >
                > > >
                > > >
                > > >
                > > > // The following line doesn't work
                > > > this.myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu",
                > > > {trigger:this.myDataTable.getTbodyEl()});
                > > >
                > > > this.myContextMenu.addItem("Delete Item");
                > > > // Render the ContextMenu instance to the parent container of the
                > > > DataTable
                > > > //this.myContextMenu.render("basic1");
                > > > //this.myContextMenu.clickEvent.subscribe(this.onContextMenuClick,
                > > > this.myDataTable);
                > > >
                > > > };
                > > > });
                > > >
                > > >
                > > > </script>
                > > >
                > > >
                > > >
                > > >
                > > > Yahoo! Groups Links
                > > >
                > > >
                > > >
                > > >
                > > >
                > > > --
                > > > No virus found in this incoming message.
                > > > Checked by AVG Free Edition.
                > > > Version: 7.5.516 / Virus Database: 269.19.19/1257 - Release Date:
                > > > 03/02/2008 17:49
                > > >
                > > >
                > >
                >
              • Radu
                I finally discovered the problem . The source file didn t have the container_core.js included:
                Message 7 of 7 , Feb 4, 2008
                • 0 Attachment
                  I finally discovered the "problem". The source file didn't have the
                  container_core.js included:
                  <script type="text/javascript"
                  src="/scripts/yahoo/build/container/container_core.js"></script>

                  That's why I always got the error "object expected" when declaring a
                  new YAHOO.widget.ContextMenu.
                  However, the DataTable works fins without the "container_core.js".

                  Thank you for your patience and your advices!
                Your message has been successfully submitted and would be delivered to recipients shortly.