Table View
Dialogs
<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>
Grouping
<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>