igGrid column Edit Template

Question

Does igGrid support column edit/new templates?

I have a grid defined as below. But the template won't work when editing/adding a new row. The "ChooseEmployee" function displays a popup dialog for users to choose employee's from.

$(function() {
  var employees = [{
    Id: 1,
    "Name": "John, Smith",
    "DirectReports": "Mary, Ann;David,Lowe"
  }, {
    Id: 2,
    "Name": "Mary, Ann",
    "DirectReports": "Kelly,Walsh;Kevin, Edwards;Terri, Gibson"
  }];
 
  $('#grid1').igGrid({
    dataSource: employees,
    primaryKey: "Id",
    autGenerateColumns: false,
    width: "100%",
    columns[{
      headerText: "Id",
      key: "Id",
      dataType: "number",
      width: 100
    }, {
      headerText: "Name",
      key: "Name",
      dataType: "string",
      width: 120
    }, {
      headerText: "Reports",
      key: "DirectReports",
      dataType: "object",
      width: 300,
      template: "<div style='clear:both'><div style='overflow:hidden;white-space:wrap;max-width:320px;width:320px;float:left;'>${DirectReports}</div><input type='button' onclick='chooseEmployees(${Id});' value='...' style='float:left;' /></div>"
    }], 
   features: [ {name: "Updating", enableAddRow: true, editMode: "row" } ] 
  });

});

<table id="grid1"></table>

Konstantin Dinev · Answer 1 · 2014-11-13T07:40:45.077

Basically you would have to cancel the original row editing that the igGrid is performing and you would have to invoke row updating and row adding programmatically. Also this template will work for rows that already exist, but would not be applied when adding a new row. You can try the Row Edit Template feature of the igGrid as it provides in the box editing dialog. If you want to choose from a list of values for this specific column, then you can use a combo editor provider for this column.

Option for configuring editor provider for the column.

updateRow API method.

addRow API method.

Setting up a row edit template.

igGrid column Edit Template

1 Answers1