<script>
    
  Katrid.init();
  let records = [];
  for (let i = 0;i <= 20;i++)
    records.push({
      stringField: 'Record ' + i,
      decimalField: 99.99 + i,
      one2Many: [
        {name: `Product ${i} / 1`, price: 10},
        {name: `Product ${i} / 2`, price: 0.99},
        {name: `Product ${i} / 3`, price: 0.10},
        {name: `Product ${i} / 4`, price: 1000},
      ]
    });
  let viewStructure = {
    records,
    fields: {
      stringField: {caption: 'String Field'},
      intField: {caption: 'Integer Field', type: 'IntegerField'},
      decimalField: {caption: 'Decimal Field', type: 'DecimalField'},
      dateField: {caption: 'Date Field', type: 'DateField'},
      dateTimeField: {caption: 'Date Time Field', type: 'DateTimeField'},
      timeField: {caption: 'Time Field', type: 'TimeField'},
      foreignKey: {
        caption: 'Foreign Key', type: 'ForeignKey', choices: [
          {id: 1, text: 'Item 1'},
          {id: 2, text: 'Item 2'},
          {id: 3, text: 'Item 3'},
          {id: 4, text: 'Item 4'},
        ]
      },
      choiceField: {
        caption: 'Choice Field', choices: {'1': 'Item 1', '2': 'Item 2', '3': 'Item 3', '4': 'Item 4'},
      },
      boolField: {
        caption: 'Boolean Field',
        type: 'BooleanField',
        helpText: 'Boolean field has two possible values: true/yes or false/no'
      },
      textField: {caption: 'Text Field', type: 'TextField'},
      radioField: {
        caption: 'Radio Field',
        type: 'RadioField',
        choices: {'1': 'Item 1', '2': 'Item 2', '3': 'Item 3', '4': 'Item 4'}
      },
      one2Many: {
        caption: 'One to Many Field',
        type: 'OneToManyField',
        views: {
          list: {
            fields: {
              name: {caption: 'Name'},
              price: {caption: 'Price', type: 'DecimalField'}
            }
          }
        }
      }
    },
    template: `<list>
<field name="stringField"></field>
<field name="intField"></field>
<field name="decimalField"></field>
<field name="dateField"></field>
<field name="dateTimeField"></field>
<field name="timeField"></field>
<field name="foreignKey"></field>
<field name="choiceField"></field>
<field name="boolField"></field>
<field name="textField"></field>
<field name="radioField"></field>
<field name="one2Many"></field>
</list>`,
  }

  
    let table = new Katrid.Forms.TableView(viewStructure);
    table.renderTo(document.getElementById('example1'));

    document.getElementById('btnSingleDialog').addEventListener('click', async () => {
      let dialog = new Katrid.Forms.TableView(viewStructure);
      document.getElementById('modalResult').innerText = await dialog.showDialog({multiple: false});
    })

    document.getElementById('btnMultipleDialog').addEventListener('click', async () => {
      let dialog = new Katrid.Forms.TableView(viewStructure);
      document.getElementById('modalResult').innerText = await dialog.showDialog({multiple: true});
    });

  </script>

    

      
  <script>

    // testing table grouping
    let recordGroups = [];
    for (let cat = 1; cat <= 5;cat++) {
      let g1 = {$str: 'Category ' + cat, $hasChildren: true, $children: []};
      recordGroups.push(g1);
      for (let sub = 1; sub <=5;sub++) {
        let g2 = {$str: `Sub-category ${cat}.${sub}`, $hasChildren: true, $children: []};
        g1.$children.push(g2);
        for (let i = 0;i <= 20;i++)
          g2.$children.push({
            name: 'Record ' + i,
            category: 'Category ' + cat,
            subcategory: 'Sub-category ' + sub,
          });
      }
    }
    let groupStructure = {
      recordGroups,
      fields: {
        name: {caption: 'Name'},
        category: {caption: 'Category'},
        subcategory: {caption: 'Sub-Category'},
      },
      template: `<list>
<field name="name"></field>
<field name="category"></field>
<field name="subcategory"></field>
</list>`,
    }

    let grouping = new Katrid.Forms.TableView(groupStructure);
    grouping.renderTo(document.getElementById('table-group'));

    document.getElementById('btnExpandGroup').addEventListener('click', () => {
      grouping.expandAll();
    })

    document.getElementById('btnCollapseGroup').addEventListener('click', () => {
      grouping.collapseAll();
    })

  </script>