CODEWITHSUNDEEP
yuiyui-datatable
Dheeraj Kumar Aggarwal
Dheeraj Kumar Aggarwal

Reputation: 642

How to set Date Cell Editor's context position in yui datatable

I want to set the inline date cell editor's position to ["tr", "br"] with reference to a yui datatable cell. How can I do that?

this way is not working -- column.editor.cfg.setProperty("context", [target, "tr", "br"])

Upvotes: 0

Views: 523

Answers (2)

Brak
Brak

Reputation: 306

I know I'm tardy to the party, but I like completeness...

Using Dheeraj Kumar Aggarwal's code as a starting point, I made some improvements, including defining "d". The code below only repositions the cell editor if it would have fallen off the edge of the screen, either horizontally or vertically (or both).

objDataTable.doBeforeShowCellEditor = function(cellEditor){
    if(cellEditor.calendar){
        // Move Editor
        var d = YAHOO.util.Dom,
            elContainer = cellEditor.getContainerEl(),
            elTd = cellEditor.getTdEl(elContainer),
            x = d.getX(elTd),
            y = d.getY(elTd);
            numWindowWidth = d.getDocumentWidth();    /// The size of the browser frame
            numWindowHeight = d.getDocumentHeight();  /// The size of the browser frame
        //TODO: remove scrolling logic
        // SF doesn't get xy for cells in scrolling table
        // when tbody display is set to block
        if(isNaN(x) || isNaN(y)) {
            // console.log('this.getTbodyEl()',this.getTbodyEl(),'this',this);
            var elTbody = this.getTbodyEl();
            x = elTd.offsetLeft + // cell pos relative to table
                d.getX(elTbody.parentNode) - // plus table pos relative to document
                elTbody.scrollLeft; // minus tbody scroll
            y = elTd.offsetTop + // cell pos relative to table
                d.getY(elTbody.parentNode) - // plus table pos relative to document
                elTbody.scrollTop + // minus tbody scroll
                this.getTheadEl().offsetHeight; // account for fixed THEAD cells
        }
        cellEditor.show();
        //alert(x + " : X : width : " + elContainer.offsetWidth);
        if (x + elContainer.offsetWidth > numWindowWidth) {
            x = x - elContainer.offsetWidth + elTd.offsetWidth;
        }
        if (y + elContainer.offsetHeight > numWindowHeight) {
            y = y - elContainer.offsetHeight + elTd.offsetHeight;
        }
        //alert(x + " : X");
        elContainer.style.left = x + 'px';
        elContainer.style.top = y + 'px';
        // console.log('x',x,'y',y,'elContainer',elContainer);
    }
    return true;
};

Upvotes: 0

Dheeraj Kumar Aggarwal
Dheeraj Kumar Aggarwal

Reputation: 642

I just overrided the datatable's doBeforeShowCellEditor method and changed the context position logic of cell editor. Most of the code is copied from YUI basecelleditor's move function. http://developer.yahoo.com/yui/docs/YAHOO.widget.BaseCellEditor.html

DataTable.doBeforeShowCellEditor = function(cellEditor){
   if(cellEditor.calendar){
      // Move Editor
      var elContainer = cellEditor.getContainerEl(),
      elTd = cellEditor.getTdEl(elContainer),
      x = d.getX(elTd),
      y = d.getY(elTd);
      //TODO: remove scrolling logic
      // SF doesn't get xy for cells in scrolling table
      // when tbody display is set to block
      if(isNaN(x) || isNaN(y)) {
        var elTbody = this.getTbodyEl();
        x = elTd.offsetLeft + // cell pos relative to table
          d.getX(elTbody.parentNode) - // plus table pos relative to document
          elTbody.scrollLeft; // minus tbody scroll
        y = elTd.offsetTop + // cell pos relative to table
          d.getY(elTbody.parentNode) - // plus table pos relative to document
          elTbody.scrollTop + // minus tbody scroll
          this.getTheadEl().offsetHeight; // account for fixed THEAD cells
      }
      cellEditor.show();
      //alert(x + " : X : width : " + elContainer.offsetWidth);
      x = x - elContainer.offsetWidth + elTd.offsetWidth;
      //alert(x + " : X");
      elContainer.style.left = x + "px";
      elContainer.style.top = y + "px";          
    }
    return true;
  };

Upvotes: 1

Related Questions