Custom exCell with grid - column width not correct

Hello:

I am trying to modify the sample “time choose” exCell found at:

docs.dhtmlx.com/doku.php?id=dhtm … le_excells

to add another field (HH : MM AM/PM).

It is working properly, but when I use that type in a grid, when I edit the cell the column width is too small so the AM/PM is hidden. When the cell is not being edited, it is showing a simple string like 12:43 PM, and here the column size is OK, but when going into edit mode, it needs more space.

I have tried making the input field width smaller and that helps but still I cannot get the column to size properly. Is there a way from within the exCell to resize the column… or is there another suggested approach to fixing this?

Thank you
Mike

Hi,

There are two approaches that come to my mind. Not tried either of them.

  1. Try the following in “edit” and “detach” of your custom excell type
this.edit=function(){
          this.val = this.getValue(); //save current value
          this.cell.innerHTML="<input type='text' style='width:50px;'><select style='width:50px;'><option value='AM'>AM<option value='PM'>PM</select>"; // editor's html
          this.cell.firstChild.value=parseInt(val); //set the first part of data
          if (val.indexOf("PM")!=-1) this.cell.childNodes[1].value="PM";
 
           [XX]this.cell_overflow=this.cell.style.overflow;
           this.cell.style.overflow="overflow";[XX] 
 
            this.cell.childNodes[0].onclick=function(e){ (e||event).cancelBubble=true; } //block onclick event
            this.cell.childNodes[1].onclick=function(e){ (e||event).cancelBubble=true; } //block onclick event
      }
      this.detach=function(){
          this.setValue(this.cell.childNodes[0].value+" "+this.cell.childNodes[1].value); //set the new value
[XX] this.cell.style.overflow = this.cell_overflow;[XX]
          return this.val!=this.getValue();    // compare the new and the old values
      }
  1. You have the reference to the contaning grid, within every excell object. Hence you can use the grid API to set the column width for the cell being edited. Please compute the intended width of the cell from the widths of the contained DOM elements. Do NOT rely on grid.adjustColumnSize, as it will adjust column sizes based on the width(length) of value returned from excell.getValue(), scaled by pixel-to-character ratio.
this.edit=function(){
          this.val = this.getValue(); //save current value
          this.cell.innerHTML="<input type='text' style='width:50px;'><select style='width:50px;'><option value='AM'>AM<option value='PM'>PM</select>"; // editor's html
          this.cell.firstChild.value=parseInt(val); //set the first part of data
          if (val.indexOf("PM")!=-1) this.cell.childNodes[1].value="PM";
 
         [XX] this.grid.setColWidth(<colIndex>,<computedWidth>) ;[XX]
           
 
            this.cell.childNodes[0].onclick=function(e){ (e||event).cancelBubble=true; } //block onclick event
            this.cell.childNodes[1].onclick=function(e){ (e||event).cancelBubble=true; } //block onclick event
      }
      this.detach=function(){
          this.setValue(this.cell.childNodes[0].value+" "+this.cell.childNodes[1].value); //set the new value
     [XX] this.grid.setColWidth(<colIndex>,<defaultWidth>);[XX]
          return this.val!=this.getValue();    // compare the new and the old values
      }

PS: For the lack of any availability(or my knowledge of the same) for styling/highlighting any text within :frowning: , my additions to the code template found at the url provided in the question, are encompassed within [XX][XX] tags. Please remove them from your code

Thank you … option 1 seemed to fix the problem!