Dear Sirs,
I'm intendting to implement a CRUD function on the Grid component with a FieldSet.
See below screenshot attached.
- BryntumGrid_FieldSet.jpg (214.24 KiB) Viewed 273 times
When I select a row, then click the "Edit" button on the top bar, I would hope to get the values of the selected row and copy it to the FieldSet.
When I finish the editing, then click the "Apply" button on the bottom of the FieldSet, I would like to get the values of the FieldSet and copy it to the selected row of the grid.
Please advise if there is a method to get and copy the values between the store data and FieldSet.
// bryntum_grid_rest.js
import { Grid, AjaxStore, Model, Toast, FieldSet } from '../../js/bryntum/build/grid.module.js';
//import { jszip } from '../../js/node_modules/jszip/dist/jszip.js'; // Excel exporter
//import { zipcelx } from '../../js/node_modules/zipcelx/src/zipcelx.js'; // Excel exporter
class Population extends Model {
static fields = ['id', 'country', 'population', 'yearlychange', 'netchange', 'density', 'area', 'migrants', 'fert', 'age', 'urban' ]
}
const store = new AjaxStore({
modelClass : Population,
createUrl : "/populations/",
readUrl : "/populations/",
updateUrl : "/populations/",
deleteUrl : "/populations/",
autoLoad : true,
autoCommit : false,
pageSize: 10,
});
var grid = new Grid({
appendTo : 'container',
features : {
cellEdit: false,
sort: true,
group: true,
//filter: true,
quickFind: true,
//filterBar: true,
stripe: true,
},
// Headers will ripple on tap in Material theme
ripple : {
delegate : '.b-grid-header'
},
columns:[
//{ id:"checked", header:[{content:"masterCheckbox"}], template:"{common.checkbox()}", width:100 },
{ field: "select", text: "Select", type:"check", align: "center", flex: 1 },
{ field:"id", text:"id", flex:1 },
{ field:"country", text:"country", flex:2 },
{ field:"population", text:"population", flex:1, type: "number" },
{ field:"yearlychange", text:"yearlyChange", flex:1, type: "number" },
{ field:"netchange", text:"netChange", flex:1, type: "number"},
{ field:"density", text:"density", flex:1, type: "number"},
{ field:"area", text:"area", flex:1, type: "number"},
{ field:"migrants", text:"migrants", flex:1, type: "number"},
{ field:"fert", text:"fert", flex:1, type: "number"},
{ field:"age", text:"age", flex:1, type: "number"},
{ field:"urban", text:"urban", flex:1, type: "number"},
],
// Bottom toolbar controls the paging
//bbar : {
// type : 'pagingtoolbar'
//},
tbar : [
{
type : 'button',
ref : 'useCompact',
text : 'Use compact mode',
icon : 'b-fa-square',
pressedIcon : 'b-fa-check-square',
toggleable : true,
onToggle : ({ pressed }) => {
if (pressed) {
Toast.show({
html : 'Compact mode - Click a column header and type to filter',
timeout : 5000
});
}
grid.features.filterBar.compactMode = pressed;
}
},
{
type : 'button',
ref : 'removeAll',
text : 'Remove all filters',
icon : 'b-fa-times',
onAction : () => grid.store.clearFilters()
},
{
type : 'button',
ref : 'addButton',
icon : 'b-fa-plus',
text : 'Add row',
tooltip : 'Adds a new row (at bottom)',
onAction : () => {
const added = grid.store.add({
country: "Test-01",
population: "1000",
yearlychange: "0.2",
netchange: "200",
density: "100",
area: "1000",
migrants: "100",
fert: "0.25",
age: "35",
urban: "0.75",
});
grid.selectedRecord = added[0];
}
},
{
type : 'button',
ref : 'editButton',
icon : 'b-fa-edit',
text : 'Edit',
disabled : false,
tooltip : 'Edit the selected row',
onAction : () => {
}
},
{
type : 'button',
ref : 'deleteButton',
icon : 'b-fa-remove',
text : 'Delete',
disabled : false,
tooltip : 'Delete the selected row',
onAction : () => {
}
},
{
type : 'button',
ref : 'saveButton',
icon : 'b-fa-save',
text : 'Save',
disabled : false,
tooltip : 'Saves changes (added, modified and removed rows)',
onAction : async() => {
await grid.store.commit();
Toast.show('Changes saved');
}
},
],
store
});
//store.load()
const populationForm = new FieldSet({
appendTo : 'container',
title : 'Population Editor',
width : '5em',
hidden: false,
collapsible: { direction: 'left' },
items : [
{ type : 'text', label : 'Id' },
{ type : 'text', label : 'Country' },
{ type : 'number', label : 'Population' },
{ type : 'number', label : 'Yearly Change' },
{ type : 'number', label : 'Net Change' },
{ type : 'number', label : 'Density' },
{ type : 'number', label : 'Area' },
{ type : 'number', label : 'Migrants' },
{ type : 'number', label : 'Fert' },
{ type : 'number', label : 'Age' },
{ type : 'number', label : 'Urban' },
{
type : 'button',
text : 'Apply',
style : 'margin:2em 0 1em 0',
onClick() {
Toast.show('You clicked the button');
}
}
]
});