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

Datatable and Link/Buttons

Expand Messages
  • bort1002000
    Hello, I m trying to replace Dojo with YUI and have a problem with the Data Table. What I need are buttons and/or links in a row. What I have noticed is, that
    Message 1 of 4 , Apr 2, 2007
    • 0 Attachment
      Hello,

      I'm trying to replace Dojo with YUI and have a problem with the Data
      Table.

      What I need are buttons and/or links in a row. What I have noticed is,
      that all events are catched and clickable items are not responding
      (links/buttons). I have found two posts about the same problem and
      they told to catch the event.

      What I am missing is an example, because I don't get a solution to get
      the object or id of the row without a workaround.

      My code:

      var myDataTable = new YAHOO.widget.DataTable("basic", myColumnSet,
      myDataSource);

      myDataTable.subscribe("cellClickEvent",sayHello);

      function sayHello(eventObject) {
      alert(eventObject.target);
      }

      Thanks for your help in advance
      Simon
    • bruskuta
      If you want to have a link or a button, you can use a custom formatter to add them. For example var myColumnHeaders = [ {text: View , formatter: formatThis} ];
      Message 2 of 4 , Apr 3, 2007
      • 0 Attachment
        If you want to have a link or a button, you can use a custom formatter
        to add them.

        For example

        var myColumnHeaders = [
        {text:"View", formatter: formatThis}
        ];

        var formatThis = function( el ) {
        el.innerHTML = "<a href='#'>view</a>";
        }

        and after you instantiate the table, you can subscribe to the cell
        click event like this

        myDataTable.subscribe( "cellClickEvent", checkClicked );

        now to capture the target that triggered the event;

        var checkClicked = function( oArgs ) {
        var evt = oArgs.event;
        var elTarget = YAHOO.util.Event.getTarget( evt );
        if( elTarget.tagName.toLowerCase() === 'a' ) {
        //do whatever you want to do
        //note that this does not take into account multiple links in
        the same row
        //need to do further checking for this
        {
        }

        You can just as easily add a button and have an event that listens to
        the button only, or do the same event capturing technique.
      • bort1002000
        ... Thank you, but I don t really like the way of figuring out, what row it is and then fire the link. Maybe I m thinking to much in HTML, but wouldn t it be
        Message 3 of 4 , Apr 3, 2007
        • 0 Attachment
          > For example
          >
          > var myColumnHeaders = [
          > {text:"View", formatter: formatThis}
          > ];
          >
          > var formatThis = function( el ) {
          > el.innerHTML = "<a href='#'>view</a>";
          > }
          >
          > and after you instantiate the table, you can subscribe to the cell
          > click event like this
          >
          > myDataTable.subscribe( "cellClickEvent", checkClicked );
          >
          > now to capture the target that triggered the event;
          >
          > var checkClicked = function( oArgs ) {
          > var evt = oArgs.event;
          > var elTarget = YAHOO.util.Event.getTarget( evt );
          > if( elTarget.tagName.toLowerCase() === 'a' ) {
          > //do whatever you want to do
          > //note that this does not take into account multiple links in
          > the same row
          > //need to do further checking for this
          > {
          > }
          >

          Thank you, but I don't really like the way of figuring out, what row
          it is and then fire the link. Maybe I'm thinking to much in HTML, but
          wouldn't it be easier, to have the row type "link" and didn't need to
          subscribe to an event. 10 lines of javascript code are not really nice.
          Also a designer could get his hands on the code and change the link to
          a button :(

          But thank you for your help, it helps me a lot to get the example
          working :)
        • jennykhan
          Hi Simon, In your code, you are trying to assign a handler before it is defined. Instead, you need to define the handler function before assigning it to a
          Message 4 of 4 , Apr 9, 2007
          • 0 Attachment
            Hi Simon,

            In your code, you are trying to assign a handler before it is defined.
            Instead, you need to define the handler function before assigning it
            to a handle an event, like this:

            // First define sayHello
            var sayHello = function(eventObject) {
            alert(eventObject.target);
            };

            // Now you can use sayHello
            myDataTable.subscribe("cellClickEvent",sayHello);

            Hope that helps,
            Jenny





            --- In ydn-javascript@yahoogroups.com, "bort1002000" <bort1002000@...>
            wrote:
            >
            > Hello,
            >
            > I'm trying to replace Dojo with YUI and have a problem with the Data
            > Table.
            >
            > What I need are buttons and/or links in a row. What I have noticed is,
            > that all events are catched and clickable items are not responding
            > (links/buttons). I have found two posts about the same problem and
            > they told to catch the event.
            >
            > What I am missing is an example, because I don't get a solution to get
            > the object or id of the row without a workaround.
            >
            > My code:
            >
            > var myDataTable = new YAHOO.widget.DataTable("basic", myColumnSet,
            > myDataSource);
            >
            > myDataTable.subscribe("cellClickEvent",sayHello);
            >
            > function sayHello(eventObject) {
            > alert(eventObject.target);
            > }
            >
            > Thanks for your help in advance
            > Simon
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.