Core Docs

Tham chiếu đầy đủ events

Toàn bộ DOM event và CustomEventType trong hệ thống — kèm khi nào dùng + signature method.

Cấu hình Component.Events JSON map {<event>: <method>}. Quy tắc: DOM event lowercase, CustomEventType PascalCase. Xem Cấu hình UI → Events cho cú pháp.


A. DOM Events (EventType.*)

Viết lowercase trong JSON — vd "click": "OnClick".

Mouse / Click

EventKhi nào fireComponent thường dùng
clickUser click chuột trái lên element.Button, Rating, Chart, ListViewItem, Pdf, DocumentWrite
dblclickDouble click chuột.Number, Textbox, Textarea, ImageUploader, ListViewItem, row của list/grid
contextmenuClick chuột phải (mở context menu).GridView, ListView, SearchEntry
mousedown / mouseupNhấn / nhả chuột (chưa thành click).ImageUploader (drag), drag handle
mousemoveDi chuyển chuột.ImageUploader, MutiplePdfReport (drag)
mouseenter / mouseleaveChuột vào / ra khỏi element.ListViewItem (highlight row hover)
wheelCuộn chuột giữa.ImageUploader (zoom)
dropDrop file/text vào element (drag-drop).ImageUploader

Keyboard

EventKhi nào fireComponent thường dùng
keydownPhím vừa được nhấn xuống.Mọi input, SearchEntry, Datepicker
keyupPhím vừa được thả ra.MutiplePdfReport, search field

Form / Input

EventKhi nào fireComponent thường dùng
inputMỗi keystroke khi user gõ. Realtime — fire trước cả change.Textbox, Number, AutocompleteTextbox, AIChat
changeValue đã đổi và user blur ra (Enter / Tab / click ngoài).Textbox, Number, Datepicker, Checkbox, SearchEntry, ImageUploader

input vs change — dùng input khi cần realtime (autocomplete suggestion); dùng change khi chỉ cần phản ứng sau khi user đã hoàn thành nhập.

Focus

EventKhi nào fireComponent thường dùng
focusElement được focus (cursor đặt vào).Datepicker, SearchEntry
blurElement mất focus.SearchEntry, ListViewItem
focusinGiống focus nhưng bubble lên parent.AutocompleteTextbox, ListViewItem, EditForm, Section
focusoutGiống blur nhưng bubble lên parent.AutocompleteTextbox, EditForm, Section

Scroll / Visibility / Resize

EventKhi nào fireComponent thường dùng
scrollUser cuộn nội dung.AutocompleteTextbox, Datepicker
resizeWindow resize.EditForm
visibilitychangeTab browser ẩn/hiện (visibilitychange API).Textbox, Textarea
showTab/popup được activate (DOM-style event mở-lại).TabEditor

Lifecycle

EventKhi nào fireComponent thường dùng
DOMContentLoadedDOM của widget đã render xong và mount vào tree. Giữ y nguyên case vì là tên chuẩn DOM.EditForm, PdfReport, MutiplePdfReport, TabComponent, Section, base EditableComponent
abortRequest hủy.ListViewItem (load cancel)
EventKhi nào fireComponent thường dùng
beforeprintTrước khi window.print() chạy.EditForm
afterprintSau khi window.print() xong.EditForm

B. Custom Events (CustomEventType.*)

Viết PascalCase y hệt enum trong JSON — vd "AfterCreated": "OnRowAdded".

Lifecycle row trong List/Grid

EventKhi nào fireComponent
BeforeCreatedTrước khi tạo row mới (insert). Có thể mutate rowData.ListView, GridView, ListViewItem
AfterCreatedSau khi insert row thành công.ListView, GridView, SearchEntry
BeforeCreatedListTrước khi bulk insert (paste, import).ListView
AfterCreatedListSau bulk insert.ListView
BeforeEmptyRowCreatedTrước khi tạo row trống cuối grid (inline edit).GridView
AfterEmptyRowCreatedSau khi tạo row trống.GridView
BeforeCreateAsyncTrước khi async insert (gọi API).ListViewItem
AfterCreateAsyncSau async insert thành công.ListViewItem

Lifecycle update / patch

EventKhi nào fireComponent
BeforePatchUpdateTrước khi gửi PATCH update 1 cell.ListViewItem
ValidatePatchUpdateValidate trước khi PATCH (return false để abort).ListViewItem
AfterPatchUpdateSau PATCH thành công.ListViewItem
BeforePatchCreateTrước PATCH create row.ListView

Delete / Copy / Paste

