anchor.diff:                .then(nameColumn, SortDirection.DESCENDING));
   ----
   
  +
   [[components.grid.editing]]
  -== Editing
  +== Editing Items Inside Grid
   
   Grid supports line-based editing, where double-clicking a row opens the row
   editor. In the editor, the input fields can be edited, as well as navigated with
   kbd:[Tab] and kbd:[Shift+Tab] keys. If validation fails, an error is displayed and the user
   can correct the inputs.
   
  -To enable editing, you need to call [methodname]#setEditorEnabled(true)# for the
  -grid.
  -
  -
  -[source, java]
  -----
  -Grid<Person> grid = new Grid(persons);
  -grid.setEditorEnabled(true);
  -----
  -
  -Grid supports two row editor modes - buffered and unbuffered. The default mode is
  -buffered. The mode can be changed with [methodname]#setBuffered(false)#
  +The [classname]#Editor# is accessible via [methodname]#getEditor()#, and to enable editing, you need to call [methodname]#setEnabled(true) on it.
  +
  +The editor is based on [classname]#Binder# which is used to bind the data
  +to the editor. See <<dummy/../../../framework/datamodel/datamodel-forms.asciidoc#datamodel.forms.beans,"Binding Beans to Forms">> for more information on setting up field components and validation by using [classname]#Binder.
  +The [classname]#Binder# needs to be set with [methodname]#setBinder# in [classname]#Editor#.
  +
  +[source, java]
  +----
  +List<Todo> items = Arrays.asList(new Todo("Done task", true),
  +        new Todo("Not done", false));
  +
  +Grid<Todo> grid = new Grid<>();
  +
  +TextField taskField = new TextField();
  +CheckBox doneField = new CheckBox();
  +Binder<Todo> binder = new Binder<>();
  +
  +binder.bind(taskField, Todo::getTask, Todo::setTask);
  +binder.bind(doneField, Todo::isDone, Todo::setDone);
  +
  +grid.getEditor().setBinder(binder);
  +grid.getEditor().setEnabled(true);
  +
  +Column<Todo, String> column = grid
  +        .addColumn(todo -> String.valueOf(todo.isDone()));
  +column.setWidth(75);
  +column.setEditorComponent(doneField);
  +
  +grid.addColumn(Todo::getTask).setEditorComponent(taskField);
  +----
  +
  +It is possible to customize the used editor component for each column and row,
  +by using [methodname]#setEditorComponentGenerator(EditorComponentGenerator)# in
  +[classname]#Column#.
  +
   
   [[components.grid.editing.buffered]]
  -=== Buffered Mode
  -
  -The editor has a [guibutton]#Save# button that commits
  -the data item to the container data source and closes the editor. The
  -[guibutton]#Cancel# button discards the changes and exits the editor.
  -
  -A row under editing is illustrated in <<figure.components.grid.editing>>.
  +=== Buffered / Unbuffered Mode
  +
  +Grid supports two editor modes - buffered and unbuffered. The default mode is
  +buffered. The mode can be changed with [methodname]#setBuffered(false)#.
  +
  +In the buffered mode, editor has two buttons visible: a [guibutton]#Save# button that commits
  +the modifications to the bean and closes the editor and a [guibutton]#Cancel# button
  +discards the changes and exits the editor.
  +
  +Editor in buffered mode is illustrated in <<figure.components.grid.editing>>.
   
   [[figure.components.grid.editing]]
   .Editing a Grid Row
   image::img/grid-editor-basic.png[width=50%, scaledwidth=75%]
   
  -[[components.grid.editing.unbuffered]]
  -=== Unbuffered Mode
  -
  -The editor has no buttons and all changed data is committed directly
  -to the container. If another row is clicked, the editor for the current row is closed and
  +
  +In the unbuffered mode, the editor has no buttons and all changed data is committed directly
  +to the data provider. If another row is clicked, the editor for the current row is closed and
   a row editor for the clicked row is opened.
   
  -[[components.grid.editing.fields]]
  -=== Editor Fields
  -
  -The editor fields are configured in [classname]#Column#and bound to
  -the bean data source with a [classname]#Binder#, which
  -also handles tasks such as validation, as explained later.
  -
  -To disable editing in a particular column, you can call
  -[methodname]#setEditorField()# in the [classname]#Column# object with
  -[parameter]#null# parameter.
  -
  -In the following example, we configure a field with validation and styling:
  -
  -
  -[source, java]
  -----
  -// Create an editor for name
  -TextField nameEditor = new TextField();
  -
  -// Custom CSS style
  -nameEditor.addStyleName("nameeditor");
  -
  -// Add editor to name column
  -nameColumn.setEditorField(nameEditor);
  -----
  -
  -Setting an editor field to [parameter]#null# deletes the currently existing
  -editor field and makes the column non-editable.
  -
  -
  -ifdef::web[]
  +
   [[components.grid.editing.captions]]
   === Customizing Editor Buttons
   
  
positive.code: [classname]#DecimalFormat# and [classname]#ChoiceFormat#, or by
  [methodname]#String.format()#.
  
  ifdef::web[]
  +
  For example:
  +
  [source, java]
  ----
  // Define some columns
  Column<String> nameCol = grid.addColumn(person::getName);
  Column<Integer> bornCol = grid.addColumn(person:getBirthYear);
  Column<Integer> slettersCol = grid.addColumn("sletters");
  Column<Double> ratingCol = grid.addColumn("rating");
  
  // Use decimal format
  bornCol.setRenderer(new NumberRenderer(
      new DecimalFormat("in #### AD")));
  
  // Use textual formatting on numeric ranges
  slettersCol.setRenderer(new NumberRenderer(
      new ChoiceFormat("0#none|1#one|2#multiple")));
  
  // Use String.format() formatting
  ratingCol.setRenderer(new NumberRenderer(
      "%02.4f", Locale.ENGLISH));
  
  // Add some data rows
  grid.addItems(new Person("Nicolaus Copernicus", 1473, 2, 0.4),
                new Person("Galileo Galilei",     1564, 0, 4.2),
                new Person("Johannes Kepler",     1571, 1, 2.3));
  
  ----
  endif::web[]
  [classname]#ProgressBarRenderer#:: Renders a progress bar in a column with a [classname]#Double# type. The value
  must be between 0.0 and 1.0.
  
  ifdef::web[]
  +
  For example:
  +
  [source, java]
  ----
  // Define some columns
  Column<String> nameCol = grid.addColumn(person::getName);
  Column<Double> ratingCol = grid.addColumn("rating");
  ratingCol.setRenderer(new ProgressBarRenderer());
  
  // Add some data rows
  grid.addItems(new Person("Nicolaus Copernicus", 0.4),
                new Person("Galileo Galilei",     4.2),
                new Person("Johannes Kepler",     2.3));
  ----
  endif::web[]
  [classname]#TextRenderer#:: Displays plain text as is. Any HTML markup is quoted.
  
  
  
  [[components.grid.renderer.custom]]
  
negative.code: 
      });
      cell.setComponent(filterField);
  }
  ----
  ////
  
  
  [[components.grid.sorting]]
  == Sorting
  