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

Re: [ydn-javascript] Custom Cell Editor help

Expand Messages
  • Satyam
    Redefining an editor is quite some trouble and you don t do it that way any longer in 2.6. Actually, that is one reason you don t do it, the code below no
    Message 1 of 2 , Oct 22, 2008
    • 0 Attachment
      Redefining an editor is quite some trouble and you don't do it that way
      any longer in 2.6. Actually, that is one reason you don't do it, the
      code below no longer works with 2.6 so it would have been a lot of
      effort wasted. Now, however, that DataTable is out of Beta, the public
      interfaces are not going to change so it should be safe to do it now. I
      have rewritten both parts of my previous article for 2.6. The first
      part is already in the YUI Blog, the second should be online any time
      (English is not my native language so my articles take a little longer
      to get online, a time not wasted at all: it's someone fixing my
      English). That part 2 has a revised redefined cell editor.

      Anyway, you don't need to:

      cellEditors already have the style yui-dt-editor defined so you might
      want to define extra styles for the existing className instead of adding
      a new style.

      You can pile up listeners on the same event on the same item. If the
      user presses Enter, the editorSaveEvent will be fired right after the
      cell editor is hidden so you can go on and pop up a new one.
      There is also editorKeyDownEvent where you can capture the tab, cancel
      the event, save the editor and pop a new one.

      Both of these would be done around the cell editor, not within it, which
      is safer since otherwise you would have to keep your editor upgraded
      with every change in the distribution. Besides, working around it will
      allow you to do the same for all editors.

      Satyam


      claracruzz wrote:
      > I need a bit of help working out how to customise cell editors within
      > my datatable to do the following;-
      >
      > 1. Set a custom css styles for a textbox for example
      > 2. Have the focus transfered to the next cell editor when a the
      > 'enter' or 'tab' key is pressed.
      >
      >
      > Here's what I have so far following satyam's example;-
      > //custom cell editor
      > YAHOO.widget.DataTable.CustomTextboxCellEditor = function(oEditor,
      > oSelf) {
      > var elCell = oEditor.cell;
      > var oRecord = oEditor.record;
      > var oColumn = oEditor.column;
      > var elContainer = oEditor.container;
      > var value = YAHOO.lang.isValue(oRecord.getData(oColumn.key)) ?
      > oRecord.getData(oColumn.key) : "";
      >
      > var elTextbox =
      > elContainer.appendChild(document.createElement("input"));
      > elTextbox.type = "text";
      > elTextbox.style.width = (elCell.offsetWidth - 4) + "px";
      > elTextbox.value = value;
      > elTextbox.style.border = "1px solid 000";
      > elTextbox.style.margin = "2px 0 0 0";
      > elTextbox.style.height = "18";
      >
      >
      > // Bug: 1802582 Set up a listener on each textbox to track on keypress
      > // since SF/OP can't preventDefault on keydown
      > YAHOO.util.Event.addListener(elTextbox, 'keypress', function(v){
      > // Prevent form submit
      > // Save on "enter"
      > if((v.keyCode === 13)||(v.keyCode === 9)) {
      > //xfer focus to next celleditor
      > oSelf.fireEvent("editorSaveEvent", {editor:oEditor});
      > }
      > });
      >
      >
      > // Set up a listener on each textbox to track the input value
      > YAHOO.util.Event.addListener(elTextbox, "keyup", function(v){
      > // Update the tracker value
      > oEditor.value = elTextbox.value;
      > oSelf.fireEvent("editorSaveEvent", {editor:oEditor});
      > });
      >
      > // Select the text
      > elTextbox.focus();
      > elTextbox.select();
      >
      >
      > oSelf.handleDisabledBtns();
      >
      > };
      >
      >
      > There's a problem with this though;
      > 1. when the the enter key is cicked, or i click away from the cell
      > editor, the cell editor stays open and does not revert to non-edit mode.
      > 2. The value is not being saved
      > 3. no way near achieveing the desired tab/enter key effects
      > 4. it does not pick up the border and height style values when I
      > inspect the output using firebug hte following is outputted;-
      >
      > <input type="text" style="margin: 2px 0pt 0pt; width: 63px;"/>
      >
      > no margin or height style attrbute.
      >
      > Any help appreciated.
      >
      >
      >
      > ------------------------------------
      >
      > Yahoo! Groups Links
      >
      >
      >
      > ------------------------------------------------------------------------
      >
      >
      > No virus found in this incoming message.
      > Checked by AVG - http://www.avg.com
      > Version: 8.0.173 / Virus Database: 270.8.1/1734 - Release Date: 20/10/2008 7:25
      >
      >
    • claracruzz
      Hi Satyam, Many thanks for that... However i m ver green with YUI, and my javascript is not all that advanced. Any examples would be great. Many thanks. ...
      Message 2 of 2 , Oct 23, 2008
      • 0 Attachment
        Hi Satyam,
        Many thanks for that...

        However i'm ver green with YUI, and my javascript is not all that
        advanced. Any examples would be great.

        Many thanks.

        --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
        >
        > Redefining an editor is quite some trouble and you don't do it that way
        > any longer in 2.6. Actually, that is one reason you don't do it, the
        > code below no longer works with 2.6 so it would have been a lot of
        > effort wasted. Now, however, that DataTable is out of Beta, the public
        > interfaces are not going to change so it should be safe to do it
        now. I
        > have rewritten both parts of my previous article for 2.6. The first
        > part is already in the YUI Blog, the second should be online any time
        > (English is not my native language so my articles take a little longer
        > to get online, a time not wasted at all: it's someone fixing my
        > English). That part 2 has a revised redefined cell editor.
        >
        > Anyway, you don't need to:
        >
        > cellEditors already have the style yui-dt-editor defined so you might
        > want to define extra styles for the existing className instead of
        adding
        > a new style.
        >
        > You can pile up listeners on the same event on the same item. If the
        > user presses Enter, the editorSaveEvent will be fired right after the
        > cell editor is hidden so you can go on and pop up a new one.
        > There is also editorKeyDownEvent where you can capture the tab, cancel
        > the event, save the editor and pop a new one.
        >
        > Both of these would be done around the cell editor, not within it,
        which
        > is safer since otherwise you would have to keep your editor upgraded
        > with every change in the distribution. Besides, working around it will
        > allow you to do the same for all editors.
        >
        > Satyam
        >
        >
        > claracruzz wrote:
        > > I need a bit of help working out how to customise cell editors within
        > > my datatable to do the following;-
        > >
        > > 1. Set a custom css styles for a textbox for example
        > > 2. Have the focus transfered to the next cell editor when a the
        > > 'enter' or 'tab' key is pressed.
        > >
        > >
        > > Here's what I have so far following satyam's example;-
        > > //custom cell editor
        > > YAHOO.widget.DataTable.CustomTextboxCellEditor = function(oEditor,
        > > oSelf) {
        > > var elCell = oEditor.cell;
        > > var oRecord = oEditor.record;
        > > var oColumn = oEditor.column;
        > > var elContainer = oEditor.container;
        > > var value = YAHOO.lang.isValue(oRecord.getData(oColumn.key)) ?
        > > oRecord.getData(oColumn.key) : "";
        > >
        > > var elTextbox =
        > > elContainer.appendChild(document.createElement("input"));
        > > elTextbox.type = "text";
        > > elTextbox.style.width = (elCell.offsetWidth - 4) + "px";
        > > elTextbox.value = value;
        > > elTextbox.style.border = "1px solid 000";
        > > elTextbox.style.margin = "2px 0 0 0";
        > > elTextbox.style.height = "18";
        > >
        > >
        > > // Bug: 1802582 Set up a listener on each textbox to track on
        keypress
        > > // since SF/OP can't preventDefault on keydown
        > > YAHOO.util.Event.addListener(elTextbox, 'keypress', function(v){
        > > // Prevent form submit
        > > // Save on "enter"
        > > if((v.keyCode === 13)||(v.keyCode === 9)) {
        > > //xfer focus to next celleditor
        > > oSelf.fireEvent("editorSaveEvent", {editor:oEditor});
        > > }
        > > });
        > >
        > >
        > > // Set up a listener on each textbox to track the input value
        > > YAHOO.util.Event.addListener(elTextbox, "keyup", function(v){
        > > // Update the tracker value
        > > oEditor.value = elTextbox.value;
        > > oSelf.fireEvent("editorSaveEvent", {editor:oEditor});
        > > });
        > >
        > > // Select the text
        > > elTextbox.focus();
        > > elTextbox.select();
        > >
        > >
        > > oSelf.handleDisabledBtns();
        > >
        > > };
        > >
        > >
        > > There's a problem with this though;
        > > 1. when the the enter key is cicked, or i click away from the cell
        > > editor, the cell editor stays open and does not revert to non-edit
        mode.
        > > 2. The value is not being saved
        > > 3. no way near achieveing the desired tab/enter key effects
        > > 4. it does not pick up the border and height style values when I
        > > inspect the output using firebug hte following is outputted;-
        > >
        > > <input type="text" style="margin: 2px 0pt 0pt; width: 63px;"/>
        > >
        > > no margin or height style attrbute.
        > >
        > > Any help appreciated.
        > >
        > >
        > >
        > > ------------------------------------
        > >
        > > Yahoo! Groups Links
        > >
        > >
        > >
        > >
        ------------------------------------------------------------------------
        > >
        > >
        > > No virus found in this incoming message.
        > > Checked by AVG - http://www.avg.com
        > > Version: 8.0.173 / Virus Database: 270.8.1/1734 - Release Date:
        20/10/2008 7:25
        > >
        > >
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.