EventKhi nào fireComponent
BeforeDeletedTrước khi xóa rows (có thể abort).ListView
AfterDeletedSau khi xóa thành công.ListView
BeforeCopiedTrước khi copy rows vào clipboard.ListView
AfterCopiedSau khi copy.ListView
BeforePastedTrước khi paste rows từ clipboard (có thể mutate data).ListView, GridView
AfterPastedSau khi paste thành công.ListView, GridView

Selection / Pointer trong row

EventKhi nào fireComponent
SelectedRow được chọn (checkbox hoặc click).ListView
RowFocusInCursor / focus vào 1 row.ListViewItem
RowFocusOutCursor / focus rời 1 row.ListViewItem
RowMouseEnterChuột vào row.ListViewItem
RowMouseLeaveChuột rời row.ListViewItem

Metadata / sync

EventKhi nào fireComponent
UpdateHeaderSau khi reload column policy (vd user edit GridPolicy).ListView
AfterWebsocketKhi WebSocket push 1 row update tới grid (realtime sync).ListView
DeactivatedKhi grid bị “deactivate” (tab ẩn, popup đóng tạm).ListView
OpenRefUser click vào reference link để mở popup detail của entity tham chiếu.ListView, SearchEntry
AfterRenderSau khi render xong (riêng SearchEntry — sau khi value hiện trên DOM).SearchEntry

Save / Download / Report

EventKhi nào fireComponent
SaveAsUser click “Save as” copy entity sang record mới.ListView
AfterDownloadSau khi download file (PDF, Excel, Word) xong.Pdf, MultipleButtonPdf

Search / Date

EventKhi nào fireComponent
DateSearchUser chọn date range trong search panel và submit.AdvancedDateSearch (qua ParentListView.Events)

AI / Chat

EventKhi nào fireComponent
AfterChatSau khi AI parse / trả lời xong.AIChat, ChatV2, ChatV3, ImageToJson

Cheat sheet — chọn event nào?

Tình huốngEvent nên dùng
Reagree khi user mỗi keystroke (autocomplete, validate live)input
React khi user xong nhập (blur, Enter)change
React khi user chọn option (Select2, SearchEntry)change (DOM)
Click buttonclick
Double click row → mở popup editdblclick (trên ListViewItem của list cha)
Right-click row → menucontextmenu (hoặc BodyContextMenuShow đã built-in)
Hook khi tab mới được activateshow (TabEditor) hoặc DOMContentLoaded (1 lần)
Hook khi row mới được tạo (validate, init default)BeforeCreated (mutate trước insert) hoặc AfterCreated
Validate trước khi user save 1 cellValidatePatchUpdate (return false để abort)
Recalculate field tổng khi 1 cell đổichange (trên cell input) hoặc AfterPatchUpdate (sau PATCH)
Setup default cho row mới (set FK, status mặc định)BeforeCreated
Refresh UI sau khi xóa rowsAfterDeleted
Hook khi user paste từ clipboardBeforePasted (validate / mutate) → AfterPasted (refresh)
Notify khi WebSocket sync 1 row mớiAfterWebsocket
AI chat hookAfterChat
Custom date range searchDateSearch
Drilldown khi click data point trên chartclick (trên Chart)
Auto-fill các field khác khi user pick SearchEntrychange (trên picker, args (entity, matched, oldMatch, parent))

Method signature pattern

Tất cả method nhận object entity làm tham số đầu, args sau tùy event. Xem Tham chiếu component để biết chính xác từng signature.

public class MyFormBL : TabEditor
{
    public MyFormBL() : base(nameof(MyEntity)) { }

    // DOM event
    public void OnClicked(object entity, object btn) { /* ... */ }
    public async Task OnValueChanged(object entity, object newVal, object oldVal, object parent) { /* ... */ }

    // CustomEventType
    public void OnRowAdded(object rowData) { /* ... */ }
    public async Task OnBeforeDelete(object deletedItems) { /* ... */ }
    public void OnAfterChat(object taskComment, object result, object timeLine) { /* ... */ }
}

Bẫy hay gặp

  • Sai case"Click" (capitalize) thay vì "click" (lowercase) → method không bao giờ chạy. Tương tự "aftercreated" (lowercase) thay vì "AfterCreated" (PascalCase) → không chạy.
  • Method tên không khớp — case-sensitive. OnClickonClick.
  • Tham số không khớp số args — method declare 2 args mà event pass 4 → 2 args còn lại bị bỏ silently. Khai báo theo bảng Tham chiếu component.
  • Async method không return Taskasync void chạy được nhưng exception bị nuốt. Dùng async Task<bool> hoặc async Task để Core await đúng cách.

Core Docs · Astro · Core.API/wwwRoot/docs