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

customizing inline cell editing

Expand Messages
  • Todd Wells
    I have one cell that is essentially a compound field -- a link, so it has a title and a URL. I happen to know the pattern the URL should match when given a
    Message 1 of 5 , Dec 3 5:43 AM
      I have one cell that is essentially a compound field -- a link, so it has a title and a URL. I happen to know the pattern the URL should match when given a particular title, so I can deduce either the title or the URL based on the what is entered.  For example, I know the url is going to match the pattern http://foo/title, so if someone enters "http://foo/bar" I know the title is "bar" or if someone enters "yowza" I know the url is "http://foo/yowza". 

      I've intercepted the showEvent for the TextboxCellEditor for this cell so that I can render the field correctly when editing. However, when someone clicks on the link directly, I don't want the cell editor to show up at all, I just want it to navigate to the link.  I may eventually have a small icon or something that would result in an overlay (or maybe navigation) instead of editing. Right now, if the link is clicked, I can see the editor is rendered before the navigation occurs.  How can I prevent this?  Or in the second case, if I have an icon in the cell that causes an overlay, how do I render the overlay if that's clicked on instead of the cell editor? 
    • Satyam
      It is up to you to decide how you pop up the editor, that is why it is not plugged in directly into any event. If, instead of using cellClickEvent as is shown
      Message 2 of 5 , Dec 3 9:01 AM
        It is up to you to decide how you pop up the editor, that is why it is
        not plugged in directly into any event. If, instead of using
        cellClickEvent as is shown in the examples, you use cellDblClickEvent or
        use a context menu, you are free to do so. So, that would solve the
        issue of preventing the editor from popping up on a simple click.

        The navigating is even easier, you don't need to concern yourself about
        the 'compound field', the field might only have the 'yowsa' part, with
        the color, cursor and text-decoration style attributes to make it look
        like a link. When clicked, then you build the URL on the fly:

        myDataTable.on('cellClickEvent',function (oArgs) {
        var target = oArgs.target;
        var column = this.getColumn(target);
        if (column.key == 'links') {
        var record = this.getRecord(target);
        var value = record.getData(column.key);
        // do whatever else you want to ....
        document.location = 'http://foo/' + value;
        }
        });

        You can also use a formatter function in the column with the links to
        make it look as a link. The cleanest is to have the value stored in the
        record to be kept simple. That is the value that will be shown in the
        cell editor. How you decide to format it is up to you. If you do make
        it a real link, then you might want to listen to linkClickEvent and you
        would also have to use Event.stopEvent so it does not navigate on its own.

        Satyam



        Todd Wells wrote:
        > I have one cell that is essentially a compound field -- a link, so it
        > has a title and a URL. I happen to know the pattern the URL should
        > match when given a particular title, so I can deduce either the title
        > or the URL based on the what is entered. For example, I know the url
        > is going to match the pattern http://foo/title, so if someone enters
        > "http://foo/bar" I know the title is "bar" or if someone enters
        > "yowza" I know the url is "http://foo/yowza".
        >
        > I've intercepted the showEvent for the TextboxCellEditor for this cell
        > so that I can render the field correctly when editing. However, when
        > someone clicks on the link directly, I don't want the cell editor to
        > show up at all, I just want it to navigate to the link. I may
        > eventually have a small icon or something that would result in an
        > overlay (or maybe navigation) instead of editing. Right now, if the
        > link is clicked, I can see the editor is rendered before the
        > navigation occurs. How can I prevent this? Or in the second case, if
        > I have an icon in the cell that causes an overlay, how do I render the
        > overlay if that's clicked on instead of the cell editor?
        >
        > ------------------------------------------------------------------------
        >
        >
        > No virus found in this incoming message.
        > Checked by AVG - http://www.avg.com
        > Version: 8.0.176 / Virus Database: 270.9.13/1825 - Release Date: 02/12/2008 20:44
        >
        >
      • Todd Wells
        Actually, I wasn t directly listening to the cellClickEvent and manually popping up the editor, I was just using the editor config setting for the column
        Message 3 of 5 , Dec 3 9:43 AM
          Actually, I wasn't directly listening to the cellClickEvent and manually popping up the editor, I was just using the editor config setting for the column definition to set it to the TestboxCellEditor.  Which examples use the cellClickEvent?  I'm formatting the link in the cell as an actual 'a' tag with an href, but the issue is when clicking on the link, the cell editor briefly pops up before the navigation occurs.  I tried to add an 'onclick' handler directly to the 'a' tag, but it didn't seem to get called (which was weird, maybe I did something wrong?).

          So basically your suggestion is to write a custom in-cell editor and call it via cellClickEvent instead of using a YAHOO.widget.CellEditor? I had looked at the existing editor code to see what I could leverage, but it was a bit beyond my ability to grok in a few minutes.  I like the look-and-feel of the existing editors, so trying to reverse engineer the CSS and placement isn't a thrilling idea to me :-)


          On Wed, Dec 3, 2008 at 9:01 AM, Satyam <satyam@...> wrote:
          It is up to you to decide how you pop up the editor, that is why it is
          not plugged in directly into any event.  If, instead of using
          cellClickEvent as is shown in the examples, you use cellDblClickEvent or
          use a context menu, you are free to do so.  So, that would solve the
          issue of  preventing the editor from popping up on a simple click.

          The navigating is even easier, you don't need to concern yourself about
          the 'compound field', the field might only have the 'yowsa' part, with
          the color, cursor and text-decoration style attributes to make it look
          like a link.  When clicked, then you build the URL on the fly:

          myDataTable.on('cellClickEvent',function (oArgs) {
             var target = oArgs.target;
             var column = this.getColumn(target);
             if (column.key == 'links') {
                 var record = this.getRecord(target);
                 var value = record.getData(column.key);
                // do whatever else you want to ....
                document.location = 'http://foo/' + value;
             }
          });

          You can also use a formatter function in the column with the links to
          make it look as a link.  The cleanest is to have the value stored in the
          record to be kept simple.  That is the value that will be shown in the
          cell editor.  How you decide to format it is up to you.  If you do make
          it a real link, then you might want to listen to linkClickEvent and you
          would also have to use Event.stopEvent so it does not navigate on its own.

          Satyam



          Todd Wells wrote:
          > I have one cell that is essentially a compound field -- a link, so it
          > has a title and a URL. I happen to know the pattern the URL should
          > match when given a particular title, so I can deduce either the title
          > or the URL based on the what is entered.  For example, I know the url
          > is going to match the pattern http://foo/title, so if someone enters
          > "http://foo/bar" I know the title is "bar" or if someone enters
          > "yowza" I know the url is "http://foo/yowza".
          >
          > I've intercepted the showEvent for the TextboxCellEditor for this cell
          > so that I can render the field correctly when editing. However, when
          > someone clicks on the link directly, I don't want the cell editor to
          > show up at all, I just want it to navigate to the link.  I may
          > eventually have a small icon or something that would result in an
          > overlay (or maybe navigation) instead of editing. Right now, if the
          > link is clicked, I can see the editor is rendered before the
          > navigation occurs.  How can I prevent this?  Or in the second case, if
          > I have an icon in the cell that causes an overlay, how do I render the
          > overlay if that's clicked on instead of the cell editor?
          >
          > ------------------------------------------------------------------------
          >
          >
          > No virus found in this incoming message.
          > Checked by AVG - http://www.avg.com
          > Version: 8.0.176 / Virus Database: 270.9.13/1825 - Release Date: 02/12/2008 20:44
          >
          >

          ------------------------------------

          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/


        • Satyam
          ... All of them have it, it wouldn t work otherwise, in: http://developer.yahoo.com/yui/examples/datatable/dt_cellediting.html you have:
          Message 4 of 5 , Dec 3 10:03 AM
            Todd Wells wrote:
            > Actually, I wasn't directly listening to the cellClickEvent and
            > manually popping up the editor, I was just using the editor config
            > setting for the column definition to set it to the TestboxCellEditor.
            > Which examples use the cellClickEvent?
            All of them have it, it wouldn't work otherwise, in:

            http://developer.yahoo.com/yui/examples/datatable/dt_cellediting.html

            you have:

            myDataTable.subscribe("cellClickEvent", myDataTable.onEventShowCellEditor);

            If you just set the column editor and don't put the line above, it won't work. It is so normal to have it there that you sometimes forget it exists.

            > I'm formatting the link in the cell as an actual 'a' tag with an href,
            > but the issue is when clicking on the link, the cell editor briefly
            > pops up before the navigation occurs. I tried to add an 'onclick'
            > handler directly to the 'a' tag, but it didn't seem to get called
            > (which was weird, maybe I did something wrong?).
            Inline event handlers are not considered good practice and there is no
            need for them.
            You get the pop up editor due to the line quoted above. You can change
            it to use double click:

            myDataTable.subscribe("cellDblclickEvent", myDataTable.onEventShowCellEditor);

            As I mentioned, if you do have an actual link, listen to linkClickEvent
            instead of cellClickEvent.
            >
            > So basically your suggestion is to write a custom in-cell editor and
            > call it via cellClickEvent instead of using a YAHOO.widget.CellEditor?
            Not at all, use the regular textbox editor, simply plug it to some other
            event.
            > I had looked at the existing editor code to see what I could leverage,
            > but it was a bit beyond my ability to grok in a few minutes. I like
            > the look-and-feel of the existing editors, so trying to reverse
            > engineer the CSS and placement isn't a thrilling idea to me :-)
            Hopefully you shouldn't need to.

            Satyam

            >
            >
            > On Wed, Dec 3, 2008 at 9:01 AM, Satyam <satyam@...
            > <mailto:satyam@...>> wrote:
            >
            > It is up to you to decide how you pop up the editor, that is why it is
            > not plugged in directly into any event. If, instead of using
            > cellClickEvent as is shown in the examples, you use
            > cellDblClickEvent or
            > use a context menu, you are free to do so. So, that would solve the
            > issue of preventing the editor from popping up on a simple click.
            >
            > The navigating is even easier, you don't need to concern yourself
            > about
            > the 'compound field', the field might only have the 'yowsa' part, with
            > the color, cursor and text-decoration style attributes to make it look
            > like a link. When clicked, then you build the URL on the fly:
            >
            > myDataTable.on('cellClickEvent',function (oArgs) {
            > var target = oArgs.target;
            > var column = this.getColumn(target);
            > if (column.key == 'links') {
            > var record = this.getRecord(target);
            > var value = record.getData(column.key);
            > // do whatever else you want to ....
            > document.location = 'http://foo/' + value;
            > }
            > });
            >
            > You can also use a formatter function in the column with the links to
            > make it look as a link. The cleanest is to have the value stored
            > in the
            > record to be kept simple. That is the value that will be shown in the
            > cell editor. How you decide to format it is up to you. If you do
            > make
            > it a real link, then you might want to listen to linkClickEvent
            > and you
            > would also have to use Event.stopEvent so it does not navigate on
            > its own.
            >
            > Satyam
            >
            >
            >
            > Todd Wells wrote:
            > > I have one cell that is essentially a compound field -- a link,
            > so it
            > > has a title and a URL. I happen to know the pattern the URL should
            > > match when given a particular title, so I can deduce either the
            > title
            > > or the URL based on the what is entered. For example, I know
            > the url
            > > is going to match the pattern http://foo/title, so if someone enters
            > > "http://foo/bar" I know the title is "bar" or if someone enters
            > > "yowza" I know the url is "http://foo/yowza".
            > >
            > > I've intercepted the showEvent for the TextboxCellEditor for
            > this cell
            > > so that I can render the field correctly when editing. However, when
            > > someone clicks on the link directly, I don't want the cell editor to
            > > show up at all, I just want it to navigate to the link. I may
            > > eventually have a small icon or something that would result in an
            > > overlay (or maybe navigation) instead of editing. Right now, if the
            > > link is clicked, I can see the editor is rendered before the
            > > navigation occurs. How can I prevent this? Or in the second
            > case, if
            > > I have an icon in the cell that causes an overlay, how do I
            > render the
            > > overlay if that's clicked on instead of the cell editor?
            > >
            > >
            > ------------------------------------------------------------------------
            > >
            > >
            > > No virus found in this incoming message.
            > > Checked by AVG - http://www.avg.com
            > > Version: 8.0.176 / Virus Database: 270.9.13/1825 - Release Date:
            > 02/12/2008 20:44
            > >
            > >
            >
            > ------------------------------------
            >
            > Yahoo! Groups Links
            >
            >
            > mailto:ydn-javascript-fullfeatured@yahoogroups.com
            > <mailto:ydn-javascript-fullfeatured@yahoogroups.com>
            >
            >
            >
            >
            > ------------------------------------------------------------------------
            >
            >
            > No virus found in this incoming message.
            > Checked by AVG - http://www.avg.com
            > Version: 8.0.176 / Virus Database: 270.9.13/1826 - Release Date: 03/12/2008 9:34
            >
            >
          • Todd Wells
            Thanks, yes, you re right, I forgot all about the other subscribe call (it was off in a different function). I ll investigate a solution based on your
            Message 5 of 5 , Dec 3 10:09 AM
              Thanks, yes, you're right, I forgot all about the other subscribe call (it was off in a different function).  I'll investigate a solution based on your suggestions, thanks again.

              On Wed, Dec 3, 2008 at 10:03 AM, Satyam <satyam@...> wrote:


              Todd Wells wrote:
              > Actually, I wasn't directly listening to the cellClickEvent and
              > manually popping up the editor, I was just using the editor config
              > setting for the column definition to set it to the TestboxCellEditor.
              > Which examples use the cellClickEvent?
              All of them have it, it wouldn't work otherwise, in:

              http://developer.yahoo.com/yui/examples/datatable/dt_cellediting.html

              you have:

              myDataTable.subscribe("cellClickEvent", myDataTable.onEventShowCellEditor);

              If you just set the column editor and don't put the line above, it won't work.  It is so normal to have it there that you sometimes forget it exists.

              > I'm formatting the link in the cell as an actual 'a' tag with an href,
              > but the issue is when clicking on the link, the cell editor briefly
              > pops up before the navigation occurs.  I tried to add an 'onclick'
              > handler directly to the 'a' tag, but it didn't seem to get called
              > (which was weird, maybe I did something wrong?).
              Inline event handlers are not considered good practice and there is no
              need for them.
              You get the pop up editor due to the line quoted above.  You can change
              it to use double click:

              myDataTable.subscribe("cellDblclickEvent", myDataTable.onEventShowCellEditor);

              As I mentioned, if you do have an actual link, listen to linkClickEvent
              instead of cellClickEvent.
              >
              > So basically your suggestion is to write a custom in-cell editor and
              > call it via cellClickEvent instead of using a YAHOO.widget.CellEditor?
              Not at all, use the regular textbox editor, simply plug it to some other
              event.
              > I had looked at the existing editor code to see what I could leverage,
              > but it was a bit beyond my ability to grok in a few minutes.  I like
              > the look-and-feel of the existing editors, so trying to reverse
              > engineer the CSS and placement isn't a thrilling idea to me :-)
              Hopefully you shouldn't need to.

              Satyam

              >
              >
              > On Wed, Dec 3, 2008 at 9:01 AM, Satyam <satyam@...
              > <mailto:satyam@...>> wrote:
              >
              >     It is up to you to decide how you pop up the editor, that is why it is
              >     not plugged in directly into any event.  If, instead of using
              >     cellClickEvent as is shown in the examples, you use
              >     cellDblClickEvent or
              >     use a context menu, you are free to do so.  So, that would solve the
              >     issue of  preventing the editor from popping up on a simple click.
              >
              >     The navigating is even easier, you don't need to concern yourself
              >     about
              >     the 'compound field', the field might only have the 'yowsa' part, with
              >     the color, cursor and text-decoration style attributes to make it look
              >     like a link.  When clicked, then you build the URL on the fly:
              >
              >     myDataTable.on('cellClickEvent',function (oArgs) {
              >        var target = oArgs.target;
              >        var column = this.getColumn(target);
              >        if (column.key == 'links') {
              >            var record = this.getRecord(target);
              >            var value = record.getData(column.key);
              >           // do whatever else you want to ....
              >           document.location = 'http://foo/' + value;
              >        }
              >     });
              >
              >     You can also use a formatter function in the column with the links to
              >     make it look as a link.  The cleanest is to have the value stored
              >     in the
              >     record to be kept simple.  That is the value that will be shown in the
              >     cell editor.  How you decide to format it is up to you.  If you do
              >     make
              >     it a real link, then you might want to listen to linkClickEvent
              >     and you
              >     would also have to use Event.stopEvent so it does not navigate on
              >     its own.
              >
              >     Satyam
              >
              >
              >
              >     Todd Wells wrote:
              >     > I have one cell that is essentially a compound field -- a link,
              >     so it
              >     > has a title and a URL. I happen to know the pattern the URL should
              >     > match when given a particular title, so I can deduce either the
              >     title
              >     > or the URL based on the what is entered.  For example, I know
              >     the url
              >     > is going to match the pattern http://foo/title, so if someone enters
              >     > "http://foo/bar" I know the title is "bar" or if someone enters
              >     > "yowza" I know the url is "http://foo/yowza".
              >     >
              >     > I've intercepted the showEvent for the TextboxCellEditor for
              >     this cell
              >     > so that I can render the field correctly when editing. However, when
              >     > someone clicks on the link directly, I don't want the cell editor to
              >     > show up at all, I just want it to navigate to the link.  I may
              >     > eventually have a small icon or something that would result in an
              >     > overlay (or maybe navigation) instead of editing. Right now, if the
              >     > link is clicked, I can see the editor is rendered before the
              >     > navigation occurs.  How can I prevent this?  Or in the second
              >     case, if
              >     > I have an icon in the cell that causes an overlay, how do I
              >     render the
              >     > overlay if that's clicked on instead of the cell editor?
              >     >
              >     >
              >     ------------------------------------------------------------------------
              >     >
              >     >
              >     > No virus found in this incoming message.
              >     > Checked by AVG - http://www.avg.com
              >     > Version: 8.0.176 / Virus Database: 270.9.13/1825 - Release Date:
              >     02/12/2008 20:44
              >     >
              >     >
              >
              >     ------------------------------------
              >
              >     Yahoo! Groups Links
              >
              >
              > ------------------------------------------------------------------------
              >
              >
              > No virus found in this incoming message.
              > Checked by AVG - http://www.avg.com
              > Version: 8.0.176 / Virus Database: 270.9.13/1826 - Release Date: 03/12/2008 9:34
              >
              >

              ------------------------------------

              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/


            Your message has been successfully submitted and would be delivered to recipients shortly.