Tham chiếu đầy đủ component

Trang này cho biết, với mỗi ComType:

1. Field DB nào component đọc — đặt field khác trong row Component cũng vô tác dụng.
2. Events kích hoạt — Core sẽ tìm method nào trên class TabEditor/PopupEditor khi event xảy ra (dựa trên cấu hình Component.Events JSON).

🔧 Cú pháp Component.Events — JSON map {"<EventType>": "<MethodName>"}. Xem Cấu hình UI → Events cho chi tiết.

Method signature

Khi 1 event fire, Core gọi form.<methodName>(...args). Args luôn bắt đầu bằng entity (record bound vào widget). Args còn lại tùy event.

// Ví dụ: row Button có Events = {"click": "OnDelete"}
public async Task OnDelete(object entity, object button)
{
    // ...
}

⚠ Quy tắc đặt tên trong JSON Events:

• DOM event → lowercase kiểu JS: click, change, input, keydown, focusin, dblclick, contextmenu, mouseenter, …
• CustomEventType → PascalCase y hệt enum: BeforeCreated, AfterCreated, AfterChat, DateSearch, …
• DOMContentLoaded → giữ nguyên DOMContentLoaded (DOM dùng đúng case này).

Nhóm event:

A. Forms

EditForm (Components/Forms/EditForm.cs)

Field DB dùng: CanAdd, ComponentType, FieldName, Focus, Id, IdField, PopulateField, RefName.

Events (qua Feature.Events):

• DOMContentLoaded(entity) — sau khi form render xong DOM.
• focusout(entity) — khi form mất focus.
• afterprint(entity) — sau khi gọi window.print().

TabEditor (Components/Forms/TabEditor.cs)

Field DB dùng: CanSearch, HotKey.

Events (qua Feature.Events):

• show(entity) — khi tab được activate.

PopupEditor (Components/Forms/PopupEditor.cs)

TabEditor preset Popup = true. Events giống TabEditor.

TabComponent (Components/Forms/TabComponent.cs)

Events (qua ComponentGroup.Events):

• DOMContentLoaded(entity) — render xong tab strip.
• focusin(entity, componentGroup) — chuyển vào 1 tab.
• focusout(entity, componentGroup) — rời 1 tab.

B. Section / layout

Section (Components/Section.cs)

Renderer của row ComponentGroup. Section dùng ComponentGroup.Events (không phải Component.Events):

Events (qua ComponentGroup.Events):

• DOMContentLoaded(entity) — section render xong.
• focusin(entity, componentGroup) / focusout(entity, componentGroup).

RecordDetail (Components/RecordDetail.cs)

Field DB dùng: RefClass. (Không fire event tới user handler.)

C. Input cơ bản

Textbox (Components/Textbox.cs)

Field DB dùng: AutoFit, ChildStyle, Events, FieldName, FormatData, FormatEntity, Label, Migration, PlainText, RefName, ShowLabel, UpperCase.

Events kích hoạt:

• change(entity, newValue, oldValue, parent) — khi value thay đổi (blur hoặc Enter).
• input(entity) — mỗi keystroke (chỉ khi cần realtime).

Textarea (Components/Textarea.cs)

Field DB dùng: ChildStyle, Events, FieldName, FormatData, FormatEntity, PlainText, Row, ShowLabel, UpperCase.

Events kích hoạt:

• change(entity, newValue, oldValue, parent).
• input(entity).

Number (Components/Number.cs)

Field DB dùng: AutoFit, CanCache, ChildStyle, Events, FieldName, PlainText, Precision, Query.

Events kích hoạt:

• change(entity, newValue, oldValue, parent).
• input(entity).

Datepicker (Components/Datepicker.cs)

Field DB dùng: Events, FieldName, FocusSearch, FormatData, PlainText, Precision.

Events kích hoạt:

• change(entity, value, this) — value là DateTime?, tham số 3 là chính component.

MonthBox (Components/MonthBox.cs)

Field DB dùng: AutoFit, ChildStyle, DataSourceFilter, FieldName, FormatData, FormatEntity, Label, PlainText, ShowLabel. Events giống Datepicker.

Checkbox (Components/Checkbox.cs)

Field DB dùng: Editable, Events, FieldName.

Events kích hoạt:

• change(entity, newValue, oldValue, parent) — newValue là bool.

Rating (Components/Rating.cs)

Field DB dùng: Events, FieldName, Id, Precision, Style.

Events kích hoạt:

• click(entity, rating) — khi user chọn số sao mới.

BarCode / Link / LangSelect / Table

Không fire event tới user handler. Chỉ display.

