What's new in Grid v4.0.0+
Grid v4.2.0
Improved MessageDialog
MessageDialog now offers alert(), prompt() and confirm() functions.
They are all async and accept a single object argument to configure them:
// Showing a basic alert
MessageDialog.alert({
title : 'Important information',
message : 'An alert displaying some very important information'
});
// Confirming some user action
const result = await MessageDialog.confirm({
title : 'Confirm action',
message : 'Proceed with removing all tasks?'
});
if (result.button === MessageDialog.okButton) {
// ...
}
// Prompting for input
const result = await MessageDialog.prompt({
title: 'New task',
message : 'Enter name:'
});
if (result.button === MessageDialog.okButton) {
newTask.name = result.text;
}
New Responsive mixin
New mixin added to Core to be used by the new TaskBoard component, but can be mixed into any Widget to simplify giving it responsive behaviour. For example to create a responsive Button:
class ResponsiveButton extends Button.mixin(Responsive) {}
const button = new ResponsiveButton({
breakpoints : {
width : {
// When width drops to 50 or below, hide text and show icon
50 : {
name : 'small',
configs : { text : null, icon : 'b-fa b-fa-plus' }
},
// When width is above 50, hide icon and show text
'*' : {
name : 'large',
configs : { text : 'Add', icon : null }
}
}
}
});
See the API docs for more information.
List with grouped store
The List widget now renders group headers when used with a grouped store. Useful for example in a Combo picker when there are a lot of items.
Grid v4.2.3
Configurable ExportDialog widget
In previous releases it was difficult to configure the export dialog widget. In the new release we applied the approach which proved itself to be very flexible. You can customize widgets using the new public config exportDialog:
const grid = new Grid({
features : {
pdfExport : {
exportDialog : {
items : {
// hide the field
orientationField : { hidden : true },
// move the field up
exporterTypeField : { weight : 150 },
// change default format in exporter
fileFormatField : { value : 'png' },
myField : {
type : 'text',
label : 'My field'
}
}
}
}
}
});
grid.features.pdfExport.showExportDialog();
You can add new fields, buttons, containers (any widget, essentially) and use their values in the export listeners. For more info please refer to the updated Export Dialog documentation.
Also, export dialog has become publicly available on the feature instance, which allows adding listeners directly to it:
const grid = new Grid({
features : {
pdfExport : true
}
});
grid.features.pdfExport.exportDialog.on({
show() {
const { columnsField } = this.widgetMap;
// When dialog opens all columns with name matching 'date' would
// be selected in the columns field
columnsField.value = grid.columns.query(c => c.name.match(/date/i));
}
})
Compared to previous releases export dialog is always there when you refer to it.
Grid v4.2.5
Display group summary in the group header
We recently improved the GroupSummary feature to allow rendering summaries to the group header when the group was collapsed (the collapseToHeader config). In this version we add a new config called target, allowing you to specify that summaries should always be displayed in the group headers. It accepts a string value of either 'footer' (the default) or 'header'.
const grid = new Grid({
features : {
groupSummary : {
target : 'header'
}
}
});
Grid v4.3.0
Improved WidgetColumn
WidgetColumn now offers two-way binding by configuring the column's field widget with a name corresponding to a Model field name. See this demonstrated in the new widgetcolumn example.
{
text : 'Slider bound to age',
type : 'widget',
width : 250,
cls : 'slidercell',
widgets : [
{
type : 'slider',
name : 'age',
showValue : false,
showTooltip : true
}
]
}
You also now have access to the column widgets as a param provided to the renderer method. This makes it easy to hide / show or mutate widgets on a per-row basis.
{
text : 'Checkboxes',
type : 'widget',
align : 'center',
width : 200,
renderer : ({ widgets }) => {
// We have access to the widgets inside the cell renderer method, so you can hide / show widgets or
// mutate their value or state
// Set some random values
widgets[Math.floor(Math.random() * 2.99)].checked = true;
},
widgets : [
{
type : 'checkbox'
},
{
type : 'checkbox'
},
{
type : 'checkbox'
}
]
}
Collapsible Panels
Panels now support the collapsibleconfig. This adds a tool in the panel's header that is used to reduce the panel to only its header.
The direction of the panel's collapse can be changed by using a config object for the collapsible config.
Merging cells to span multiple rows
The new MergeCells feature can merge cells with the same value to create a single large cell spanning multiple rows. Applies to sorted columns configured with mergeCells : true.
const grid = new Grid({
features : {
mergeCells : true,
sort : 'city'
},
data : [
{ id : 1, city : 'Amsterdam', name : 'Daan', occupation : 'Cheesemaker' },
{ id : 2, city : 'Amsterdam', name : 'Levi', occupation : 'Tulip farmer' },
{ id : 3, city : 'Amsterdam', name : 'Emma', occupation : 'Tulip farmer' },
{ id : 4, city : 'Rome', name : 'Giulia', occupation : 'Art conservator' },
{ id : 5, city : 'Rome', name : 'Francesco', occupation : 'Cheesemaker' },
],
columns : [
{ field : 'city', text : 'City', flex : 1, mergeCells : true },
{ field : 'name', text : 'Name', flex : 1 },
{ field : 'occupation', text : 'Occupation', flex : 1, mergeCells : true }
]
});