Editors
index
Description
Slickgrid-Universal
ships with a few default inline editors (checkbox, dateEditor, float, integer, text, longText).
Note: For the Float Editor, you can provide decimal places with params: { decimalPlaces: 2 }
to your column definition else it will be 0 decimal places by default.
Required Grid Option
Editors won't work without these 2 flags enableCellNavigation: true
and editable: true
enabled in your Grid Options, so make sure to always to always defined them. Also note that you can toggle the grid to read only (not editable) via the editable
grid option flag.
Demo
with plain javascript/jQuery
with Aurelia Custom Components
How to use Inline Editors
Simply call the editor in your column definition with the Editors
you want, as for example (editor: { model: Editors.text }
). Here is an example with a full column definition:
Demo with Float Editor and Dollar Currency Formatter
This probably comes often, so here's all the setting you would need for displaying & editing a dollar currency value with 2 decimal places.
Editor Output Type & Save Output Type
You could also define an outputType
and a saveOutputType
to an inline editor. There is only 1 built-in Editor with this functionality for now which is the dateEditor
. For example, on a date field, we can call this outputType: FieldType.dateIso
(by default it uses dateUtc
as the output):
So to make it more clear, the saveOutputType
is the format that will be sent to the onCellChange
event, then the outputType
is how the date will show up in the date picker (Vanilla-Calendar) and finally the type
is basically the input format (coming from your dataset). Note however that each property are cascading, if 1 property is missing it will go to the next one until 1 is found... for example, on the onCellChange
if you aren't defining saveOutputType
, it will try to use outputType
, if again none is provided it will try to use type
and finally if none is provided it will use FieldType.dateIso
as the default.
Perform an action After Inline Edit
Recommended way
What is ideal is to bind to a SlickGrid Event, for that you can take a look at this Docs - On Events
Not recommended
You could also, perform an action after the item changed event with onCellChange
. However, this is not the recommended way, since it would require to add a onCellChange
on every every single column definition.
Custom Inline Editor
To create a Custom Editor, you need to create a class
that will extend the Editors
interface and then use it in your grid with editor: { model: myCustomEditor }
and that should be it.
To use dependency injection with an Editor
make sure your aurelia dependencies are before the args
constructor parameter. args
must be the last parameter in your constructor because we wrap all Editors
in Aurelia's Factory
resolver so DI can work with slickgrid Editors
Once you are done with the class, just reference it's class name as the editor
, for example:
Class implementing Editor
Use it in your Column Definition
For Custom Editor class example, take a look at custom-inputEditor.ts
Custom Editor with Aurelia Custom Element
I added a new Example 26 which have both Custom Editors & Filters which uses Aurelia Custom Elements. The 2nd column "Assignee" is the column that uses both (it's a simple select dropdown created as an Aurelia Custom Elements here) and you need to create a Custom Editor like here and use that Custom Editor in your column definition like here.
Personally I don't find this very straightforward and I don't recommend using Aurelia Custom Elements for Editors/Filters as it adds a lot of boilerplate (compare to 1 step with a jQuery Custom Editor) but if you really wish to go that route, it's now possible following the steps shown below.
The steps to use an Aurelia Custom Elements as a Custom Editor are the following:
Create a Custom Editor that will handle the creation or compilation of the Aurelia Custom Element into a SlickGrid Editors. For that you can take a look at this Custom Editor
Define your Aurelia Custom Element, for example take a look at this simple Select Custom Element
Use the Custom Editor inside your Column Definitions, for that you can see previous paragraph here
How to prevent Editor from going to the next bottom cell?
The default behavior or SlickGrid is to go to the next cell at the bottom of the current cell that you are editing. You can change and remove this behavior by enabling autoCommitEdit
which will save current editor and remain in the same cell
OnClick Action Editor (icon click)
Instead of an inline editor, you might want to simply click on an edit icon that could call a modal window, or a redirect URL, or whatever you wish to do. For that you can use the inline onCellClick
event and define a callback function for the action (you could also create your own Custom Formatter).
The
Formatters.editIcon
will give you a pen icon, while aFormatters.deleteIcon
is an "x" icon
The args
returned to the onCellClick
callback is of type OnEventArgs
which is the following:
AutoComplete Editor
The AutoComplete Editor has the same configuration (except for the model: Editors.autoComplete
) as the AutoComplete Filter, so you can refer to the AutoComplete Filter Wiki for more info on how to use it.
Select Editors
The library ships with two select editors: singleSelectEditor and the multipleSelectEditor. Both support the multiple-select library, but fallback to the bootstrap form-control style if you decide to exclude this library from your build. These editors will work with a list of foreign key values (custom structure not supported) and can be displayed properly with the collectionFormatter. example 3 has all the details for you to get started with these editors.
Here's an example with a collection
, collectionFilterBy
and collectionSortBy
Editor Options (MultipleSelectOption
interface)
MultipleSelectOption
interface)All the available options that can be provided as editorOptions
to your column definitions can be found under this multipleSelectOption interface and you should cast your editorOptions
to that interface to make sure that you use only valid options of the multiple-select.js
library.
Collection Async Load
You can also load the collection asynchronously, but for that you will have to use the collectionAsync
property, which expect a Promise to be passed (it actually accepts 3 types: HttpClient
, FetchClient
or regular Promise
).
Load the collection through an Http call
Modifying the collection afterward
If you want to modify the collection afterward, you simply need to find the associated Column reference from the Column Definition and modify the collection
property (not collectionAsync
since that is only meant to be used on page load).
For example
Collection Label Prefix/Suffix
You can use labelPrefix
and/or labelSuffix
which will concatenate the multiple properties together (labelPrefix
+ label
+ labelSuffix
) which will used by each Select Filter option label. You can also use the property separatorBetweenTextLabels
to define a separator between prefix, label & suffix.
Note If enableTranslateLabel
flag is set to True
, it will also try to translate the Prefix / Suffix / OptionLabel texts.
For example, say you have this collection
You can display all of these properties inside your dropdown labels, say you want to show (symbol with abbreviation and country name). Now you can.
So you can create the multipleSelect
Filter with a customStructure
by using the symbol as prefix, and country as suffix. That would make up something like this:
$ USD USA
$ CAD Canada
with a customStructure
defined as
Collection Label Render HTML
By default HTML is not rendered and the label
will simply show HTML as text. But in some cases you might want to render it, you can do so by enabling the enableRenderHtml
flag.
NOTE: this is currently only used by the Editors that have a collection
which are the MultipleSelect
& SingleSelect
Editors.
multiple-select.js
Options
multiple-select.js
OptionsYou can use any options from Multiple-Select.js and add them to your filterOptions
property. However please note that this is a customized version of the original (all original lib options are available so you can still consult the original site for all options).
Couple of small options were added to suit Aurelia-SlickGrid needs, which is why it points to aurelia-slickgrid/lib
folder (which is our customized version of the original). This lib is required if you plan to use multipleSelect
or singleSelect
Filters. What was customized to (compare to the original) is the following:
okButton
option was added to add an OK button for simpler closing of the dropdown after selecting multiple options.okButtonText
was also added for locale (i18n)
offsetLeft
option was added to make it possible to offset the dropdown. By default it is set to 0 and is aligned to the left of the select element. This option is particularly helpful when used as the last right column, not to fall off the screen.autoDropWidth
option was added to automatically resize the dropdown with the same width as the select filter element.autoAdjustDropHeight
(defaults to true), when set will automatically adjust the drop (up or down) heightautoAdjustDropPosition
(defaults to true), when set will automatically calculate the area with the most available space and use best possible choise for the drop to show (up or down)autoAdjustDropWidthByTextSize
(defaults to true), when set will automatically adjust the drop (up or down) width by the text size (it will use largest text width)to extend the previous 3 autoAdjustX flags, the following options can be helpful
minWidth
(defaults to null, to use whenautoAdjustDropWidthByTextSize
is enabled)maxWidth
(defaults to 500, to use whenautoAdjustDropWidthByTextSize
is enabled)adjustHeightPadding
(defaults to 10, to use whenautoAdjustDropHeight
is enabled), when usingautoAdjustDropHeight
we might want to add a bottom (or top) padding instead of taking the entire available spacemaxHeight
(defaults to 275, to use whenautoAdjustDropHeight
is enabled)
Code
Editor Options
Column Editor editorOptions
Some of the Editors could receive extra options, which is mostly the case for Editors using external dependencies (e.g. autocompleter
, date
, multipleSelect
, ...) you can provide options via the editorOptions
, for example
Grid Option `defaultEditorOptions
You could also define certain options as a global level (for the entire grid or even all grids) by taking advantage of the defaultEditorOptions
Grid Option. Note that they are set via the editor type as a key name (autocompleter
, date
, ...) and then the content is the same as editorOptions
(also note that each key is already typed with the correct editor option interface), for example
Validators
Each Editor needs to implement the validate()
method which will be executed and validated before calling the save()
method. Most Editor will simply validate that the value passed is correctly formed. The Float Editor is one of the more complex one and will first check if the number is a valid float then also check if minValue
or maxValue
was passed and if so validate against them. If any errors is found it will return an object of type EditorValidatorOutput
(see the signature on top).
Custom Validator
If you want more complex validation then you can implement your own Custom Validator as long as it implements the following signature.
So the value
can be anything but the args
is interesting since it provides multiple properties that you can hook into, which are the following
And finally the Validator Output has the following signature
So if we take all of these informations and we want to create our own Custom Editor to validate a Title field, we could create something like this:
and use it in our Columns Definition like this:
Disabling specific cell edit
This can be answered by searching on Stack Overflow Stack Overflow and this is the best answer found.
More info can be found in this Wiki - Grid & DataView Events.
With that in mind and the code from the SO answer, we end up with the following code.
View
Component
Editors on Mobile Phone
If your grid uses the autoResize
and you use Editors in your grid on a mobile phone, Android for example, you might have undesired behaviors. It might call a grid resize (and lose input focus) since the touch keyboard appears. This in term, is a bad user experience to your user, but there is a way to avoid this, you could use the pauseResizer
View
Component
Turning individual rows into edit mode
Using the Row Based Editing Plugin you can let the user toggle either one or multiple rows into edit mode, keep track of cell changes and either discard or save them on an individual basis using a custom onBeforeRowUpdated
hook.
Dynamically change Column Editor
You can dynamically change a column editor by taking advantage of the onBeforeEditCell
event and change the editor just before the cell editor opens. However please note that the library keeps 2 references and you need to update both references as shown below.
With the code sample shown below, we are using an input checkbox to toggle the Editor between Editors.longText
to Editors.text
and vice/versa
Last updated