CellText (Components/CellText.cs)

Hiển thị text formatted trong cell grid. Không fire event riêng — events đến từ grid cha (xem GridView).

Field DB dùng: ChildStyle, ComponentType, FieldName, FormatEntity, Query.

D. Input rich-text / code

CKEditor / RichTextBox / CodeEditor / StudioCode

Wrapper editor (CKEditor, contenteditable, Monaco). Không fire event tới user handler trực tiếp — value sync vào entity qua bind.

E. Picker (entity reference)

Select2 (Components/Select2.cs)

Field DB dùng: DataSourceFilter, FocusSearch, FormatData, RefName, Reference, UpperCase. (Không fire event riêng — value sync qua bind.)

SearchEntry (Components/SearchEntry.cs)

Field DB dùng: ComponentGroup, ComponentType, DefaultVal, Editable, Events, FieldName, FocusSearch, FormatData, FormatEntity, GroupBy, HideGrid, IsPivot, LocalData, LocalHeader, LocalRender, PlainText, Precision, RefClass, RefName, Reference, Row, Template, TopEmpty.

Events kích hoạt:

• change(entity, matched, oldMatch, parent) — matched là entity được chọn (vd 1 Customer), oldMatch cái cũ.
• AfterCreated(entity) — sau khi tạo widget xong.
• AfterRender(entity) — sau khi render value lên DOM.

SearchEntryString (Components/SearchEntryString.cs)

Field DB & events giống SearchEntry (không có TopEmpty). Khác: bind giá trị string code thay vì id.

MultipleSearchEntry (Components/MultipleSearchEntry.cs)

Field DB dùng: DefaultVal, Events, FieldName, LocalData, RefName.

Events kích hoạt:

• change(entity, listValues, oldList) — listValues / oldList là list selection.

AutocompleteTextbox (Components/AutocompleteTextbox.cs)

Field DB dùng: AutoFit, ChildStyle, DataSourceFilter, Events, FieldName, FormatData, FormatEntity, GroupFormat, GroupReferenceName, IsPivot, PlainText, Query, RefName, Reference, ShowLabel, Template, UpperCase.

Events kích hoạt (tham số 2 = Matched — entity match suggestion):

• change(entity, matched) — khi user chọn 1 suggestion.
• input(entity, matched) — mỗi keystroke (realtime suggestion).
• focusin(entity, matched) / focusout(entity, matched).
• keydown(entity, matched), click(entity, matched), scroll(entity, matched).

AutocompleteTextarea (Components/AutocompleteTextarea.cs)

Field DB & events giống AutocompleteTextbox (multi-line input).

F. Search panel

GridSearch (Components/GridSearch.cs)

Field DB dùng: CanSearch, FieldName, Id, JoinTable, PreQuery, RefName, Reference, ShowNull. (Không fire event tới user handler — search tự xử lý.)

SearchGrid (Components/SearchGrid.cs)

Field DB dùng: AddDate, CanAdd, CanSearch, ComponentGroup, ComponentType, DataSourceFilter, DateTimeField, DefaultAddEnd, DefaultAddStart, FieldName, GroupBy, GroupEvent, GroupFormat, Id, LocalHeader, Precision.

Events kích hoạt:

• click(row) / dblclick(row) — click row trong panel search.

ListViewSearch (Components/ListViewSearch.cs)

Field DB dùng: CanSearch, ClassName, DataSourceFilter, FieldName, FilterEq, HideGrid, Id, JoinTable, Order, PreQuery, RefName, Reference, ShowDatetimeField, ShowHotKey, ShowNull, UpperCase. (Không fire event riêng.)

ManageReportSearch / AdvancedSearch

Tương tự — search panel không fire event đến user handler.

AdvancedDateSearch (Components/AdvancedDateSearch.cs)

Field DB dùng: Events, Migration, RefName, Reference.

Events kích hoạt (qua ParentListView.Events — tức là set Events trên row của GridView/ListView cha):

• DateSearch(entity) — khi user chọn range date xong và submit.

G. ListView / GridView family

ListView (Components/ListView.cs)

Field DB dùng: BodyItemHeight, CanAdd, CanCache, CanSearch, ComponentGroup, ComponentType, DataSourceFilter, DateTimeField, Events, FieldName, FilterLocal, Focus, FooterHeight, GroupReferenceId, HeaderHeight, HideHistory, Id, IdField, IgnoreConfirmHardDelete, IgnoreSync, IsRealtime, JoinTable, Label, LiteGrid, LocalData, LocalHeader, LocalRender, Migration, Precision, RefName, Reference, ReferenceId, Row, ScrollHeight, SqlSearch, SqlSelect, TopEmpty.

