Extension Points and Source Code Customization : View-specific events
  

View-specific events

Built-in views offer context-specific events based on the function of the view. Like general view events, view-specific events allow you to specify the name of a JavaScript function that runs when the event fires. The function that runs for a view-specific event must also be defined in the controller.public.js file for the view. This file can be found for each view at the following location, and initially contains empty function definitions for any specific events for the view with default names:
webAppDir\app\src\modules\module-folder\view-folder\controller.public.js
For more information on this file and its location, see Custom code.
The following table describes the supported view-specific events for each view and component, and the default names of the default event functions that run for them when they fire.
Table 8. View-specific events and installed default functions
Event
View:Components
Default function
Description
Cancel
Blank:List View
–
Fires when the user cancels an operation.
Change
Data-Grid-Form:Editor Types
Data-Grid-Separate-Form:Editor Types
Blank:Editors
Blank:Calendar
–
Fires when an underlying field value is changed in a Data-Grid view form editor type or in a supported Blank view component.
Click
Blank:Button
Blank:Toolbar Button
Blank:Charts
–
Fires when the user clicks on a button or on an item series in a chart.
Data Bound
Data-Grid-Form
Data-Grid-Separate-Form
Stacked-Data-Grids:Parent
Stacked-Data-Grids:Child
Hierarchical-Data-Grid:Parent
Hierarchical-Data-Grid:Child
Blank:Charts
Blank:Grid
Blank:List View
–
Fires when the view or component is bound to its data source.
Detail Collapse
Hierarchical-Data-Grid:Parent
–
Fires after the user collapses the child rows for a parent.
Detail Init
Hierarchical-Data-Grid:Parent
–
Fires before the child rows for a parent expand.
Detail Expand
Hierarchical-Data-Grid:Parent
–
Fires after the child rows for a parent expand.
Edit
Blank:List View
–
Fires when the user edits an item in the list view.
Filtering
Blank:Auto Complete
Blank:Combo Box
–
Fires after the user filters the results.
Login
Login
onLogin
Fires when the user clicks Login on the login view.
Remove
Blank:List View
–
Fires when the user removes an item from the list view.
Row Create
Data-Grid
Stacked-Data-Grids:Child
Hierarchical-Data-Grid:Child
Blank:Grid
–
Fires before a row is created for a new data source record.
Row Delete
Data-Grid
Stacked-Data-Grids:Child
Hierarchical-Data-Grid:Child
Blank:Grid
–
Fires before an existing data source record is deleted in a row.
Row Select
Data-Grid
Data-Grid-Form
Data-Grid-Separate-Form
onRowSelect
Fires when the selected row changes in the grid.
Stacked-Data-Grids:Parent
Hierarchical-Data-Grid:Parent
onParentRowSelect
Stacked-Data-Grids:Child
Hierarchical-Data-Grid:Child
onChildRowSelect
Blank:Grid
–
Row Update
Data-Grid
Stacked-Data-Grids:Child
Hierarchical-Data-Grid:Child
Blank:Grid
–
Fires before an existing data source record is updated in a row.
Save
Blank:List View
–
Fires when the user saves a change to the list view.
Select
Blank:Auto Complete
Blank:Combo Box
Blank:Drop Down List
Blank:List View
–
Fires when the user selects a value among the choices offered.
Blank:Tab Strip
–
Fires when the user selects a tab in the tab strip.
Show
Blank:Tab Strip
–
Fires when the selected tab displays its contents.
Slide
Data-Grid-Form:Slider Editor Type
Data-Grid-Separate-Form:Slider Editor Type
Blank:Slider
–
Fires when the user moves the drag handle.
Toggle
Blank:Toolbar Button
–
Fires when the user toggles a button in the toolbar that has its Togglable property set.
You can change the default names of these functions in the controller.public.js file for a view just like general view event functions. One reason to change an event function name is to test alternative event behaviors using different event functions before deciding on the one you want to implement for the web app. If you do need to change the default name of a view event function in the controller.public.js file, you must also change the name of the event function as specified for the same view in the Kendo UI Designer.
For the view-specific events, these function names are specified in the Properties pane on the view design page, which you can access in the Designer when you edit the module that contains the view. For information on editing modules, see Creating and designing an app. For information on editing views, see Modules and views.
This is the Properties pane in the view design page for the example Data-Grid view, customer_list, showing the Row Select Event Function property setting under Grid Events (see also Adding and editing a Data-Grid view):
Figure 48. Editing view-specific events
KUIB_Edit_Grid_View_Properties_HTML.png