const fields = [{
  fieldName: "field1"
}, {
  fieldName: "field2"
}];

const columns = [{
  name: "column1",
  fieldName: "field1",
  width: 150,
  header: {
    text: "Manufacturer"
  },
  styles: {
    textAlignment: "center"
  },
  lookupDisplay: true,
  values: ["O","M"],
  labels: ["Ottogi","Maeil Dairy"],
  editor:{
    type: "dropdown"
  }
}, {
  name: "column2",
  fieldName: "field2",
  width: 150,
  header: {
    text: "Product Name"
  },
  styles: {
    textAlignment: "center"
  },
  editor:{
    type:"dropdown"
  },
  lookupDisplay: true,
  lookupSourceId: "type1",
  lookupKeyFields: [
    "field1",
    "field2"
  ]
}];

function setLookups(grid) {
  grid.setLookups([{
    id: "type1",
    levels: 2,
    keys: [
      ["O", "O1"],
      ["O", "O2"],
      ["O", "O3"],
      ["M", "M1"],
      ["M", "M2"],
      ["M", "M3"],
    ],
    values: [
      ["3-Minute Curry"],
      ["Tuna"],
      ["Bulgogi Pizza"],
      ["Milk"],
      ["Bio Strawberry"],
      ["Sangha Cheese"]
    ]
  }]);
}

const rows = [
  ["O", "O1"],
  ["M", "M1"],
  ["O", "O2"],
  ["O", "O3"],
  ["M", "M2"],
  ["M", "M3"],
  ["O", "O3"]
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    setLookups(grid);
    
    grid.getDataSource().setRows(rows);
    
    grid.onCellEdited = function (grid, itemIndex, dataRow, field) {
      var fieldName = dataProvider.getOrgFieldName(field);
      
      if (fieldName == "field1") {
        grid.setValue(itemIndex, "field2", "");
      }
    };
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;