Events kích hoạt:

• change(rowData) — sau khi 1 row được patch update thành công.
• BeforeCreated(rowData) — trước khi tạo row mới (có thể mutate rowData).
• AfterCreated(rowData) — sau khi insert row mới thành công.
• BeforeCreatedList(rows) / AfterCreatedList(rows) — khi paste / bulk insert.
• BeforeDeleted(deletedItems) / AfterDeleted(deletedItems) — xóa hàng loạt (deletedItems là List<object>).
• BeforePasted(originRows, copiedRows) / AfterPasted(originRows, copiedRows) — paste từ clipboard.
• BeforeCopied(originRows, copiedRows) / AfterCopied(originRows, copiedRows) — copy.
• Deactivated(entity) — khi grid bị “deactivate” (vd ẩn tab).
• UpdateHeader(columns) — sau khi reload column policy.
• AfterWebsocket(updatedData, listViewItem) — khi WS push 1 row update.
• SaveAs(this, editForm) — khi click save-as.

GridView (Components/GridView.cs) ← extends ListView

Field DB dùng: Bao gồm tất cả ListView + thêm: AddDate, CastProp, ClassName, DefaultAddEnd, DefaultAddStart, DefaultVal, Editable, FocusSearch, FormatData, FormatSumaryField, GroupBy, GroupFormat, IsCollapsible, IsSumary, OrderBySumary, PopulateField, PostOrder, PreQuery, RefClass, ShowAudit, ShowNull.

Events kích hoạt — kế thừa từ ListView, thêm:

• change(rowData, rowSection) — khi cell trong row đổi value.
• BeforeCreated(rowData, this) / AfterCreated(rowData).
• AfterEmptyRowCreated(emptyRow) — sau khi tạo row trống cuối grid (chế độ inline edit).
• BeforePasted(originRows, copiedRows) / AfterPasted(originRows, copiedRows).

GridViewItem (Components/GridViewItem.cs)

Render 1 hàng. Cấu hình hiếm khi trực tiếp.

Field DB dùng: ComponentType, Editable, Events, FieldName, Id, IgnoreSync, IsRealtime, LocalData, Precision.

Events kích hoạt:

• change(entity, matched) — khi cell-component (như Dropdown) trong hàng đổi value.

ListViewItem (Components/ListViewItem.cs)

Render 1 hàng ListView.

Field DB dùng: CanAdd, ComponentType, Editable, Events, FieldName, FilterLocal, FocusSearch, FormatEntity, JoinTable, RefName, Reference, SqlSearch.

Events kích hoạt:

• click(entity) / dblclick(entity) — click / double-click row.
• BeforeCreated(entity, this) — trước khi tạo row mới.
• BeforePatchUpdate(entity, pathModel, this) / AfterPatchUpdate(entity, pathModel, this) — trước/sau khi patch 1 cell.
• BeforeCreateAsync(entity, this) / AfterCreateAsync(entity, this) — async insert.
• RowFocusOut(entity), RowMouseEnter(entity), RowMouseLeave(entity) — pointer event trên row.

GridViewSql (Components/GridViewSql.cs)

Grid backed bằng SQL. Events giống GridView.

GroupGridView (Components/GroupGridView.cs)

Field DB dùng: CanAdd, FieldName, GroupBy, GroupEvent, GroupFormat, IsRealtime, UpperCase, VirtualScroll.

Events kích hoạt (qua GuiInfo.GroupEvent — field riêng, không phải Events):

• click(row) / dblclick(row) — click vào group header row.

GroupListView (Components/GroupListView.cs)

Tương tự GroupGridView. Events qua GroupEvent: click(row) / dblclick(row).

CompareGridView / VirtualGrid / TreeView / AgGrid

Field DB tương ứng (xem header), events kế thừa từ ListView / GridView.

H. Button & action

Button (Components/Button.cs)

Field DB dùng: ClassName, Events, FieldName, Icon, Id, Label, Query, Style.

Events kích hoạt:

• click(entity, this) — khi click button. Tham số 2 là chính Button.

Button có Name đặc biệt (btnSave, btnCancel, btnPrint, …) Core sẽ wire vào hành vi mặc định, không cần Events. Xem Cấu hình UI → Button đặc biệt.

ButtonExcel (Components/ButtonExcel.cs)

Field DB dùng: Id, PreQuery, Query, UpperCase. Không fire event tới user — auto export Excel.

ButtonPdf (Components/ButtonPdf.cs)

Field DB dùng: Events, FocusSearch, FormatEntity, PlainText, Precision, Style, UpperCase.

