Client-side Editing

 OrderIDShipNameShipCityShippedDate
Delete10248Vins et alcools ChevalierReims776995200000
Delete10249Toms SpezialitätenMünster776476800000
Delete10250Hanari CarnesRio de Janeiro776649600000
Delete10251Victuailles en stockLyon776908800000
Delete10252Suprêmes délicesCharleroi776563200000
Delete10253Hanari CarnesRio de Janeiro776995200000
Delete10254Chop-suey ChineseBern777600000000
Delete10255Richter SupermarktGenève776908800000
Delete10256Wellington ImportadoraResende777081600000
Delete10257HILARIÓN-AbastosSan Cristóbal777513600000
Description

The C1GridView supports client editing. This sample shows how to update a dataset stored in the session object when client editing is used and how to provide client-side custom editors.

The following properties are used in this sample:

  • AllowClientEditing - to allow end-user to edit current cell value.
  • AllowKeyboardNavigation - to allow end-user to change current cell position using keyboard.
  • HighlightCurrentCell - to highlight position of the current cell.

The following client-side event handlers are used in this sample to create a custom editor (wijinputdate) for the ShippedDate column:

  • OnClientBeforeCellEdit - creating the custom editor before editing.
  • OnClientBeforeCellUpdate - passing edited value to the grid before editing finishes.
  • OnClientAfterCellEdit - destroying editor when editing is done.

The following server-side event handlers are used in this sample:

  • RowUpdating - updating datasource with the values obtained from client.
  • EndRowUpdating - committing changes.

Current cell goes in edit mode if:

  • It is double-clicked with the left mouse button.
  • F2 key is pressed on the keyboard (cursor is placed at the end of editor area).
  • Any alphanumeric key is pressed (original value is replaced with inputted symbol).

Editing of the current cell is committed if:

  • Current cell position is changed.
  • F2 or Enter key is pressed (only for default editors).

Pressing Esc key cancels editing of the current cell restoring original value.

When current row position is changed all the accumulated changes are sent to server.

Documentation