Wijmo flexgrid knockout templates and formatter

Wijmo flexgrid knockout templates and formatter

Posted by: h.otte on 23 November 2018, 4:34 am EST

• 

  h.otte

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 23 November 2018, 4:34 am EST

  Hi,

  I use a flexgrid in combination with knockout and everything works fine until I try to use a formatter in the initialize-function.
  
  Then, suddenly my celltemplates don’t work anymore, even if the formatter is empty (see example: Formatter and Templates example.zip).
  
  I have the suspicion that the binding context gets lost or something similar.

  Do you have any idea or solution how I can use templates and the formatter in the same flexgrid?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 26 November 2018, 2:15 am EST

  Please use formatItem event instead of itemFormatter to use both cell templates and formatter at the same time.
  
  Please refer to the following code snippet:

  sender.formatItem.addHandler((s,e)=>{
                  if(e.panel.cellType == 4 || e.panel.cellType == 3)
                   {
                       e.cell.innerHTML = '<input type=\"checkbox\" />';
                   }
              });
  

  You may read more about formatItem event here: https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.FlexGrid.Class.html#formatItem

  ~Sharad

• 

  h.otte

  • Post Options:
  • Link
    Copy

  Posted 26 November 2018, 7:24 am EST

  thank you, that works like a charm.

  Now I have another question - how can I give the binding context into the rowheader?

  My actual code is not only a checkbox, but one that is bound to a value (otherwise it wouldn’t really make sense), something like:

  sender.formatItem.addHandler((s,e)=>{
                  if(e.panel.cellType == 4 || e.panel.cellType == 3)
                   {
                       e.cell.innerHTML = '<input type="checkbox" value="active" data-bind="checked: $item().active" />';
                   }
              });
  

  but when I use it this way, there is no connection between the checkboxes and the value of ‘active’ (I use the same input in another column)
  
  Usually, I’d set the binding in the columndefinition, but since I can only change the innerHtml of the cell and not the surrounding I’m kind of stuck.

  When I tried to set a EventListener like the fiddle (http://jsfiddle.net/mkgupta911/pq58z0yj/5/) uses, using ‘grid.rowHeaders.getCellElement(i, 0)’ didn’t work.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 27 November 2018, 3:13 am EST

  The issue with the approach is that knockout doesn’t apply bindings itself to dynamically created elements so you need to explicitly apply bindings for the element.
  
  Please refer to the following code snippet:

  let dataItem = e.panel.rows[e.row].dataItem;
                       e.cell.innerHTML = '<input type=\"checkbox\" data-bind="checked: active"/>';
                       // dataItem may not exists for TopLeft panel
                       if(dataItem){
                           ko.applyBindings(dataItem, e.cell);
                       }
  

  you may also refer to the following fiddle: http://jsfiddle.net/3efovhcq/

  ~Sharad

• 

  h.otte

  • Post Options:
  • Link
    Copy

  Posted 27 November 2018, 9:19 am EST

  thank you, now everything works