Events kích hoạt:

• click(entity, guiInfo) — guiInfo là row Component cấu hình của button.

ButtonWord (Components/ButtonWord.cs)

Field DB dùng: CanCache, Events, FieldName, GroupFormat, IdField, PlainText, PreQuery, Precision, Query, System, Template. Events giống ButtonPdf.

MultipleButtonPdf (Components/MultipleButtonPdf.cs)

Field DB dùng: DataSourceFilter, DefaultVal, Events, FormatEntity, Label, PlainText, Style, TopEmpty, UpperCase.

Events kích hoạt:

• click(entity, ...) — click button.
• AfterDownload(entity, result) — sau khi tải xong.

I. PDF / Word / Document

Pdf (Components/Pdf.cs)

Field DB dùng: DataSourceFilter, DefaultVal, Events, FormatEntity, Label, PlainText, Style, TopEmpty, UpperCase.

Events kích hoạt:

• click(entity, ...).
• AfterDownload(entity, result).

PdfReport (Components/PdfReport.cs)

Field DB dùng: ComponentType, DataSourceFilter, Events, FieldName, FormatEntity, GetPropValue, GroupFormat, IdField, Label, Migration, PreQuery, Precision, Query, ScriptValidation, Style, System, Template, UpperCase.

Events kích hoạt:

• DOMContentLoaded(entity, this) — sau khi render report DOM.

MutiplePdfReport (Components/MutiplePdfReport.cs)

Field DB dùng: rất nhiều (xem source). Events giống PdfReport.

DocumentWrite (Components/DocumentWrite.cs)

Field DB dùng: Events, FieldName, FormatEntity, IsRealtime, Query.

Events kích hoạt:

• click(entity) — khi user click vào nội dung render.

J. Upload / Image

ImageUploader (Components/ImageUploader.cs)

Field DB dùng: ChildStyle, ComponentGroupId, DataSourceFilter, Events, FieldName, Id, IsRealtime, Label, PlainText, Precision, UpperCase, VirtualScroll.

Events kích hoạt:

• change(entity) — sau khi upload xong (1 hoặc nhiều file). Path lưu vào entity.<FieldName> (chuỗi paths phân cách bởi ;).

FileUploadGrid (Components/FileUploadGrid.cs)

Field DB dùng: ComponentGroupId, DataSourceFilter, FieldName, IdField, IsRealtime, IsSumary, UpperCase. Không fire event tới user trực tiếp.

ImageToJson (Components/ImageToJson.cs)

Field DB dùng: Events, IsRealtime.

Events kích hoạt:

• AfterChat(taskComment, rsTask, timeLine) — khi AI parse xong ảnh thành JSON.

K. Chart

Chart (Components/Chart.cs)

Field DB dùng: ClassName, Events, FormatData, FormatEntity, GroupBy, PlainText, Query.

Events kích hoạt:

• click(data, this) — click vào 1 data point trên chart. data là object data point được click.

ChartV2 (Components/ChartV2.cs)

Field DB dùng: FormatData, Query. (Không fire event tới user handler.)

L. Chat / AI

AIChat (Components/AIChat.cs)

Field DB dùng: Events, Label, Style.

Events kích hoạt:

• AfterChat(taskComment, result, timeLine) — khi AI trả lời xong.

ChatV2 / ChatV3 (Components/ChatV2.cs, ChatV3.cs)

Field DB dùng: Events (+ IsRealtime, UpperCase cho ChatV3). Events giống AIChat.

WidgetChat / WidgetChatGroup / WidgetChatItem

Widget chat tổng (góc trái dưới). Cấu hình từ PortalBL, ít khi cấu hình qua row Component.

Cách dùng nhanh

1. Trong DB, set Component.Events = JSON string:

   { "click": "OnExportClicked", "change": "OnRowChanged" }

2. Trong class C# (TabEditor / PopupEditor), khai báo method tên trùng:

   public class CustomerListBL : TabEditor
   {
       public CustomerListBL() : base(nameof(Customer)) { Title = "Khách hàng"; }
   
       public async Task OnExportClicked(object entity, object button)
       {
           // ...
       }
   
       public void OnRowChanged(object entity, object newVal, object oldVal, object parent)
       {
           // ...
       }
   }

3. Method có thể void hoặc async Task. Không match exact tên (case-sensitive) → method không được gọi.

Tham số method khớp đúng số args — nếu component pass 4 args mà bạn declare 1 thì 3 args còn lại bị bỏ. Ngược lại declare 5 args mà chỉ pass 4 thì arg cuối là undefined. Cách an toàn: declare đúng args theo bảng trên.