const fields = [
  { fieldName: "icon" },
  { fieldName: "tree" },
  { fieldName: "do" },
  { fieldName: "si" },
  { fieldName: "gu" }
];

const columns = [
  {
    name: "do",
    fieldName: "do",
    width: "150",
    header: { text: "Province" }
  },
  {
    name: "si",
    fieldName: "si",
    width: "100",
    header: { text: "when" }
  },
  {
    name: "gu",
    fieldName: "gu",
    width: "100",
    header: { text: "Gu" }
  }
];

const xmlData =
  "<rows>" +
  "  <row icon='0' do='Gyeonggi-do'>" +
  "    <row icon='0' do='Gyeonggi-do' si='Seongnam'>" +
  "      <row icon='0' do='Gyeonggi-do' si='Seongnam' gu='Bundang-gu' />" +
  "      <row icon='0' do='Gyeonggi-do' si='Seongnam' gu='Sujeong-gu'/>" +
  "    </row>" +
  "    <row icon='0' do='Gyeonggi-do' si='Suwon'>" +
  "      <row icon='0' do='Gyeonggi-do' si='Suwon' gu='Paldal-gu' />" +
  "      <row icon='0' do='Gyeonggi-do' si='Suwon' gu='Yeongtong-gu' />" +
  "    </row>" +
  "    <row icon='0' do='Gyeonggi-do' si='Anyang' />" +
  "    <row icon='0' do='Gyeonggi-do' si='Uijeongbu' />" +
  "    <row icon='0' do='Gyeonggi-do' si='Gimpo' />" +
  "  </row>" +
  "</rows>";

const { treeView, dataProvider } = RealGrid.createTree("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (tree) => {
    tree.getDataSource().fillXmlData(xmlData, "rows", "", "");
    tree.expandAll();
  }
}, {
  fields
});

window.treeView = treeView;
window.dataProvider = dataProvider;

function btnClearRows() {
  dataProvider.clearRows();
}

function btnFillXmlData() {
  dataProvider.fillXmlData(xmlData, { rows: "row", icon: "icon" });
  treeView.expandAll();
}