From f705cd11b9ad38254797673204a46dd8c588237e Mon Sep 17 00:00:00 2001
From: skidus <gsakda@gmail.com>
Date: Fri, 10 Apr 2026 12:56:04 +0700
Subject: [PATCH] feat: implement advanced bidirectional field referencing and
 cross-module path resolution
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Core Logic Enhancements:
    - Implement bidirectional field referencing between <FIELDS>, <LAYOUT>, and <TITLES> tags in .frml files, enabling seamless navigation from definitions to usages and vice versa.
    - Add robust support for AJAX-OPTION field mapping:
        - SRC attribute: Links to field definitions within defs/ajax.xml datasets.
        - TARGET attribute: Links to local field definitions within the same form.
    - Implement global grid resolution: GRID-ID now searches across the current file and all recursively included files (<INCLUDE>).
    - Enhance deep recursive search for fields/sections within nested tags like <SECTION>, <ROW>, and <FIELD-LIST>.

- Path Resolution & Helpers (DynFormPathUtils):
    - Added support for module-relative paths starting with # (mapping to view/frm/).
    - Added support for cross-module paths starting with / (mapping to WEB-INF/app/module/{module}/view/frm/).
    - Implemented auto-correction for common keyboard typos (Thai 'ิ' instead of /).
    - Added specialized helpers for locating ajax.xml and included files within the framework's structure.

- Smart Completion Enhancements:
    - Added context-aware completion for TARGET and SRC fields in AJAX update-fields.
    - Enabled global GRID-ID completion by scanning all included resources.
    - Improved dataset completion to include both local and AJAX-defined datasets.

- Test Resources:
    - Added a comprehensive set of real-world examples (bdgt04, bdgt05, bdgt06) in DevResources/full-examples/ to validate complex cross-module and master-detail scenarios.
---
 .../coroutines-javaagent-legacy.jar           | Bin 270 -> 270 bytes
 .intellijPlatform/self-update.lock            |   2 +-
 DevResources/dynform-exam.frml                | 397 +++++++++
 .../full-examples/bdgt04/defs/ajax.xml        | 201 +++++
 .../full-examples/bdgt04/view/bgt0401010.jsp  |  20 +
 .../bdgt04/view/bgt0401020-budget.jsp         |  20 +
 .../full-examples/bdgt04/view/bgt0401020.jsp  |  20 +
 .../bdgt04/view/bgt0401030-budget.jsp         |  20 +
 .../full-examples/bdgt04/view/bgt0401030.jsp  |  20 +
 .../bdgt04/view/bgt0403010-general.jsp        |  51 ++
 .../bdgt04/view/bgt0403010-project-budget.jsp |  20 +
 .../bdgt04/view/bgt0403010-project.jsp        |  35 +
 .../full-examples/bdgt04/view/bgt0403010.jsp  |  25 +
 .../bdgt04/view/bgt0403020-general.jsp        |  51 ++
 .../bdgt04/view/bgt0403020-project-budget.jsp |  20 +
 .../bdgt04/view/bgt0403020-project.jsp        |  35 +
 .../full-examples/bdgt04/view/bgt0403020.jsp  |  21 +
 .../bdgt04/view/frm/bdgt-0401010.frml         | 249 ++++++
 .../bdgt04/view/frm/bdgt-0401020-budget.frml  | 316 ++++++++
 .../bdgt04/view/frm/bdgt-0401020.frml         | 694 ++++++++++++++++
 .../bdgt04/view/frm/bdgt-0401030-budget.frml  | 316 ++++++++
 .../bdgt04/view/frm/bdgt-0401030.frml         | 680 ++++++++++++++++
 .../bdgt04/view/frm/bdgt-0403010.frml         | 112 +++
 .../view/frm/bdgt-0403010/construct.frml      | 324 ++++++++
 .../bdgt04/view/frm/bdgt-0403010/equipt.frml  | 340 ++++++++
 .../bdgt04/view/frm/bdgt-0403010/general.frml | 255 ++++++
 .../bdgt04/view/frm/bdgt-0403010/manage.frml  | 253 ++++++
 .../view/frm/bdgt-0403010/project-budget.frml | 343 ++++++++
 .../bdgt04/view/frm/bdgt-0403010/project.frml | 644 +++++++++++++++
 .../bdgt04/view/frm/bdgt-0403010/routine.frml | 256 ++++++
 .../bdgt04/view/frm/bdgt-0403020.frml         | 114 +++
 .../view/frm/bdgt-0403020/construct.frml      | 297 +++++++
 .../bdgt04/view/frm/bdgt-0403020/equipt.frml  | 314 +++++++
 .../bdgt04/view/frm/bdgt-0403020/general.frml | 265 ++++++
 .../bdgt04/view/frm/bdgt-0403020/manage.frml  | 227 ++++++
 .../view/frm/bdgt-0403020/project-budget.frml | 321 ++++++++
 .../bdgt04/view/frm/bdgt-0403020/project.frml | 621 ++++++++++++++
 .../bdgt04/view/frm/bdgt-0403020/routine.frml | 230 ++++++
 .../view/frm/grids/grid-construct-budget.frml | 263 ++++++
 .../view/frm/grids/grid-equipt-budget.frml    | 231 ++++++
 .../view/frm/grids/grid-manage-budget.frml    | 222 +++++
 .../view/frm/grids/grid-proj-budget.frml      | 272 +++++++
 .../view/frm/grids/grid-routine-budget.frml   | 222 +++++
 .../view/frm/grids/grid-stratigy-item.frml    |  86 ++
 .../bdgt04/view/frm/grids/grid-stratigy.frml  |  75 ++
 .../view/frm/grids/grid-work-budget.frml      | 174 ++++
 .../full-examples/bdgt05/defs/ajax.xml        | 201 +++++
 .../bdgt05/view/bgt0501010-general.jsp        |  51 ++
 .../full-examples/bdgt05/view/bgt0501010.jsp  |  20 +
 .../bdgt05/view/bgt0501020-budget.jsp         |  20 +
 .../full-examples/bdgt05/view/bgt0501020.jsp  |  20 +
 .../bdgt05/view/bgt0501030-budget.jsp         |  20 +
 .../full-examples/bdgt05/view/bgt0501030.jsp  |  20 +
 .../bdgt05/view/frm/bdgt-0501010.frml         |  93 +++
 .../view/frm/bdgt-0501010/construct.frml      | 338 ++++++++
 .../bdgt05/view/frm/bdgt-0501010/equipt.frml  | 356 ++++++++
 .../bdgt05/view/frm/bdgt-0501010/general.frml | 259 ++++++
 .../bdgt05/view/frm/bdgt-0501010/manage.frml  | 268 ++++++
 .../bdgt05/view/frm/bdgt-0501010/routine.frml | 271 +++++++
 .../bdgt05/view/frm/bdgt-0501020-budget.frml  | 346 ++++++++
 .../bdgt05/view/frm/bdgt-0501020.frml         | 766 ++++++++++++++++++
 .../bdgt05/view/frm/bdgt-0501030-budget.frml  | 346 ++++++++
 .../bdgt05/view/frm/bdgt-0501030.frml         | 766 ++++++++++++++++++
 .../view/frm/grids/grid-construct-budget.frml | 260 ++++++
 .../view/frm/grids/grid-equipt-budget.frml    | 231 ++++++
 .../view/frm/grids/grid-manage-budget.frml    | 222 +++++
 .../view/frm/grids/grid-proj-budget.frml      | 213 +++++
 .../view/frm/grids/grid-routine-budget.frml   | 222 +++++
 .../view/frm/grids/grid-stratigy-item.frml    |  86 ++
 .../bdgt05/view/frm/grids/grid-stratigy.frml  |  75 ++
 .../view/frm/grids/grid-work-budget.frml      | 174 ++++
 .../full-examples/bdgt06/defs/ajax.xml        | 201 +++++
 .../bdgt06/view/bgt0601010-general.jsp        |  51 ++
 .../full-examples/bdgt06/view/bgt0601010.jsp  |  20 +
 .../bdgt06/view/bgt0601020-budget.jsp         |  20 +
 .../full-examples/bdgt06/view/bgt0601020.jsp  |  20 +
 .../bdgt06/view/frm/bdgt-0601010.frml         | 100 +++
 .../view/frm/bdgt-0601010/construct.frml      | 322 ++++++++
 .../bdgt06/view/frm/bdgt-0601010/equipt.frml  | 340 ++++++++
 .../bdgt06/view/frm/bdgt-0601010/general.frml | 267 ++++++
 .../bdgt06/view/frm/bdgt-0601010/manage.frml  | 253 ++++++
 .../bdgt06/view/frm/bdgt-0601010/routine.frml | 259 ++++++
 .../bdgt06/view/frm/bdgt-0601020-budget.frml  | 315 +++++++
 .../bdgt06/view/frm/bdgt-0601020.frml         | 758 +++++++++++++++++
 .../view/frm/grids/grid-construct-budget.frml | 260 ++++++
 .../view/frm/grids/grid-equipt-budget.frml    | 231 ++++++
 .../view/frm/grids/grid-manage-budget.frml    | 222 +++++
 .../view/frm/grids/grid-proj-budget.frml      | 213 +++++
 .../view/frm/grids/grid-routine-budget.frml   | 222 +++++
 .../view/frm/grids/grid-stratigy-item.frml    |  86 ++
 .../bdgt06/view/frm/grids/grid-stratigy.frml  |  75 ++
 .../view/frm/grids/grid-work-budget.frml      | 174 ++++
 build.gradle.kts                              |   2 +-
 entities.json                                 |   6 +
 mempalace.yaml                                |  10 +
 .../helper/DynFormCompletionContributor.java  | 194 ++++-
 .../tools/helper/DynFormPathUtils.java        |  68 +-
 .../helper/DynFormReferenceContributor.java   | 370 ++++++++-
 src/main/resources/META-INF/pluginIcon.svg    |  32 +-
 99 files changed, 20379 insertions(+), 30 deletions(-)
 create mode 100644 DevResources/dynform-exam.frml
 create mode 100644 DevResources/full-examples/bdgt04/defs/ajax.xml
 create mode 100644 DevResources/full-examples/bdgt04/view/bgt0401010.jsp
 create mode 100644 DevResources/full-examples/bdgt04/view/bgt0401020-budget.jsp
 create mode 100644 DevResources/full-examples/bdgt04/view/bgt0401020.jsp
 create mode 100644 DevResources/full-examples/bdgt04/view/bgt0401030-budget.jsp
 create mode 100644 DevResources/full-examples/bdgt04/view/bgt0401030.jsp
 create mode 100644 DevResources/full-examples/bdgt04/view/bgt0403010-general.jsp
 create mode 100644 DevResources/full-examples/bdgt04/view/bgt0403010-project-budget.jsp
 create mode 100644 DevResources/full-examples/bdgt04/view/bgt0403010-project.jsp
 create mode 100644 DevResources/full-examples/bdgt04/view/bgt0403010.jsp
 create mode 100644 DevResources/full-examples/bdgt04/view/bgt0403020-general.jsp
 create mode 100644 DevResources/full-examples/bdgt04/view/bgt0403020-project-budget.jsp
 create mode 100644 DevResources/full-examples/bdgt04/view/bgt0403020-project.jsp
 create mode 100644 DevResources/full-examples/bdgt04/view/bgt0403020.jsp
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0401010.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0401020-budget.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0401020.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0401030-budget.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0401030.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0403010.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/construct.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/equipt.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/general.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/manage.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/project-budget.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/project.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/routine.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0403020.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/construct.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/equipt.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/general.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/manage.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/project-budget.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/project.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/routine.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/grids/grid-construct-budget.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/grids/grid-equipt-budget.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/grids/grid-manage-budget.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/grids/grid-proj-budget.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/grids/grid-routine-budget.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/grids/grid-stratigy-item.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/grids/grid-stratigy.frml
 create mode 100644 DevResources/full-examples/bdgt04/view/frm/grids/grid-work-budget.frml
 create mode 100644 DevResources/full-examples/bdgt05/defs/ajax.xml
 create mode 100644 DevResources/full-examples/bdgt05/view/bgt0501010-general.jsp
 create mode 100644 DevResources/full-examples/bdgt05/view/bgt0501010.jsp
 create mode 100644 DevResources/full-examples/bdgt05/view/bgt0501020-budget.jsp
 create mode 100644 DevResources/full-examples/bdgt05/view/bgt0501020.jsp
 create mode 100644 DevResources/full-examples/bdgt05/view/bgt0501030-budget.jsp
 create mode 100644 DevResources/full-examples/bdgt05/view/bgt0501030.jsp
 create mode 100644 DevResources/full-examples/bdgt05/view/frm/bdgt-0501010.frml
 create mode 100644 DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/construct.frml
 create mode 100644 DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/equipt.frml
 create mode 100644 DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/general.frml
 create mode 100644 DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/manage.frml
 create mode 100644 DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/routine.frml
 create mode 100644 DevResources/full-examples/bdgt05/view/frm/bdgt-0501020-budget.frml
 create mode 100644 DevResources/full-examples/bdgt05/view/frm/bdgt-0501020.frml
 create mode 100644 DevResources/full-examples/bdgt05/view/frm/bdgt-0501030-budget.frml
 create mode 100644 DevResources/full-examples/bdgt05/view/frm/bdgt-0501030.frml
 create mode 100644 DevResources/full-examples/bdgt05/view/frm/grids/grid-construct-budget.frml
 create mode 100644 DevResources/full-examples/bdgt05/view/frm/grids/grid-equipt-budget.frml
 create mode 100644 DevResources/full-examples/bdgt05/view/frm/grids/grid-manage-budget.frml
 create mode 100644 DevResources/full-examples/bdgt05/view/frm/grids/grid-proj-budget.frml
 create mode 100644 DevResources/full-examples/bdgt05/view/frm/grids/grid-routine-budget.frml
 create mode 100644 DevResources/full-examples/bdgt05/view/frm/grids/grid-stratigy-item.frml
 create mode 100644 DevResources/full-examples/bdgt05/view/frm/grids/grid-stratigy.frml
 create mode 100644 DevResources/full-examples/bdgt05/view/frm/grids/grid-work-budget.frml
 create mode 100644 DevResources/full-examples/bdgt06/defs/ajax.xml
 create mode 100644 DevResources/full-examples/bdgt06/view/bgt0601010-general.jsp
 create mode 100644 DevResources/full-examples/bdgt06/view/bgt0601010.jsp
 create mode 100644 DevResources/full-examples/bdgt06/view/bgt0601020-budget.jsp
 create mode 100644 DevResources/full-examples/bdgt06/view/bgt0601020.jsp
 create mode 100644 DevResources/full-examples/bdgt06/view/frm/bdgt-0601010.frml
 create mode 100644 DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/construct.frml
 create mode 100644 DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/equipt.frml
 create mode 100644 DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/general.frml
 create mode 100644 DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/manage.frml
 create mode 100644 DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/routine.frml
 create mode 100644 DevResources/full-examples/bdgt06/view/frm/bdgt-0601020-budget.frml
 create mode 100644 DevResources/full-examples/bdgt06/view/frm/bdgt-0601020.frml
 create mode 100644 DevResources/full-examples/bdgt06/view/frm/grids/grid-construct-budget.frml
 create mode 100644 DevResources/full-examples/bdgt06/view/frm/grids/grid-equipt-budget.frml
 create mode 100644 DevResources/full-examples/bdgt06/view/frm/grids/grid-manage-budget.frml
 create mode 100644 DevResources/full-examples/bdgt06/view/frm/grids/grid-proj-budget.frml
 create mode 100644 DevResources/full-examples/bdgt06/view/frm/grids/grid-routine-budget.frml
 create mode 100644 DevResources/full-examples/bdgt06/view/frm/grids/grid-stratigy-item.frml
 create mode 100644 DevResources/full-examples/bdgt06/view/frm/grids/grid-stratigy.frml
 create mode 100644 DevResources/full-examples/bdgt06/view/frm/grids/grid-work-budget.frml
 create mode 100644 entities.json
 create mode 100644 mempalace.yaml

diff --git a/.intellijPlatform/coroutines-javaagent-legacy.jar b/.intellijPlatform/coroutines-javaagent-legacy.jar
index 06fd3bdedd0d70127c35d1d71c58a4f3ee806ee9..4ec9da5a88a2b71dde8d35119f41e665c94604ea 100644
GIT binary patch
delta 28
hcmeBU>SN*!@MdNaVc_84U`R^pn#jA68AKiQ1prm~2Z;ax

delta 28
hcmeBU>SN*!@MdNaVc_84V0gNzeIoBhW)OAI7XW0{2`K;o

diff --git a/.intellijPlatform/self-update.lock b/.intellijPlatform/self-update.lock
index 42345ef..01ad1ac 100644
--- a/.intellijPlatform/self-update.lock
+++ b/.intellijPlatform/self-update.lock
@@ -1 +1 @@
-2026-04-07
\ No newline at end of file
+2026-04-10
\ No newline at end of file
diff --git a/DevResources/dynform-exam.frml b/DevResources/dynform-exam.frml
new file mode 100644
index 0000000..09eace5
--- /dev/null
+++ b/DevResources/dynform-exam.frml
@@ -0,0 +1,397 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-BROWSER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>V_ACTIVITY_TREE</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT :PROJ_ID PROJ_ID
+					, ACTT.ACM_CODE
+					, ACTT.ACM_NAME
+					, ACTT.ACM_SEQ
+					, ACTT.NODE_LEVEL
+					, ACTT.MAIN_NODE
+					, ACTT.ACM_UNIT
+					, ACTT.ACM_START_YEAR
+					, ACTT.ACM_END_YEAR
+					, ACTT.NODE_TYPE
+					, PJBG.PBDG_TOTAL PBDG_TOTAL
+					, PJBG.PBDG_COUNT  PBDG_COUNT
+				</SELECT>
+				<FROM>
+					FROM BGT.V_ACTIVITY_TREE ACTT
+						 INNER JOIN ( SELECT DISTINCT ACM.ACM_CODE
+										FROM BUD.ACTIVITY_M ACM
+											 INNER JOIN BUD.ACTIVITY_CTRL_H ACH ON ACM.ACM_CODE = ACH.ACH_CODE
+										START WITH ACM.ACM_CODE IN (SELECT ACM_CODE FROM PROJECT_BUDGETS PJBD WHERE PROJ_ID = :PROJ_ID)
+									  CONNECT BY PRIOR ACH.ACH_CTRL_CODE = ACH.ACH_CODE) FLTR ON FLTR.ACM_CODE = ACTT.ACM_CODE
+						 LEFT OUTER JOIN PROJECT_BUDGETS PJBG ON PJBG.PROJ_ID=:PROJ_ID AND PJBG.ACM_CODE = ACTT.ACM_CODE
+				</FROM>
+				<ORDER>ORDER BY ACTT.ACM_SEQ</ORDER>
+			</SQL>
+		</DATASET>
+
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, PBDG_ID
+					, ACM_CODE
+					, PBDG_TOTAL
+					, PBDG_COUNT
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+
+		<DATASET ID="DS-ATTACH_FILES">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>ATTACH_FILES</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ATFI_SEQ,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT ATFI_SEQ
+					, PROJ_ID
+					, ACM_CODE
+					, ATFI_TYPE
+					, ATFI_FILE
+					, ATFI_MIME
+					, ATFI_DESC
+					, CREATE_BY
+					, CREATE_TIME
+					, UPDATE_BY
+					, UPDATE_TIME
+				</SELECT>
+				<FROM>FROM ATTACH_FILES</FROM>
+				<ORDER>ORDER BY PROJ_ID,ATFI_SEQ,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="ATFI_SEQ" TYPE="NUMBER" LABEL="ลำดับไฟล์แนบ" WIDTH="2147483646"/>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสโครงการ" WIDTH="50"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="25"/>
+				<FIELD NAME="ATFI_TYPE" TYPE="TEXT" LABEL="ประเภทไฟล์แนบ" WIDTH="25"/>
+				<FIELD NAME="ATFI_FILE" TYPE="TEXT" LABEL="ชื่อไฟล์แนบ" WIDTH="250"/>
+				<FIELD NAME="ATFI_MIME" TYPE="TEXT" LABEL="ชนิดของไฟล์แนบ (MIME Type)" WIDTH="100"/>
+				<FIELD NAME="ATFI_DESC" TYPE="TEXT" LABEL="คำอธิบาย/รายละเอียดไฟล์แนบ" WIDTH="250"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+
+
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-BROWSER">
+			<HEADER NAVI="Y" ADD="Y" EDIT="Y" DELETE="Y"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="ACM_CODE" LABEL="project.acm_code" ALIGN="left" WIDTH="15em">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 row"><div class="col offset-${row.node_level}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="ACM_NAME" LABEL="project.acm_name" ALIGN="left">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 row"><div class="col offset-${row.node_level}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="PBDG_COUNT" LABEL="project.PBDG_COUNT" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[
+							(value,row,idx)=>{ return (row["node_type"]==="C")?value:""}
+						]]>
+					</DATA-FORMATTER>
+				</FIELD>
+<!--				<FIELD NAME="PBDG_TOTAL" LABEL="project.bgt_amount" ALIGN="right" WIDTH="10em"/>-->
+				<COMMAND-BUTTONS>
+					<BUTTONS-FILTER>
+						<EDIT><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></EDIT>
+						<DELETE><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></DELETE>
+						<VIEW><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></VIEW>
+					</BUTTONS-FILTER>
+				</COMMAND-BUTTONS>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="Y" ALLOW-NO-FILTER="Y" >
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="COMBOBOX">
+						<LIST-OPTION TABLE="VL_YEAR" TEXT="#DV_YEAR" VALUE="DV_YEAR" ORDER="DV_YEAR" FIRSTLIST="@{NONE}"/>
+					</FIELD>
+					<FIELD NAME="ACM_NAME" CAPTION="project.acm_name" INPUTTYPE="TEXT" SEARCH-ORIGIN="ACM_NAME='%${VALUE}%'"/>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"></FIELD>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" CAPT_WIDTH="10" VAL_WIDTH="14" LAYOUT_WIDTH="12"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="ACM_NAME" CAPT_WIDTH="6" VAL_WIDTH="14" LAYOUT_WIDTH="20"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+			<FOOTER SHOW="Y"/>
+			<SCRIPT>
+				<INITIALIZE>
+					<![CDATA[
+					{
+						console.log("init activity grid");
+
+						const fieldFormat = (value) => {
+							return formatNumber(value, 0);
+						}
+
+						const summary = (field, data) => {
+							let total = 0;
+							for (let id=0; id < data.length; id++) {
+								let row = data[id];
+								if (row["node_type"] === "D") {
+									total += (+row[field]) || 0;
+								}
+							}
+							if ($PageCtx.$dataGrid.load && !$PageCtx.$dataGrid.reload) {
+								$PageCtx.$dataGrid.reload = true;
+								for (let id=data.length-1; id>=0; id--) {
+									let row = data[id];
+									if (row["node_type"] === "C") {
+										let grpTotal = 0;
+										let mainNode = row["acm_code"];
+										let nodes = [];
+										nodes.push($$("main_node="+mainNode,data));
+										for (let node of nodes.flat()) {
+											grpTotal += +node[field];
+										}
+										data[id][field] = grpTotal;
+									}
+								}
+								$PageCtx.$dataGrid.load(data);
+								$PageCtx.$dataGrid.reload = false;
+							}
+							return formatNumber(total, 0);
+						}
+
+						const $ctx = $PageCtx;
+						const gridFields = [$$("field^pbdg_", $ctx.gridColumn.flat())].flat();
+						for (let field of gridFields) {
+							field.formatter = fieldFormat;
+							field.footerFormatter = function (data) {
+								return summary(this.field, data);
+							}
+						}
+
+						$ctx.rowStyle = function (row, index) {
+							if (row["node_type"] === "C") {
+								return {
+									classes : `group-level-${row["node_level"]}`
+								};
+							}
+							return {}; // Default style for other rows
+						}
+					}
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_BROWSE>
+
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="VACM_CODE" CAPTION="project.acm_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PROJ_PRINCIPLES" CAPTION="project.remak" INPUTTYPE="TEXT" ROWS="3"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.acm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-ACTIVITY-01" VALUE-FIELD="ACM_CODE" TEXT-FIELD="ACM_NAME" PARAMETERS="DV_YEAR=PROJ_YEAR,STM_CODE=STM_CODE">
+						<UPDATE-FIELDS>
+							<FIELD SRC="ACM_CODE" TARGET="VACM_CODE"></FIELD>
+							<FIELD SRC="ACM_UNIT" TARGET="TARGET_UNIT"></FIELD>
+							<FIELD SRC="ACM_UNIT" TARGET="PWMT_UNIT"></FIELD>
+							<FIELD SRC="PJM_CODE" TARGET="PJM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								let code = data.acm_code;
+								let nodeLevel = +data.node_level;
+								if (data.node_type === "C") {
+									data.disabled = true;
+									code = "#".repeat(nodeLevel+1);
+								}
+								return $(`<div class="d-flex flex-row"><div class="text-nowrap offset-${nodeLevel}">[${code}]</div> : <div>${data.acm_name}</div></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+
+				<SECTION ID="SECT-PROJECT-TARGET">
+					<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_COUNT" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PWMT_UNIT" CAPTION="project.target" INPUTTYPE="TEXT" READONLY="Y"></FIELD>
+					<FIELD NAME="QUOTER_1" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 1" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0101" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0102" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_2" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 2" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0201" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0202" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_3" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 3" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0301" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0302" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_4" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 4" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0401" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0402" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="TOTAL_QT" INPUTTYPE="MULTI-FIELD" CAPTION="project.total" FIELD-SEPARATOR="/" READONLY="Y">
+						<FIELD-LIST>
+							<FIELD NAME="QT_TOTAL_01" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="QT_TOTAL_02" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+				</SECTION>
+
+				<SECTION ID="SEC-ATTATCH-FILE">
+					<FIELD NAME="FILE_LIST_BOX" CAPTION="file.upload" INPUTTYPE="FILE-LIST-BOX">
+						<FILE-LIST-BOX DATASET="DS-ATTACH_FILES" FILE-TYPE="ATFI_TYPE" FILE-PATH="ATFI_FILE" FILE-DESC="ATFI_DESC"/>
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{proj_id}/@{acm_code}/file-01"/>
+					</FIELD>
+				</SECTION>
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="6"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VACM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_PRINCIPLES" LAYOUT_WIDTH="18" OFFSET="6"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-TARGET" TYPE="DATA-SECTION" DATASET="DS-PROJECT-TARGETS">
+					<ROW>
+						<FIELD NAME="PWMT_UNIT" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="QUOTER_1" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_2" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_3" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_4" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="TOTAL_QT" LAYOUT_WIDTH="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-FILE-UPLOAD" >
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.constructor_attatchment}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_LIST_BOX" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							let acmCount = $$("^QT_TOTAL_0").sum();
+							$$("PBDG_COUNT").val(acmCount);
+							let gridCtx = ($PageCtx.widgets["GRID-BUDGET"]||{})["$GridCtx"];
+							if (gridCtx) {
+								 let bdgTotal = gridCtx.sum_of["pbgi_total"];
+								$$("PBDG_TOTAL").val(bdgTotal);
+							}
+							Object.assign(data,form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+				<INITIALIZE>
+					<![CDATA[
+					     const quoterSum = ()=>{
+						     for (let sect=1; sect <=2; sect++) {
+							     let summary = 0;
+							     for (let qt = 1; qt <= 4; qt++) {
+								     summary += $$(`PTGT_QT_0${qt}0${sect}`).number();
+							     }
+							     $$(`QT_TOTAL_0${sect}`).val(formatNumber(summary));
+						     }
+					     }
+						 $$("^PTGT_QT_").on("change",quoterSum);
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/defs/ajax.xml b/DevResources/full-examples/bdgt04/defs/ajax.xml
new file mode 100644
index 0000000..25237df
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/defs/ajax.xml
@@ -0,0 +1,201 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<DATASETS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/ajax.xsd">
+	<DATASET ID="DS-PROJECT-02">
+		<SCHEMA>BUD</SCHEMA>
+		<TABLEDESC>Main Activity</TABLEDESC>
+		<MAXROWS>100</MAXROWS>
+		<SQL>
+			<SELECT>SELECT PJM.PJM_CODE
+				, PJM.PJM_NAME
+				, PJM.PJM_JOB_TYPE
+				, PJM.PJM_WORK_PLAN
+				, PJM.PJM_PRODUCT
+				, PJM.PJM_GROUP_PLAN
+				, PJM.PJM_JOB_PROJECT
+				, PJM.PJM_STRATEGY
+				, PJM.PJM_ACTIVE
+			</SELECT>
+			<FROM>FROM PROJECT_M PJM</FROM>
+			<WHERE>
+				WHERE (PJM.PJM_CODE LIKE '%'||:SEARCH||'%' OR PJM.PJM_NAME LIKE '%'||:SEARCH||'%')
+			</WHERE>
+			<GROUP/>
+			<ORDER/>
+		</SQL>
+	</DATASET>
+
+	<DATASET ID="DS-ACTIVITY-02">
+		<SCHEMA>BUD</SCHEMA>
+		<TABLEDESC>Main Activity</TABLEDESC>
+		<MAXROWS>100</MAXROWS>
+		<SQL>
+			<SELECT>
+				SELECT ACM_CODE
+				, ACM_NAME
+				, NODE_LEVEL
+				, MAIN_NODE
+				, ACM_UNIT
+				, ACM_START_YEAR
+				, ACM_END_YEAR
+				, STM_CODE
+				, JBT_CODE
+				, JBP_CODE
+				, EXP_CODE
+				, PJM_CODE
+				, STG_CODE
+				, NODE_TYPE
+				, DECODE(NODE_TYPE,'C','true','') disabled
+			</SELECT>
+			<FROM>FROM BGT.V_ACTIVITY_TREE ACM</FROM>
+			<WHERE>
+				WHERE 0=0
+				AND (:DV_YEAR BETWEEN ACM_START_YEAR AND ACM_END_YEAR)
+				-- AND (ACM.STM_CODE = '%' OR ACM.STM_CODE = :STM_CODE)
+				AND (ACM.ACM_CODE LIKE '%'||:SEARCH||'%' OR ACM.ACM_NAME LIKE '%'||:SEARCH||'%')
+			</WHERE>
+			<GROUP/>
+			<ORDER/>
+		</SQL>
+	</DATASET>
+
+	<DATASET ID="DS-BUDGET-02">
+		<SCHEMA>BUD</SCHEMA>
+		<TABLEDESC>Main Activity</TABLEDESC>
+		<MAXROWS>100</MAXROWS>
+		<SQL>
+			<SELECT>
+				SELECT BGD.BGM_CODE
+				, BGD.BGM_NAME
+				, BGD.BGM_EXPENSE_TYPE
+				, BGD.BGM_UNIT
+				, BGD.BGM_UNIT_RATE
+				, BGD.BGM_ACTIVE
+				, BGD.BGM_PREPARE
+			</SELECT>
+			<FROM>FROM BUDGET_M BGD</FROM>
+			<WHERE>
+				WHERE (BGD.BGM_CODE LIKE '%'||:SEARCH||'%' OR BGD.BGM_NAME LIKE '%'||:SEARCH||'%')
+			</WHERE>
+			<ORDER>ORDER BY BGM_CODE</ORDER>
+		</SQL>
+	</DATASET>
+
+	<DATASET ID="DS-STTGY-GROUP-02">
+		<SCHEMA>APP</SCHEMA>
+		<SQL>
+			<SELECT>SELECT RFG_GRP
+				, RFC_CODE
+				, RFC_DESC
+				, RFC_FLAG
+				, RFC_ORDER
+			</SELECT>
+			<FROM>FROM REFER_CODE</FROM>
+			<WHERE>WHERE (RFG_GRP = 'STG-ITEMS')
+					 AND (RFC_CODE LIKE '%'||:SEARCH||'%' OR RFC_DESC LIKE '%'||:SEARCH||'%')</WHERE>
+			<ORDER>ORDER BY RFC_CODE</ORDER>
+		</SQL>
+	</DATASET>
+
+	<DATASET ID="DS-STTGY-ITEMS-02">
+		<SCHEMA>APP</SCHEMA>
+		<SQL>
+			<SELECT>SELECT RFG_GRP
+				, RFC_CODE
+				, RFC_DESC
+				, RFC_FLAG
+				, RFC_ORDER
+			</SELECT>
+			<FROM>FROM REFER_CODE</FROM>
+			<WHERE>WHERE (RFG_GRP = :RFG_GRP)
+					 AND (RFC_CODE LIKE '%'||:SEARCH||'%' OR RFC_DESC LIKE '%'||:SEARCH||'%')</WHERE>
+			<ORDER>ORDER BY RFC_CODE</ORDER>
+		</SQL>
+	</DATASET>
+
+
+	<DATASET ID="DS-ACTIVITY-02-BDGT">
+		<SCHEMA>BUD</SCHEMA>
+		<TABLEDESC>Main Activity</TABLEDESC>
+		<MAXROWS>100</MAXROWS>
+		<SQL>
+			<SELECT>
+				SELECT ACM_CODE
+				, ACM_NAME
+				, NODE_LEVEL
+				, MAIN_NODE
+				, ACM_UNIT
+				, ACM_START_YEAR
+				, ACM_END_YEAR
+				, STM_CODE
+				, JBT_CODE
+				, JBP_CODE
+				, EXP_CODE
+				, PJM_CODE
+				, STG_CODE
+				, NODE_TYPE
+				, DECODE(NODE_TYPE,'C','true','') disabled
+			</SELECT>
+			<FROM>FROM BGT.V_ACTIVITY_TREE ACM</FROM>
+			<WHERE>
+				WHERE 0=0
+				AND (:DV_YEAR BETWEEN ACM_START_YEAR AND ACM_END_YEAR)
+				-- AND (ACM.STM_CODE = '%' OR ACM.STM_CODE = :STM_CODE)
+				AND (ACM.ACM_CODE LIKE '%'||:SEARCH||'%' OR ACM.ACM_NAME LIKE '%'||:SEARCH||'%')
+			</WHERE>
+			<GROUP/>
+			<ORDER/>
+		</SQL>
+	</DATASET>
+
+	<DATASET ID="DS-BUDGET-02-BDGT">
+		<SCHEMA>APP</SCHEMA>
+		<TABLEDESC>Main Activity</TABLEDESC>
+		<MAXROWS>100</MAXROWS>
+		<SQL>
+			<SELECT>
+				SELECT BGM.BGM_CODE
+				, BGM.BGM_NAME
+				, BGM.EXP_TYPE
+				, BGM.BGM_UNIT
+				, BGM.BGM_UNIT_RATE
+				, BGM.BGM_SEQ
+				, BGM.NODE_LEVEL
+				, BGM.MAIN_NODE
+				, DECODE(NODE_TYPE,'C','true','') disabled
+			</SELECT>
+			<FROM>FROM V_BUDGET_TREE BGM</FROM>
+			<WHERE>
+				WHERE (BGM.BGM_CODE LIKE '%'||:SEARCH||'%' OR BGM.BGM_NAME LIKE '%'||:SEARCH||'%')
+			</WHERE>
+			<ORDER>ORDER BY BGM_SEQ</ORDER>
+		</SQL>
+	</DATASET>
+
+
+
+	<DATASET ID="DS-EQUIPT-BUDGET">
+		<SCHEMA>APP</SCHEMA>
+		<TABLEDESC>Main Activity</TABLEDESC>
+		<MAXROWS>100</MAXROWS>
+		<SQL>
+			<SELECT>
+				SELECT BGM.BGM_CODE
+				, BGM.BGM_NAME
+				, BGM.EXP_TYPE
+				, BGM.BGM_UNIT
+				, BGM.BGM_UNIT_RATE
+				, BGM.BGM_SEQ
+				, BGM.NODE_LEVEL
+				, BGM.MAIN_NODE
+				, DECODE(NODE_TYPE,'C','true','') disabled
+			</SELECT>
+			<FROM>FROM V_BUDGET_TREE BGM</FROM>
+			<WHERE>
+				WHERE (BGM_CODE LIKE '3.1%')
+				AND (BGM.BGM_CODE LIKE '%'||:SEARCH||'%' OR BGM.BGM_NAME LIKE '%'||:SEARCH||'%')
+			</WHERE>
+			<ORDER>ORDER BY BGM_SEQ</ORDER>
+		</SQL>
+	</DATASET>
+
+</DATASETS>
\ No newline at end of file
diff --git a/DevResources/full-examples/bdgt04/view/bgt0401010.jsp b/DevResources/full-examples/bdgt04/view/bgt0401010.jsp
new file mode 100644
index 0000000..1d9e6ff
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/bgt0401010.jsp
@@ -0,0 +1,20 @@
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=pageItemInfo.getProgTitle()%></h1>
+<%
+	try {
+		dynForm = new DynForm(application, request, response, "bdgt04", "bdgt-0401010");
+		dynForm.setFormOwner(request.getRequestURL().toString());
+		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+		if (dynForm.workIn(WorkMode.Editing)) {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt04/view/bgt0401020-budget.jsp b/DevResources/full-examples/bdgt04/view/bgt0401020-budget.jsp
new file mode 100644
index 0000000..f8cb7db
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/bgt0401020-budget.jsp
@@ -0,0 +1,20 @@
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=$M.get("pclp.budget_edit")%></h1>
+<%
+	try {
+		dynForm = new DynForm(application, request, response, "bdgt04", "bdgt-0401020-budget");
+		dynForm.setFormOwner(request.getRequestURL().toString());
+		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+		if (dynForm.workIn(WorkMode.Editing)) {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt04/view/bgt0401020.jsp b/DevResources/full-examples/bdgt04/view/bgt0401020.jsp
new file mode 100644
index 0000000..942057f
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/bgt0401020.jsp
@@ -0,0 +1,20 @@
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=pageItemInfo.getProgTitle()%></h1>
+<%
+	try {
+		dynForm = new DynForm(application, request, response, "bdgt04", "bdgt-0401020");
+		dynForm.setFormOwner(request.getRequestURL().toString());
+		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+		if (dynForm.workIn(WorkMode.Editing)) {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt04/view/bgt0401030-budget.jsp b/DevResources/full-examples/bdgt04/view/bgt0401030-budget.jsp
new file mode 100644
index 0000000..5860ceb
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/bgt0401030-budget.jsp
@@ -0,0 +1,20 @@
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=$M.get("pclp.budget_edit")%></h1>
+<%
+	try {
+		dynForm = new DynForm(application, request, response, "bdgt04", "bdgt-0401030-budget");
+		dynForm.setFormOwner(request.getRequestURL().toString());
+		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+		if (dynForm.workIn(WorkMode.Editing)) {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt04/view/bgt0401030.jsp b/DevResources/full-examples/bdgt04/view/bgt0401030.jsp
new file mode 100644
index 0000000..de98e88
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/bgt0401030.jsp
@@ -0,0 +1,20 @@
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=pageItemInfo.getProgTitle()%></h1>
+<%
+	try {
+		dynForm = new DynForm(application, request, response,  "bdgt04", "bdgt-0401030");
+		dynForm.setFormOwner(request.getRequestURL().toString());
+		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+		if (dynForm.workIn(WorkMode.Editing)) {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt04/view/bgt0403010-general.jsp b/DevResources/full-examples/bdgt04/view/bgt0403010-general.jsp
new file mode 100644
index 0000000..c85f981
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/bgt0403010-general.jsp
@@ -0,0 +1,51 @@
+<%@ page import="org.apache.commons.codec.*" %>
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=pageItemInfo.getProgTitle()%></h1>
+<%
+	String _formId = "bdgt-0403010/general";
+	try {
+		String data = factory.rqsCtx.getParameter("data","");
+		if (!data.isBlank()) {
+			data = JUtils.decBase64(data);
+			data = URLDecoder.decode(data, CharEncoding.UTF_8);
+
+			boolean isEditMode = factory.rqsCtx.isPostParam("add") || factory.rqsCtx.isPostParam("edit") || factory.rqsCtx.isPostParam("view");
+			JSONObject jsData = new JSONObject(data);
+			String type = jsData.getString("type");
+			String acmCode = jsData.getString("acm_code");
+			String projId = jsData.getString("proj_id");
+
+			if (isEditMode && type.equals("rutn")) {
+				_formId = "bdgt-0403010/routine";
+			} else if (isEditMode && type.equals("mngt")) {
+				_formId = "bdgt-0403010/manage";
+			} else if (isEditMode && type.equals("eqpt")) {
+				_formId = "bdgt-0403010/equipt";
+			} else if (isEditMode && type.equals("cnst")) {
+				_formId = "bdgt-0403010/construct";
+			}
+
+			dynForm = new DynForm(application, request, response,  "bdgt04", _formId);
+			dynForm.setFormOwner(request.getRequestURL().toString());
+			dynForm.setFormvar("ACM_CODE",acmCode);
+			dynForm.setFormvar("PROJ_ID",projId);
+		} else {
+			dynForm = new DynForm(application, request, response,  "bdgt04", _formId);
+		}
+
+		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+
+		if (dynForm.workIn(WorkMode.Editing)) {
+			factory.pageCtx.addWidget(DynConstants.PageWidget.FileBox);
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt04/view/bgt0403010-project-budget.jsp b/DevResources/full-examples/bdgt04/view/bgt0403010-project-budget.jsp
new file mode 100644
index 0000000..692886e
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/bgt0403010-project-budget.jsp
@@ -0,0 +1,20 @@
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=$M.get("pclp.budget_edit")%></h1>
+<%
+	try {
+		dynForm = new DynForm(application, request, response, "bdgt04", "bdgt-0403010-project-budget");
+		dynForm.setFormOwner(request.getRequestURL().toString());
+		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+		if (dynForm.workIn(WorkMode.Editing)) {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt04/view/bgt0403010-project.jsp b/DevResources/full-examples/bdgt04/view/bgt0403010-project.jsp
new file mode 100644
index 0000000..ceea8c4
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/bgt0403010-project.jsp
@@ -0,0 +1,35 @@
+<%@ page import="org.apache.commons.codec.*" %>
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=pageItemInfo.getProgTitle()%></h1>
+<%
+	String _formId = "bdgt-0403010/project";
+	try {
+		String data = factory.rqsCtx.getParameter("data","");
+			data = JUtils.decBase64(data);
+			data = URLDecoder.decode(data, CharEncoding.UTF_8);
+
+			JSONObject jsData = new JSONObject(data);
+			String type = jsData.getString("type");
+			String acmCode = jsData.getString("acm_code");
+			String projId = jsData.getString("proj_id");
+
+			dynForm = new DynForm(application, request, response,  "bdgt04", _formId);
+			dynForm.setFormOwner(request.getRequestURL().toString());
+			dynForm.setFormvar("ACM_CODE",acmCode);
+			dynForm.setFormvar("PROJ_ID",projId);
+			dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+
+		if (dynForm.workIn(WorkMode.Editing)) {
+			factory.pageCtx.addWidget(DynConstants.PageWidget.FileBox);
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt04/view/bgt0403010.jsp b/DevResources/full-examples/bdgt04/view/bgt0403010.jsp
new file mode 100644
index 0000000..0bd586e
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/bgt0403010.jsp
@@ -0,0 +1,25 @@
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=pageItemInfo.getProgTitle()%></h1>
+<%
+	try {
+		String _formId = "bdgt-0403010";
+//		String _page = factory.rqsCtx.getParameter("page");
+//		if (_page.equals("general")) {
+//			_formId = "bdgt-0403010-general";
+//		}
+		dynForm = new DynForm(application, request, response,  "bdgt04", _formId);
+		dynForm.setFormOwner(request.getRequestURL().toString());
+		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+		if (dynForm.workIn(WorkMode.Editing)) {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt04/view/bgt0403020-general.jsp b/DevResources/full-examples/bdgt04/view/bgt0403020-general.jsp
new file mode 100644
index 0000000..f421894
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/bgt0403020-general.jsp
@@ -0,0 +1,51 @@
+<%@ page import="org.apache.commons.codec.*" %>
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=pageItemInfo.getProgTitle()%></h1>
+<%
+	String _formId = "bdgt-0403020/general";
+	try {
+		String data = factory.rqsCtx.getParameter("data","");
+		if (!data.isBlank()) {
+			data = JUtils.decBase64(data);
+			data = URLDecoder.decode(data, CharEncoding.UTF_8);
+
+			boolean isEditMode = factory.rqsCtx.isPostParam("add") || factory.rqsCtx.isPostParam("edit") || factory.rqsCtx.isPostParam("view");
+			JSONObject jsData = new JSONObject(data);
+			String type = jsData.getString("type");
+			String acmCode = jsData.getString("acm_code");
+			String projId = jsData.getString("proj_id");
+
+			if (isEditMode && type.equals("rutn")) {
+				_formId = "bdgt-0403020/routine";
+			} else if (isEditMode && type.equals("mngt")) {
+				_formId = "bdgt-0403020/manage";
+			} else if (isEditMode && type.equals("eqpt")) {
+				_formId = "bdgt-0403020/equipt";
+			} else if (isEditMode && type.equals("cnst")) {
+				_formId = "bdgt-0403020/construct";
+			}
+
+			dynForm = new DynForm(application, request, response,  "bdgt04", _formId);
+			dynForm.setFormOwner(request.getRequestURL().toString());
+			dynForm.setFormvar("ACM_CODE",acmCode);
+			dynForm.setFormvar("PROJ_ID",projId);
+		} else {
+			dynForm = new DynForm(application, request, response,  "bdgt04", _formId);
+		}
+
+		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+
+		if (dynForm.workIn(WorkMode.Editing)) {
+			factory.pageCtx.addWidget(DynConstants.PageWidget.FileBox);
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt04/view/bgt0403020-project-budget.jsp b/DevResources/full-examples/bdgt04/view/bgt0403020-project-budget.jsp
new file mode 100644
index 0000000..1f0a818
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/bgt0403020-project-budget.jsp
@@ -0,0 +1,20 @@
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=$M.get("pclp.budget_edit")%></h1>
+<%
+	try {
+		dynForm = new DynForm(application, request, response, "bdgt04", "bdgt-0403020/project-budget");
+		dynForm.setFormOwner(request.getRequestURL().toString());
+		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+		if (dynForm.workIn(WorkMode.Editing)) {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt04/view/bgt0403020-project.jsp b/DevResources/full-examples/bdgt04/view/bgt0403020-project.jsp
new file mode 100644
index 0000000..69859c0
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/bgt0403020-project.jsp
@@ -0,0 +1,35 @@
+<%@ page import="org.apache.commons.codec.*" %>
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=pageItemInfo.getProgTitle()%></h1>
+<%
+	String _formId = "bdgt-0403020/project";
+	try {
+		String data = factory.rqsCtx.getParameter("data","");
+			data = JUtils.decBase64(data);
+			data = URLDecoder.decode(data, CharEncoding.UTF_8);
+
+			JSONObject jsData = new JSONObject(data);
+			String type = jsData.getString("type");
+			String acmCode = jsData.getString("acm_code");
+			String projId = jsData.getString("proj_id");
+
+			dynForm = new DynForm(application, request, response,  "bdgt04", _formId);
+			dynForm.setFormOwner(request.getRequestURL().toString());
+			dynForm.setFormvar("ACM_CODE",acmCode);
+			dynForm.setFormvar("PROJ_ID",projId);
+			dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+
+		if (dynForm.workIn(WorkMode.Editing)) {
+			factory.pageCtx.addWidget(DynConstants.PageWidget.FileBox);
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt04/view/bgt0403020.jsp b/DevResources/full-examples/bdgt04/view/bgt0403020.jsp
new file mode 100644
index 0000000..c07c1f4
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/bgt0403020.jsp
@@ -0,0 +1,21 @@
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=pageItemInfo.getProgTitle()%></h1>
+<%
+	try {
+		String _formId = "bdgt-0403020";
+		dynForm = new DynForm(application, request, response,  "bdgt04", _formId);
+		dynForm.setFormOwner(request.getRequestURL().toString());
+		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+		if (dynForm.workIn(WorkMode.Editing)) {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0401010.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0401010.frml
new file mode 100644
index 0000000..fdfd907
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0401010.frml
@@ -0,0 +1,249 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-construct-budget.frml"></INCLUDE>
+	</INCLUDES>
+
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ.PROJ_ID
+					, PROJ.PROJ_TYPE
+					, PROJ.PROJ_YEAR
+					, PROJ.PJM_CODE
+					, PROJ.STM_CODE
+					, PROJ.BTM_CODE
+					, PROJ.ACM_CODE
+					, BUD.GET_ACTIVITY(PROJ.ACM_CODE) ACM_NAME
+					, PROJ.PLAN_TYPE
+					, PROJ.PROJ_DURATION
+					, PROJ.PROJ_START_YEAR
+					, PROJ.PROJ_END_YEAR
+					, PROJ.PROJ_FOR_STAFF
+
+					, PROJ.PROJ_FROM_YEAR
+					, 0 BDGT_TOTAL
+				</SELECT>
+				<FROM>FROM PROJECTS PROJ
+						   INNER JOIN REFER_CODE RFC ON RFC.RFG_GRP='PROJ-TYPE' AND RFC.RFC_CODE=PROJ.PROJ_TYPE AND RFC.RFC_FLAG = 'GENERAL'
+					</FROM>
+				<FILTER>WHERE STM_CODE = :STM_CODE</FILTER>
+				<ORDER>ORDER BY RFC.RFC_ORDER, PROJ.PROJ_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PROJ_TYPE" TYPE="TEXT" LABEL="ประเภทโครงการ" WIDTH="25"/>
+				<FIELD NAME="PROJ_YEAR" TYPE="NUMBER" LABEL="ปีงบประมาณ" WIDTH="15"/>
+				<FIELD NAME="PJM_CODE" TYPE="TEXT" LABEL="รหัสโครงการ (BUD)" WIDTH="20"/>
+				<FIELD NAME="STM_CODE" TYPE="TEXT" LABEL="รหัสหน่วยงาน" WIDTH="10"/>
+				<FIELD NAME="BTM_CODE" TYPE="TEXT" LABEL="รหัสประเภทงบประมาณ" WIDTH="10"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20"/>
+				<FIELD NAME="PLAN_TYPE" TYPE="TEXT" LABEL="ประเภทแผน" WIDTH="15"/>
+				<FIELD NAME="PROJ_DURATION" TYPE="NUMBER" LABEL="ระยะเวลาดำเนินการ (วัน)" WIDTH="15"/>
+				<FIELD NAME="PROJ_START_YEAR" TYPE="NUMBER" LABEL="ปีที่เริ่มโครงการ (ก่อสร้าง)" WIDTH="15"/>
+				<FIELD NAME="PROJ_END_YEAR" TYPE="NUMBER" LABEL="ปีที่สิ้นสุดโครงการ (ก่อสร้าง)" WIDTH="15"/>
+				<FIELD NAME="PROJ_FOR_STAFF" TYPE="NUMBER" LABEL="จำนวนบุคลากรที่รองรับ" WIDTH="15"/>
+				<FIELD NAME="PROJ_FROM_YEAR" TYPE="NUMBER" LABEL="ต่อเนื่องจากปี" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<SUBDATASETS>
+				<SUBDATASET NAME="ACTIVITIES" DATASET-ID="DS-ACTIVITY-TREE" LINK-FIELDS="PROJ_ID"/>
+			</SUBDATASETS>
+		</DATASET>
+		<DATASET ID="DS-ACTIVITY-TREE">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>V_ACTIVITY_TREE</TABLENAME>
+			<SQL>
+				<SELECT>
+					SELECT PACT.PROJ_ID
+					, PACT.PROJ_GROUP
+					, PACT.PROJ_TYPE
+					, ACTT.ACM_CODE
+					, ACTT.ACM_NAME
+					, ACTT.ACM_SEQ
+					, ACTT.NODE_LEVEL+1 NODE_LEVEL
+					, ACTT.MAIN_NODE
+					, ACTT.ACM_UNIT
+					, ACTT.ACM_START_YEAR
+					, ACTT.ACM_END_YEAR
+					, ACTT.NODE_TYPE
+					, PACT.BDGT_COUNT
+					, PACT.BDGT_TOTAL
+				</SELECT>
+				<FROM>
+					FROM BGT.V_ACTIVITY_TREE ACTT
+						 INNER JOIN (SELECT DISTINCT ACM.ACM_CODE
+									   FROM BUD.ACTIVITY_M ACM
+									        INNER JOIN BUD.ACTIVITY_CTRL_H ACH ON ACM.ACM_CODE = ACH.ACH_CODE
+											START WITH ACM.ACM_CODE IN (SELECT ACM_CODE FROM V_PROJECT_ACTIVITY PACT WHERE PACT.PROJ_ID = :PROJ_ID)
+											CONNECT BY PRIOR ACH.ACH_CTRL_CODE = ACH.ACH_CODE) FLTR ON FLTR.ACM_CODE = ACTT.ACM_CODE
+						LEFT OUTER JOIN V_PROJECT_ACTIVITY PACT ON PACT.ACM_CODE = ACTT.ACM_CODE AND PACT.PROJ_ID = :PROJ_ID
+				</FROM>
+				<ORDER>
+					ORDER BY ACTT.ACM_SEQ
+				</ORDER>
+			</SQL>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-MASTER">
+			<HEADER NAVI="N" EDIT="N" ADD="N" DELETE="N" VIEW="N"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="ACM_CODE" LABEL="project.const_code" ALIGN="left">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return (row.node_type === "P")?"":$(`<div class="col-24 row text-nowrap"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="ACM_NAME" LABEL="project.const_name" ALIGN="left">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return (row.node_type === "P")?"":$(`<div class="col-24 row text-nowrap"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="BDGT_COUNT" LABEL="pbdg.acm_count" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[(value, row, idx) => {
+							if (row["node_type"] === "D") {
+								return `<div class="col-24 text-nowrap">${formatNumber(value)} ${row["acm_unit"]}</div>`;
+								// return  formatNumber(value)+" "+row["acm_unit"];
+							} else {
+								return ""
+							}
+						}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="BDGT_TOTAL" LABEL="project.bgt_amount" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[(value, row, idx) => {return(row.proj_type !=="RUTN") ? "":formatNumber(value);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<COMMAND-BUTTONS>
+					<BUTTONS-FILTER>
+						<EDIT><![CDATA[(row)=>{return ["D","P"].includes(row["node_type"]);}]]></EDIT>
+						<VIEW><![CDATA[(row)=>{return ["D","P"].includes(row["node_type"]);}]]></VIEW>
+					</BUTTONS-FILTER>
+				</COMMAND-BUTTONS>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="Y" ALLOW-NO-FILTER="Y">
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="COMBOBOX" SEARCH-ORIGIN="PROJ_YEAR=${VALUE}">
+						<LIST-OPTION TABLE="VL_YEAR" TEXT="#DV_YEAR" VALUE="DV_YEAR" ORDER="DV_YEAR" FIRSTLIST="@{NONE}"/>
+					</FIELD>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="12"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+			<FOOTER SHOW="Y"/>
+			<BUTTONS>
+				<BUTTON NAME="btnButton1" CAPTION="ส่งผู้อำนวยการสำนักพิจารณา" CLASS="btn btn-warning" SECTION="RIGHT"/>
+			</BUTTONS>
+			<SCRIPT>
+				<EVENTS>
+					<AFTER-LOAD>
+						<![CDATA[
+							($ctx,data)=>{
+								let src = [...data]; // clone data to src
+									data.splice(0); // clear data element
+
+								let id = 1;
+								for (let item of src) {
+									item["node_type"] = "P";
+									item["node_level"] = "0";
+									item["$itemno"] = id++;
+									data.push(item);
+									if (isArray(item.activities)) {
+										for (let sitem of item.activities) {
+											sitem["$itemno"] = id++;
+											data.push(sitem);
+										}
+									}
+								}
+								console.log(data);
+							}
+					]]>
+					</AFTER-LOAD>
+				</EVENTS>
+
+				<INITIALIZE>
+					<![CDATA[
+					{
+						console.log("init activity grid");
+
+						const fieldFormat = (value,row) => {
+							console.log(row["proj_type"]);
+							if (row["node_type"] === "P" || row["proj_type"] === "RUTN") {
+								return "";
+							}
+							return formatNumber(value, 0);
+						}
+
+						const summary = (field, data) => {
+							let total = 0;
+							for (let id=0; id < data.length; id++) {
+								let row = data[id];
+								if (row["node_type"] === "D") {
+									total += (+row[field]) || 0;
+								}
+							}
+
+							if ($PageCtx.$dataGrid.load && !$PageCtx.$dataGrid.reload) {
+								$PageCtx.$dataGrid.reload = true;
+								let proj_type = "";
+								for (let id=data.length-1; id>=0; id--) {
+									let row = data[id];
+									proj_type = (row["proj_type"])||proj_type;
+									if (row["node_type"] === "C") {
+										let grpTotal = 0;
+										let mainNode = row["acm_code"];
+										let nodes = [];
+										nodes.push($$("main_node="+mainNode,data));
+										for (let node of nodes.flat()) {
+											grpTotal += +node[field];
+										}
+										data[id][field] = grpTotal;
+										data[id]["proj_type"] = proj_type;
+									}
+								}
+								$PageCtx.$dataGrid.load(data);
+								$PageCtx.$dataGrid.reload = false;
+							}
+							return formatNumber(total, 0);
+						}
+
+						const $ctx = $PageCtx;
+						const gridFields = [$$("field=bdgt_total", $ctx.gridColumn.flat())].flat();
+						for (let field of gridFields) {
+							field.formatter = fieldFormat;
+							field.footerFormatter = function (data) {
+								return summary(this.field, data);
+							}
+						}
+
+						$ctx.rowStyle = function (row, index) {
+							if (row["node_type"] === "C") {
+								return {classes : `group-level-${row["node_level"]}`};
+							}
+							if (row["node_type"] === "P") {
+								return {classes : `group-level-0`};
+							}
+							return {}; // Default style for other rows
+						}
+					}
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+
+
+		</FORM_BROWSE>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0401020-budget.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0401020-budget.frml
new file mode 100644
index 0000000..ec9b393
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0401020-budget.frml
@@ -0,0 +1,316 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-proj-budget.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-BROWSER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>V_ACTIVITY_TREE</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT :PROJ_ID PROJ_ID
+					, ACTT.ACM_CODE
+					, ACTT.ACM_NAME
+					, ACTT.ACM_SEQ
+					, ACTT.NODE_LEVEL
+					, ACTT.MAIN_NODE
+					, ACTT.ACM_UNIT
+					, ACTT.ACM_START_YEAR
+					, ACTT.ACM_END_YEAR
+					, ACTT.NODE_TYPE
+					, PJBG.PBDG_TOTAL PBDG_TOTAL
+					, PJBG.PBDG_COUNT  PBDG_COUNT
+				</SELECT>
+				<FROM>
+					FROM BGT.V_ACTIVITY_TREE ACTT
+						 INNER JOIN ( SELECT DISTINCT ACM.ACM_CODE
+										FROM BUD.ACTIVITY_M ACM
+											 INNER JOIN BUD.ACTIVITY_CTRL_H ACH ON ACM.ACM_CODE = ACH.ACH_CODE
+										START WITH ACM.ACM_CODE IN (SELECT ACM_CODE FROM PROJECT_BUDGETS PJBD WHERE PROJ_ID = :PROJ_ID)
+									  CONNECT BY PRIOR ACH.ACH_CTRL_CODE = ACH.ACH_CODE) FLTR ON FLTR.ACM_CODE = ACTT.ACM_CODE
+						 LEFT OUTER JOIN PROJECT_BUDGETS PJBG ON PJBG.PROJ_ID=:PROJ_ID AND PJBG.ACM_CODE = ACTT.ACM_CODE
+				</FROM>
+				<ORDER>ORDER BY ACTT.ACM_SEQ</ORDER>
+			</SQL>
+		</DATASET>
+
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, PBDG_ID
+					, ACM_CODE
+					, PBDG_TOTAL
+					, PBDG_COUNT
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-BROWSER">
+			<HEADER NAVI="Y" ADD="Y" EDIT="Y" DELETE="Y"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="ACM_CODE" LABEL="project.acm_code" ALIGN="left" WIDTH="15em">
+					<DATA-FORMATTER><![CDATA[
+						(value,row,idx)=>{
+							return $(`<div class="col-24 row"><div class="col offset-${row.node_level}">${value}</div></div>`);
+						}
+						]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="ACM_NAME" LABEL="project.acm_name" ALIGN="left">
+					<DATA-FORMATTER><![CDATA[
+						(value,row,idx)=>{
+							return $(`<div class="col-24 row"><div class="col offset-${row.node_level}">${value}</div></div>`);
+						}
+						]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="PBDG_TOTAL" LABEL="project.bgt_amount" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return (row["node_type"]==="D")? value : "";}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<COMMAND-BUTTONS>
+					<BUTTONS-FILTER>
+						<EDIT><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></EDIT>
+						<DELETE><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></DELETE>
+						<VIEW><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></VIEW>
+					</BUTTONS-FILTER>
+				</COMMAND-BUTTONS>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="Y" ALLOW-NO-FILTER="Y" >
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" DATATYPE="TEXT" ALIGN="center"/>
+					<FIELD NAME="PROJ_NAME" CAPTION="project.name" INPUTTYPE="TEXT" DATATYPE="TEXT" ALIGN="left"/>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"></FIELD>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" CAPT_WIDTH="10" VAL_WIDTH="6" LAYOUT_WIDTH="12"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_NAME" CAPT_WIDTH="5" VAL_WIDTH="18" LAYOUT_WIDTH="24"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+			<FOOTER SHOW="Y"/>
+			<SCRIPT>
+				<INITIALIZE>
+					<![CDATA[
+					{
+						console.log("init activity grid");
+
+						const fieldFormat = (value) => {
+							return formatNumber(value, 0);
+						}
+
+						$PageCtx.sum_of = {};
+						const summary = (field, data) => {
+							console.log("budget summary process.")
+							let total = 0;
+							for (let id=0; id < data.length; id++) {
+								let row = data[id];
+								if (row["node_type"] === "D") {
+									total += (+row[field]) || 0;
+								}
+							}
+
+							$PageCtx.sum_of[field] = total;
+
+							if ($PageCtx.$dataGrid.load && !$PageCtx.$dataGrid.reload) {
+								$PageCtx.$dataGrid.reload = true;
+								for (let id=data.length-1; id>=0; id--) {
+									let row = data[id];
+									if (row["node_type"] === "C") {
+										let grpTotal = 0;
+										let mainNode = row["acm_code"];
+										let nodes = [];
+										nodes.push($$("main_node="+mainNode,data));
+										for (let node of nodes.flat()) {
+											grpTotal += +node[field];
+										}
+										data[id][field] = grpTotal;
+									}
+								}
+								$PageCtx.$dataGrid.load(data);
+								$PageCtx.$dataGrid.reload = false;
+							}
+
+							return formatNumber(total, 0);
+						}
+
+						const $ctx = $PageCtx;
+						const gridFields = [$$("field^pbdg_", $ctx.gridColumn.flat())].flat();
+						for (let field of gridFields) {
+							field.formatter = fieldFormat;
+							field.footerFormatter = function (data) {
+								return summary(this.field, data);
+							}
+						}
+
+						$ctx.rowStyle = function (row, index) {
+							if (row["node_type"] === "C") {
+								return {
+									classes : `group-level-${row["node_level"]}`
+								};
+							}
+							return {}; // Default style for other rows
+						}
+					}
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_BROWSE>
+
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PROJ_NAME" CAPTION="project.name" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="VACM_CODE" CAPTION="project.acm_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.acm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-ACTIVITY-02-BDGT" VALUE-FIELD="ACM_CODE" TEXT-FIELD="ACM_NAME" PARAMETERS="DV_YEAR=PROJ_YEAR,STM_CODE=STM_CODE">
+						<UPDATE-FIELDS>
+							<FIELD SRC="ACM_CODE" TARGET="VACM_CODE"></FIELD>
+							<FIELD SRC="ACM_UNIT" TARGET="TARGET_UNIT"></FIELD>
+							<FIELD SRC="ACM_UNIT" TARGET="PWMT_UNIT"></FIELD>
+							<FIELD SRC="PJM_CODE" TARGET="PJM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								if (data.node_type === "C") {
+									data.disabled = true;
+								}
+								return $(`<div><label>[${data.acm_code}]</label> : <label>${data.acm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+				<FIELD NAME="GRID-BUDGET" INPUTTYPE="DATA-GRID" GRID-ID="GRID-WORK-BUDGET" ROWS="5" CAPTION="project.budget"/>
+
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_NAME" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.budget}</h4>]]></HEADER>
+					<ROW>
+						<FIELD NAME="GRID-BUDGET" LAYOUT_WIDTH="24" OFFSET=""/>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							let acmCount = $$("^QT_TOTAL_0").sum();
+							$$("PBDG_COUNT").val(acmCount);
+							let gridCtx = ($PageCtx.widgets["GRID-BUDGET"]||{})["$GridCtx"];
+							if (gridCtx) {
+								 let bdgTotal = gridCtx.sum_of["pbgi_total"];
+								$$("PBDG_TOTAL").val(bdgTotal);
+							}
+							Object.assign(data,form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+				<INITIALIZE>
+					<![CDATA[
+					     const quoterSum = ()=>{
+						     for (let sect=1; sect <=2; sect++) {
+							     let summary = 0;
+							     for (let qt = 1; qt <= 4; qt++) {
+								     summary += $$(`PTGT_QT_0${qt}0${sect}`).number();
+							     }
+							     $$(`QT_TOTAL_0${sect}`).val(formatNumber(summary));
+						     }
+					     }
+						 $$("^PTGT_QT_").on("change",quoterSum);
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0401020.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0401020.frml
new file mode 100644
index 0000000..9e0dc83
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0401020.frml
@@ -0,0 +1,694 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-stratigy.frml"></INCLUDE>
+		<INCLUDE FILE="#grids/grid-stratigy-item.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT PROJ.PROJ_ID
+					, PROJ.PROJ_TYPE
+					, PROJ.PROJ_YEAR
+					, PROJ.PJM_CODE
+					, BUD.GET_PROJECT(PROJ.PJM_CODE) PROJ_NAME
+					, PROJ.STM_CODE
+					, PROJ.BTM_CODE
+					, PROJ.ACM_CODE
+					, BUD.GET_ACTIVITY(PROJ.ACM_CODE) ACM_NAME
+					, PROJ.PLAN_TYPE
+					, PROJ.PROJ_DURATION
+					, PROJ.PROJ_START_YEAR
+					, PROJ.PROJ_END_YEAR
+					, PROJ.PROJ_FOR_STAFF
+
+					, PROJ.PROJ_CATE
+					, PROJ.PROJ_KIND
+					, PROJ.PROJ_FROM_YEAR
+
+				</SELECT>
+				<FROM>FROM PROJECTS PROJ</FROM>
+				<FILTER>WHERE PROJ_TYPE = 'PLCY' AND STM_CODE=:STM_CODE</FILTER>
+				<ORDER>ORDER BY PROJ_YEAR DESC, PROJ_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="VARCHAR" WIDTH="50" LABEL="plcp.id"/>
+				<FIELD NAME="PROJ_TYPE" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.type"/>
+				<FIELD NAME="PROJ_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.year"/>
+				<FIELD NAME="PJM_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="plcp.pjm_code"/>
+				<FIELD NAME="STM_CODE" TYPE="VARCHAR" WIDTH="10" LABEL="plcp.stm_code"/>
+				<FIELD NAME="BTM_CODE" TYPE="VARCHAR" WIDTH="10" LABEL="plcp.btm_code"/>
+				<FIELD NAME="ACM_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="plcp.acm_code"/>
+				<FIELD NAME="ACM_NAME" TYPE="VARCHAR" WIDTH="200" LABEL="plcp.acm_name"/>
+				<FIELD NAME="PLAN_TYPE" TYPE="VARCHAR" WIDTH="15" LABEL="plcp.plan_type"/>
+				<FIELD NAME="PROJ_DURATION" TYPE="NUMBER" WIDTH="10" LABEL="plcp.duration"/>
+				<FIELD NAME="PROJ_START_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.start_year"/>
+				<FIELD NAME="PROJ_END_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.end_year"/>
+				<FIELD NAME="PROJ_FOR_STAFF" TYPE="NUMBER" WIDTH="10" LABEL="plcp.for_staff"/>
+
+				<FIELD NAME="PROJ_CATE" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.catagory"/>
+				<FIELD NAME="PROJ_KIND" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.kine"/>
+				<FIELD NAME="PROJ_FROM_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.from_year"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-MASTER">
+			<HEADER NAVI="Y" ADD="Y" EDIT="Y" DELETE="Y"/>
+			<PAGESIZE>15</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="PJM_CODE" LABEL="plcp.pjm_code" ALIGN="left" WIDTH="10em"/>
+				<FIELD NAME="PROJ_NAME" LABEL="plcp.pjm_name" ALIGN="left"/>
+				<FIELD NAME="ACM_NAME" LABEL="plcp.acm_name" ALIGN="left"/>
+				<FIELD NAME="PROJ_TOTAL" LABEL="plcp.bgt_amount" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[(value, row, idx) => {return formatNumber(value);}]]>
+					</DATA-FORMATTER>
+					<FOOTER-FORMATTER>
+						<![CDATA[(data) => {return formatNumber($$(data).sum("proj_total"));}]]>
+					</FOOTER-FORMATTER>
+				</FIELD>
+				<COMMAND-BUTTONS NEWLINE="Y">
+					<BUTTON NAME="btnBudget" CAPTION="budget" CLASS="btn btn-outline-success w-75 with-caption" ICON-CLASS="bi bi-file-ruled">
+						<EVENT ON="click"><![CDATA[
+							({ev, row}) => {
+								ev.preventDefault();
+								let targetUrl = url("/bdgt04/bgt0401020-budget?proj_id=" + row["proj_id"]);
+								row.page_title = $("h4.page-title").html();
+								$PageCtx.saveSessionData("budget", row);
+								$PageCtx.saveStorageData("budget#search", {PROJ_ID: row["proj_id"]});
+								$WebNavi.goto(targetUrl);
+							}
+							]]></EVENT>
+					</BUTTON>
+				</COMMAND-BUTTONS>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="Y" ALLOW-NO-FILTER="N">
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="plcp.year" INPUTTYPE="COMBOBOX" SEARCH-ORIGIN="PROJ_YEAR=${VALUE}">
+						<LIST-OPTION TABLE="VL_YEAR" TEXT="#DV_YEAR" VALUE="DV_YEAR" ORDER="DV_YEAR" FIRSTLIST="@{NONE}"/>
+					</FIELD>
+					<FIELD NAME="ACM_NAME" CAPTION="plcp.name" INPUTTYPE="TEXT" SEARCH-ORIGIN="ACM_NAME='%${VALUE}%'"/>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="12"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="ACM_NAME" CAPT_WIDTH="6" VAL_WIDTH="14" LAYOUT_WIDTH="20"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+			<FOOTER SHOW="Y"/>
+		</FORM_BROWSE>
+
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="STM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="BTM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PLAN_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_DURATION" INPUTTYPE="HIDDEN"/>
+
+				<FIELD NAME="PROJ_YEAR" CAPTION="plcp.year" INPUTTYPE="TEXT" READONLY="Y" DATATYPE="TEXT"/>
+				<FIELD NAME="VPJM_CODE" CAPTION="plcp.pjm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PJM_CODE" CAPTION="plcp.pjm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-PROJECT-02" VALUE-FIELD="PJM_CODE" TEXT-FIELD="PJM_NAME">
+						<UPDATE-FIELDS>
+							<FIELD SRC="PJM_CODE" TARGET="VPJM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								// data.disabled = data["node_type"] === "C";
+								return $(`<div class="d-flex flex-row gap-1 dyn-list-item"><label class="flex-column text-nowrap col-3">[${data.pjm_code}]</label> : <label>${data.pjm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+
+				<FIELD NAME="VACM_CODE" CAPTION="plcp.acm_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_CODE" CAPTION="plcp.acm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-ACTIVITY-02" VALUE-FIELD="ACM_CODE" TEXT-FIELD="ACM_NAME" PARAMETERS="DV_YEAR=PROJ_YEAR,STM_CODE=STM_CODE">
+						<UPDATE-FIELDS>
+							<FIELD SRC="ACM_CODE" TARGET="VACM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								// data.disabled = data["node_type"] === "C";
+								return $(`<div class="d-flex flex-row gap-1 dyn-list-item"><label class="flex-column text-nowrap col-3">[${data.acm_code}]</label> : <label>${data.acm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+
+				<FIELD NAME="STM_CODE" CAPTION="plcp.stm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="BTM_CODE" CAPTION="plcp.btm_code" INPUTTYPE="TEXT"/>
+				<FIELD NAME="PLAN_TYPE" CAPTION="plcp.plan_type" INPUTTYPE="TEXT"/>
+				<FIELD NAME="PROJ_DURATION" CAPTION="plcp.duration" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_START_YEAR" CAPTION="plcp.start_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_END_YEAR" CAPTION="plcp.end_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_FOR_STAFF" CAPTION="plcp.for_staff" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+
+				<FIELD NAME="PROJ_CATE" CAPTION="plcp.catagory" INPUTTYPE="RADIOGROUP" DATATYPE="TEXT" CLASS-NAME="flex-option">
+					<LIST-OPTION TABLE="BGT.REFER_CODE" TEXT="#RFC_DESC" VALUE="RFC_CODE" FILTER="RFG_GRP='PROJ-CATE'" ORDER="RFC_CODE"/>
+				</FIELD>
+
+				<FIELD NAME="PROJ_KIND" CAPTION="plcp.kind" INPUTTYPE="SWITCH" DATATYPE="TEXT"
+					   VALUE="NEW" UNCHECK_VALUE="OLD" SUFFIX="#plcp.new|plcp.continue"></FIELD>
+
+
+				<FIELD NAME="PROJ_PHASE" CAPTION="#--" SHOWCAPT="Y" INPUTTYPE="CHECKBOXGROUP" DATATYPE="TEXT">
+					<LIST-OPTION TABLE="BGT.REFER_CODE" TEXT="#RFC_DESC" VALUE="RFC_CODE" FILTER="RFG_GRP='PROJ-PHASE'" ORDER="RFC_CODE" COLUMN="4"/>
+				</FIELD>
+				<FIELD NAME="PROJ_BUDGET" CAPTION="plcp.budget" INPUTTYPE="TEXT" DATATYPE="NUMBER" SUFFIX="บาท"/>
+
+
+				<FIELD NAME="PROJ_FROM_YEAR" CAPTION="plcp.from_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+				<FIELD NAME="GRID-STRATEGY" INPUTTYPE="DATA-GRID" GRID-ID="GRID-PROJECT-STTGYS" CAPTION="pstg.header"/>
+
+				<FIELD NAME="PROJ_INVOLVERS" INPUTTYPE="TEXTAREA" CAPTION="plcp.involvers" ROWS="4"/>
+				<FIELD NAME="PROJ_INVOLVISSE" INPUTTYPE="TEXTAREA" CAPTION="plcp.involv_issue" ROWS="4"/>
+
+				<SECTION ID="SEC-ATTATCH-FILE">
+					<FIELD NAME="FILE_BOX_01" CAPTION="file.upload 1" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_02" CAPTION="file.upload 2" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_03" CAPTION="file.upload 3" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+				</SECTION>
+
+			</FIELDS>
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VPJM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PJM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+				</SECTION>
+				<SECTION>
+					<HEADER CLASS="form-section-header col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{pstg.header}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="GRID-STRATEGY" LAYOUT_WIDTH="20" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+				<SECTION>
+					<ROW>
+						<FIELD NAME="PROJ_CATE" OFFSET="4" LAYOUT_WIDTH="20"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_KIND" OFFSET="4" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="PROJ_FROM_YEAR" LAYOUT_WIDTH="6"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-STRATEGY">
+					<HEADER CLASS="form-section-header col-24 mg-t-30 border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">ความเชื่อมโยงของโครงการกับประเด็นการยกระดับคะแนนดัชนีการรับรู้การทุจริต(CPI)และแหล่งข้อมูล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-4">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center">ประเด็น/แหล่งข้อมูล</th>
+										<th class="center" style="width: 5em">BF(TI)<br>(1)</th>
+										<th class="center" style="width: 5em">EIU<br>(2)</th>
+										<th class="center" style="width: 5em">GI<br>(3)</th>
+										<th class="center" style="width: 5em">IMD<br>(4)</th>
+										<th class="center" style="width: 5em">PERC<br>(5)</th>
+										<th class="center" style="width: 5em">PRS<br>(6)</th>
+										<th class="center" style="width: 5em">WEF<br>(7)</th>
+										<th class="center" style="width: 5em">WJP<br>(8)</th>
+										<th class="center" style="width: 5em">VDEM<br>(9)</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">1.สินบน</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+									</tr>
+									<tr>
+										<td class="left">2.การขัดกันแห่งผลประโยชน์</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+									</tr>
+									<tr>
+										<td class="left">3.นโยบายของรัฐบาลในการแก้ไขปัญหาการทุจริต</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+									<tr>
+										<td class="left">4.การตรวจสอบเจ้าหน้าที่รัฐ</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+									<tr>
+										<td class="left">5.ความโปร่งใสในระบบงบประมาณและการจัดซื้อจัดจ้าง</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-1">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">1.หลักการและเหตุผล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-2">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">2.วัตถุประสงค์</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-3">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">3.ประโยชน์ที่คาดว่าจะได้รับ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-4">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">4.เป้าหมาย</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-5">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">5.กลุ่มเป้าหมาย</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th style="text-align: center; width: 5em; " data-field="$itemno">
+											<div class="th-inner ">No</div><div class="fht-cell"></div>
+										</th>
+										<th class="center">กลุ่มเป้าหมาย</th>
+										<th class="center" style="width: 12em">จำนวน</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2">
+											<button type="button" id="add-btn" class="btn btn-primary btn-round data-grid-add-btn mg-y-5 w-100 white"><i class="fa fa-plus"></i></button>
+										</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="right">1.</td>
+										<td class="left">ประชาชนทั่วไป</td>
+										<td class="right">100</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+									<tr>
+										<td class="right">1.</td>
+										<td class="left">เยาว์ชน</td>
+										<td class="right">150</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-6">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">6.พื้นที่ดำเนินการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-7">
+				<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">7.กิจกรรมที่จะดำเนินการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">ขั้นตอนการดำเนินงาน</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 1</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 2</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 3</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 4</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2">
+											<button type="button" id="add-btn" class="btn btn-primary btn-round data-grid-add-btn mg-y-5 w-100 white"><i class="fa fa-plus"></i></button>
+										</th>
+									</tr>
+									<tr>
+										<th class="center" style="width: 3em">ต.ค.</th>
+										<th class="center" style="width: 3em">พ.ย.</th>
+										<th class="center" style="width: 3em">ธ.ค.</th>
+										<th class="center" style="width: 3em">ม.ค.</th>
+										<th class="center" style="width: 3em">ก.พ.</th>
+										<th class="center" style="width: 3em">มี.ค.</th>
+										<th class="center" style="width: 3em">เม.ย.</th>
+										<th class="center" style="width: 3em">พ.ค.</th>
+										<th class="center" style="width: 3em">มิ.ย.</th>
+										<th class="center" style="width: 3em">ก.ค.</th>
+										<th class="center" style="width: 3em">ส.ค.</th>
+										<th class="center" style="width: 3em">ก.ย.</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">กิจกรรมที่ ๑ การระดมความคิดเห็นเพื่อ
+											กำหนดประเด็นจัดทำแผนงานและ
+											แนวทางในการขับเคลื่อนเพื่อป้องปราม
+											หรือเฝ้าระวังปัญหาการทุจริตในพื้นที่</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+									<tr>
+										<td class="left">กิจกรรมที่ ๒ การลงพื้นที่เพื่อเฝ้าระวังและ
+											ป้องปรามการทุจริตในพื้นที่ตามนโยบาย
+											ของสำนักงานป.ป.ช.หรือตามประเด็นที่
+											ได้รับแจ้งข้อมูลจากศูนย์ป้องปราม
+											การทุจริตแห่งชาติสำนักงานป.ป.ช.</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-8">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">8.ตัวชี้วัดของผลผลิต/ผลลัพธ์การดำเนินโครงการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">ผลผลิต(Output)/ผลลัพธ์(Outcome)</th>
+										<th class="center" style="width: 12em">ตัวชี้วัด</th>
+										<th class="center" style="width: 12em">ค่าเป้าหมาย</th>
+										<th class="center" style="width: 12em">ระยะเวลา</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2">
+											<button type="button" id="add-btn" class="btn btn-primary btn-round data-grid-add-btn mg-y-5 w-100 white"><i class="fa fa-plus"></i></button>
+										</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left"><b>ผลผลิต(Output)</b><br>
+											รายงานสรุปผลโครงการแก้ไขปัญหา
+											การทุจริตในพื้นที่
+										</td>
+										<td class="center">แนวทางการแก้ไขปัญหา
+											การทุจริตในพื้นที่</td>
+										<td class="center">รายงาน ๑ ฉบับ</td>
+										<td class="center">ไตรมาสที่ ๔</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+
+									<tr>
+										<td class="left"><b>ผลลัพธ์(Outcome)</b><br>
+											หน่วยงานที่เกี่ยวข้องนำแนวทางการแก้ไข
+											ปัญหาการทุจริตไปใช้ในการป้องกัน
+											การทุจริตในพื้นที่เพื่อทำให้คดีทุจริต
+											ในพื้นที่ลดลง
+										</td>
+										<td class="center">จำนวนหน่วยงานที่นำแนวทาง
+											การแก้ไขปัญหาการทุจริตในพื้นที่
+											ไปใช้ในการป้องกันการทุจริต
+											ในพื้นที่่</td>
+										<td class="center">อย่างน้อย ๑ หน่วยงาน</td>
+										<td class="center">ไตรมาสที่ ๔</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-9">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">9.งบประมาณ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_BUDGET" OFFSET="4" LAYOUT_WIDTH="6"/>
+					</ROW>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center">งบรายจ่าย</th>
+										<th class="center" style="width: 10em">ไตรมาส 1</th>
+										<th class="center" style="width: 10em">ไตรมาส 2</th>
+										<th class="center" style="width: 10em">ไตรมาส 3</th>
+										<th class="center" style="width: 10em">ไตรมาส 4</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate"></th>
+									</tr>
+								</thead>
+								<tfoot>
+									<tr>
+										<td class="left">รวมงบประมาณรายไตรมาส</td>
+										<td class="right" >0</td>
+										<td class="right" >0</td>
+										<td class="right" >0</td>
+										<td class="right" >0</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tfoot>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-10">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">10.ผู้รับผิดชอบโครงการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-13">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">11.ผู้ที่เกี่ยวข้องที่อาจจะได้รับผลกระทบ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_INVOLVERS" LAYOUT_WIDTH="10" OFFSET="4"/>
+						<FIELD NAME="PROJ_INVOLVISSE" LAYOUT_WIDTH="10"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-NOTE-11">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">12.ลักษณะโครงการ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_PHASE" OFFSET="4" LAYOUT_WIDTH="16"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-12">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">13.การติดตามประเมินผล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-ATTATCH-FILES">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{14.||project.constructor_attatchment}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							if ($PageCtx.$action === "add") {
+								let projYear = $$("PROJ_YEAR").val();
+								let projType = "PLCY";
+								let btmCode = "01";
+								let stmCode = $user.deptCode;
+								let acmCode = $$("ACM_CODE").val();
+								let projId = `${projYear}x${projType}x${stmCode}x${acmCode}`;
+
+								$$("PROJ_ID").val(projId);
+								$$("PROJ_TYPE").val(projType);
+								$$("STM_CODE").val(stmCode);
+								$$("BTM_CODE").val(btmCode);
+							}
+							Object.assign(data, form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+			</SCRIPT>
+			<BUTTONS>
+				<BUTTON NAME="btnButton1" CAPTION="ส่งผู้อำนวยการสำนักพิจารณา" CLASS="btn btn-warning" SECTION="RIGHT"/>
+			</BUTTONS>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0401030-budget.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0401030-budget.frml
new file mode 100644
index 0000000..ec9b393
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0401030-budget.frml
@@ -0,0 +1,316 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-proj-budget.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-BROWSER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>V_ACTIVITY_TREE</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT :PROJ_ID PROJ_ID
+					, ACTT.ACM_CODE
+					, ACTT.ACM_NAME
+					, ACTT.ACM_SEQ
+					, ACTT.NODE_LEVEL
+					, ACTT.MAIN_NODE
+					, ACTT.ACM_UNIT
+					, ACTT.ACM_START_YEAR
+					, ACTT.ACM_END_YEAR
+					, ACTT.NODE_TYPE
+					, PJBG.PBDG_TOTAL PBDG_TOTAL
+					, PJBG.PBDG_COUNT  PBDG_COUNT
+				</SELECT>
+				<FROM>
+					FROM BGT.V_ACTIVITY_TREE ACTT
+						 INNER JOIN ( SELECT DISTINCT ACM.ACM_CODE
+										FROM BUD.ACTIVITY_M ACM
+											 INNER JOIN BUD.ACTIVITY_CTRL_H ACH ON ACM.ACM_CODE = ACH.ACH_CODE
+										START WITH ACM.ACM_CODE IN (SELECT ACM_CODE FROM PROJECT_BUDGETS PJBD WHERE PROJ_ID = :PROJ_ID)
+									  CONNECT BY PRIOR ACH.ACH_CTRL_CODE = ACH.ACH_CODE) FLTR ON FLTR.ACM_CODE = ACTT.ACM_CODE
+						 LEFT OUTER JOIN PROJECT_BUDGETS PJBG ON PJBG.PROJ_ID=:PROJ_ID AND PJBG.ACM_CODE = ACTT.ACM_CODE
+				</FROM>
+				<ORDER>ORDER BY ACTT.ACM_SEQ</ORDER>
+			</SQL>
+		</DATASET>
+
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, PBDG_ID
+					, ACM_CODE
+					, PBDG_TOTAL
+					, PBDG_COUNT
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-BROWSER">
+			<HEADER NAVI="Y" ADD="Y" EDIT="Y" DELETE="Y"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="ACM_CODE" LABEL="project.acm_code" ALIGN="left" WIDTH="15em">
+					<DATA-FORMATTER><![CDATA[
+						(value,row,idx)=>{
+							return $(`<div class="col-24 row"><div class="col offset-${row.node_level}">${value}</div></div>`);
+						}
+						]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="ACM_NAME" LABEL="project.acm_name" ALIGN="left">
+					<DATA-FORMATTER><![CDATA[
+						(value,row,idx)=>{
+							return $(`<div class="col-24 row"><div class="col offset-${row.node_level}">${value}</div></div>`);
+						}
+						]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="PBDG_TOTAL" LABEL="project.bgt_amount" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return (row["node_type"]==="D")? value : "";}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<COMMAND-BUTTONS>
+					<BUTTONS-FILTER>
+						<EDIT><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></EDIT>
+						<DELETE><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></DELETE>
+						<VIEW><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></VIEW>
+					</BUTTONS-FILTER>
+				</COMMAND-BUTTONS>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="Y" ALLOW-NO-FILTER="Y" >
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" DATATYPE="TEXT" ALIGN="center"/>
+					<FIELD NAME="PROJ_NAME" CAPTION="project.name" INPUTTYPE="TEXT" DATATYPE="TEXT" ALIGN="left"/>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"></FIELD>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" CAPT_WIDTH="10" VAL_WIDTH="6" LAYOUT_WIDTH="12"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_NAME" CAPT_WIDTH="5" VAL_WIDTH="18" LAYOUT_WIDTH="24"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+			<FOOTER SHOW="Y"/>
+			<SCRIPT>
+				<INITIALIZE>
+					<![CDATA[
+					{
+						console.log("init activity grid");
+
+						const fieldFormat = (value) => {
+							return formatNumber(value, 0);
+						}
+
+						$PageCtx.sum_of = {};
+						const summary = (field, data) => {
+							console.log("budget summary process.")
+							let total = 0;
+							for (let id=0; id < data.length; id++) {
+								let row = data[id];
+								if (row["node_type"] === "D") {
+									total += (+row[field]) || 0;
+								}
+							}
+
+							$PageCtx.sum_of[field] = total;
+
+							if ($PageCtx.$dataGrid.load && !$PageCtx.$dataGrid.reload) {
+								$PageCtx.$dataGrid.reload = true;
+								for (let id=data.length-1; id>=0; id--) {
+									let row = data[id];
+									if (row["node_type"] === "C") {
+										let grpTotal = 0;
+										let mainNode = row["acm_code"];
+										let nodes = [];
+										nodes.push($$("main_node="+mainNode,data));
+										for (let node of nodes.flat()) {
+											grpTotal += +node[field];
+										}
+										data[id][field] = grpTotal;
+									}
+								}
+								$PageCtx.$dataGrid.load(data);
+								$PageCtx.$dataGrid.reload = false;
+							}
+
+							return formatNumber(total, 0);
+						}
+
+						const $ctx = $PageCtx;
+						const gridFields = [$$("field^pbdg_", $ctx.gridColumn.flat())].flat();
+						for (let field of gridFields) {
+							field.formatter = fieldFormat;
+							field.footerFormatter = function (data) {
+								return summary(this.field, data);
+							}
+						}
+
+						$ctx.rowStyle = function (row, index) {
+							if (row["node_type"] === "C") {
+								return {
+									classes : `group-level-${row["node_level"]}`
+								};
+							}
+							return {}; // Default style for other rows
+						}
+					}
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_BROWSE>
+
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PROJ_NAME" CAPTION="project.name" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="VACM_CODE" CAPTION="project.acm_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.acm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-ACTIVITY-02-BDGT" VALUE-FIELD="ACM_CODE" TEXT-FIELD="ACM_NAME" PARAMETERS="DV_YEAR=PROJ_YEAR,STM_CODE=STM_CODE">
+						<UPDATE-FIELDS>
+							<FIELD SRC="ACM_CODE" TARGET="VACM_CODE"></FIELD>
+							<FIELD SRC="ACM_UNIT" TARGET="TARGET_UNIT"></FIELD>
+							<FIELD SRC="ACM_UNIT" TARGET="PWMT_UNIT"></FIELD>
+							<FIELD SRC="PJM_CODE" TARGET="PJM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								if (data.node_type === "C") {
+									data.disabled = true;
+								}
+								return $(`<div><label>[${data.acm_code}]</label> : <label>${data.acm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+				<FIELD NAME="GRID-BUDGET" INPUTTYPE="DATA-GRID" GRID-ID="GRID-WORK-BUDGET" ROWS="5" CAPTION="project.budget"/>
+
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_NAME" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.budget}</h4>]]></HEADER>
+					<ROW>
+						<FIELD NAME="GRID-BUDGET" LAYOUT_WIDTH="24" OFFSET=""/>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							let acmCount = $$("^QT_TOTAL_0").sum();
+							$$("PBDG_COUNT").val(acmCount);
+							let gridCtx = ($PageCtx.widgets["GRID-BUDGET"]||{})["$GridCtx"];
+							if (gridCtx) {
+								 let bdgTotal = gridCtx.sum_of["pbgi_total"];
+								$$("PBDG_TOTAL").val(bdgTotal);
+							}
+							Object.assign(data,form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+				<INITIALIZE>
+					<![CDATA[
+					     const quoterSum = ()=>{
+						     for (let sect=1; sect <=2; sect++) {
+							     let summary = 0;
+							     for (let qt = 1; qt <= 4; qt++) {
+								     summary += $$(`PTGT_QT_0${qt}0${sect}`).number();
+							     }
+							     $$(`QT_TOTAL_0${sect}`).val(formatNumber(summary));
+						     }
+					     }
+						 $$("^PTGT_QT_").on("change",quoterSum);
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0401030.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0401030.frml
new file mode 100644
index 0000000..82e7fc0
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0401030.frml
@@ -0,0 +1,680 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-stratigy.frml"></INCLUDE>
+		<INCLUDE FILE="#grids/grid-stratigy-item.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT PROJ.PROJ_ID
+					, PROJ.PROJ_TYPE
+					, PROJ.PROJ_YEAR
+					, PROJ.PJM_CODE
+					, BUD.GET_PROJECT(PROJ.PJM_CODE) PROJ_NAME
+					, PROJ.STM_CODE
+					, PROJ.BTM_CODE
+					, PROJ.ACM_CODE
+					, BUD.GET_ACTIVITY(PROJ.ACM_CODE) ACM_NAME
+					, PROJ.PLAN_TYPE
+					, PROJ.PROJ_DURATION
+					, PROJ.PROJ_START_YEAR
+					, PROJ.PROJ_END_YEAR
+					, PROJ.PROJ_FOR_STAFF
+
+					, PROJ.PROJ_CATE
+					, PROJ.PROJ_KIND
+					, PROJ.PROJ_FROM_YEAR
+
+				</SELECT>
+				<FROM>FROM PROJECTS PROJ</FROM>
+				<FILTER>WHERE PROJ_TYPE = 'INYR' AND STM_CODE=:STM_CODE</FILTER>
+				<ORDER>ORDER BY PROJ_YEAR DESC, PROJ_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="VARCHAR" WIDTH="50" LABEL="plcp.id"/>
+				<FIELD NAME="PROJ_TYPE" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.type"/>
+				<FIELD NAME="PROJ_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.year"/>
+				<FIELD NAME="PJM_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="plcp.pjm_code"/>
+				<FIELD NAME="STM_CODE" TYPE="VARCHAR" WIDTH="10" LABEL="plcp.stm_code"/>
+				<FIELD NAME="BTM_CODE" TYPE="VARCHAR" WIDTH="10" LABEL="plcp.btm_code"/>
+				<FIELD NAME="ACM_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="plcp.acm_code"/>
+				<FIELD NAME="ACM_NAME" TYPE="VARCHAR" WIDTH="200" LABEL="plcp.acm_name"/>
+				<FIELD NAME="PLAN_TYPE" TYPE="VARCHAR" WIDTH="15" LABEL="plcp.plan_type"/>
+				<FIELD NAME="PROJ_DURATION" TYPE="NUMBER" WIDTH="10" LABEL="plcp.duration"/>
+				<FIELD NAME="PROJ_START_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.start_year"/>
+				<FIELD NAME="PROJ_END_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.end_year"/>
+				<FIELD NAME="PROJ_FOR_STAFF" TYPE="NUMBER" WIDTH="10" LABEL="plcp.for_staff"/>
+
+				<FIELD NAME="PROJ_CATE" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.catagory"/>
+				<FIELD NAME="PROJ_KIND" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.kine"/>
+				<FIELD NAME="PROJ_FROM_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.from_year"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-MASTER">
+			<HEADER NAVI="Y" ADD="Y" EDIT="Y" DELETE="Y"/>
+			<PAGESIZE>15</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="PJM_CODE" LABEL="plcp.pjm_code" ALIGN="left" WIDTH="10em"/>
+				<FIELD NAME="PROJ_NAME" LABEL="plcp.pjm_name" ALIGN="left"/>
+				<FIELD NAME="ACM_NAME" LABEL="plcp.acm_name" ALIGN="left"/>
+				<FIELD NAME="PROJ_TOTAL" LABEL="plcp.bgt_amount" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[(value, row, idx) => {return formatNumber(value);}]]>
+					</DATA-FORMATTER>
+					<FOOTER-FORMATTER>
+						<![CDATA[(data) => {return formatNumber($$(data).sum("proj_total"));}]]>
+					</FOOTER-FORMATTER>
+				</FIELD>
+				<COMMAND-BUTTONS NEWLINE="Y">
+					<BUTTON NAME="btnBudget" CAPTION="budget" CLASS="btn btn-outline-success w-75 with-caption" ICON-CLASS="bi bi-file-ruled">
+						<EVENT ON="click"><![CDATA[
+							({ev, row}) => {
+								ev.preventDefault();
+								let targetUrl = url("/bdgt04/bgt0401030-budget?proj_id=" + row["proj_id"]);
+								row.page_title = $("h4.page-title").html();
+								$PageCtx.saveSessionData("budget", row);
+								$PageCtx.saveStorageData("budget#search", {PROJ_ID: row["proj_id"]});
+								$WebNavi.goto(targetUrl);
+							}
+							]]></EVENT>
+					</BUTTON>
+				</COMMAND-BUTTONS>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="Y" ALLOW-NO-FILTER="N">
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="plcp.year" INPUTTYPE="COMBOBOX" SEARCH-ORIGIN="PROJ_YEAR=${VALUE}">
+						<LIST-OPTION TABLE="VL_YEAR" TEXT="#DV_YEAR" VALUE="DV_YEAR" ORDER="DV_YEAR" FIRSTLIST="@{NONE}"/>
+					</FIELD>
+					<FIELD NAME="ACM_NAME" CAPTION="plcp.name" INPUTTYPE="TEXT" SEARCH-ORIGIN="ACM_NAME='%${VALUE}%'"/>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="12"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="ACM_NAME" CAPT_WIDTH="6" VAL_WIDTH="14" LAYOUT_WIDTH="20"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+			<FOOTER SHOW="Y"/>
+		</FORM_BROWSE>
+
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="STM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="BTM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PLAN_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_DURATION" INPUTTYPE="HIDDEN"/>
+
+				<FIELD NAME="PROJ_YEAR" CAPTION="plcp.year" INPUTTYPE="TEXT" READONLY="Y" DATATYPE="TEXT"/>
+				<FIELD NAME="VPJM_CODE" CAPTION="plcp.pjm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PJM_CODE" CAPTION="plcp.pjm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-PROJECT-02" VALUE-FIELD="PJM_CODE" TEXT-FIELD="PJM_NAME">
+						<UPDATE-FIELDS>
+							<FIELD SRC="PJM_CODE" TARGET="VPJM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								// data.disabled = data["node_type"] === "C";
+								return $(`<div class="d-flex flex-row gap-1 dyn-list-item"><label class="flex-column text-nowrap col-3">[${data.pjm_code}]</label> : <label>${data.pjm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+
+				<FIELD NAME="VACM_CODE" CAPTION="plcp.acm_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_CODE" CAPTION="plcp.acm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-ACTIVITY-02" VALUE-FIELD="ACM_CODE" TEXT-FIELD="ACM_NAME" PARAMETERS="DV_YEAR=PROJ_YEAR,STM_CODE=STM_CODE">
+						<UPDATE-FIELDS>
+							<FIELD SRC="ACM_CODE" TARGET="VACM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								// data.disabled = data["node_type"] === "C";
+								return $(`<div class="d-flex flex-row gap-1 dyn-list-item"><label class="flex-column text-nowrap col-3">[${data.acm_code}]</label> : <label>${data.acm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+
+				<FIELD NAME="STM_CODE" CAPTION="plcp.stm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="BTM_CODE" CAPTION="plcp.btm_code" INPUTTYPE="TEXT"/>
+				<FIELD NAME="PLAN_TYPE" CAPTION="plcp.plan_type" INPUTTYPE="TEXT"/>
+				<FIELD NAME="PROJ_DURATION" CAPTION="plcp.duration" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_START_YEAR" CAPTION="plcp.start_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_END_YEAR" CAPTION="plcp.end_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_FOR_STAFF" CAPTION="plcp.for_staff" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+
+				<FIELD NAME="PROJ_CATE" CAPTION="plcp.catagory" INPUTTYPE="RADIOGROUP" DATATYPE="TEXT" CLASS-NAME="flex-option">
+					<LIST-OPTION TABLE="BGT.REFER_CODE" TEXT="#RFC_DESC" VALUE="RFC_CODE" FILTER="RFG_GRP='PROJ-CATE'" ORDER="RFC_CODE"/>
+				</FIELD>
+
+				<FIELD NAME="PROJ_KIND" CAPTION="plcp.kind" INPUTTYPE="SWITCH" DATATYPE="TEXT"
+					   VALUE="NEW" UNCHECK_VALUE="OLD" SUFFIX="#plcp.new|plcp.continue"></FIELD>
+
+
+				<FIELD NAME="PROJ_PHASE" CAPTION="#--" SHOWCAPT="Y" INPUTTYPE="CHECKBOXGROUP" DATATYPE="TEXT">
+					<LIST-OPTION TABLE="BGT.REFER_CODE" TEXT="#RFC_DESC" VALUE="RFC_CODE" FILTER="RFG_GRP='PROJ-PHASE'" ORDER="RFC_CODE" COLUMN="4"/>
+				</FIELD>
+				<FIELD NAME="PROJ_BUDGET" CAPTION="plcp.budget" INPUTTYPE="TEXT" DATATYPE="NUMBER" SUFFIX="บาท"/>
+
+
+				<FIELD NAME="PROJ_FROM_YEAR" CAPTION="plcp.from_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+				<FIELD NAME="GRID-STRATEGY" INPUTTYPE="DATA-GRID" GRID-ID="GRID-PROJECT-STTGYS" CAPTION="pstg.header"/>
+
+				<FIELD NAME="PROJ_INVOLVERS" INPUTTYPE="TEXTAREA" CAPTION="plcp.involvers" ROWS="4"/>
+				<FIELD NAME="PROJ_INVOLVISSE" INPUTTYPE="TEXTAREA" CAPTION="plcp.involv_issue" ROWS="4"/>
+
+				<SECTION ID="SEC-ATTATCH-FILE">
+					<FIELD NAME="FILE_BOX_01" CAPTION="file.upload 1" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_02" CAPTION="file.upload 2" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_03" CAPTION="file.upload 3" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+				</SECTION>
+
+			</FIELDS>
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VPJM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PJM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+				</SECTION>
+				<SECTION>
+					<HEADER CLASS="form-section-header col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{pstg.header}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="GRID-STRATEGY" LAYOUT_WIDTH="20" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+				<SECTION>
+					<ROW>
+						<FIELD NAME="PROJ_CATE" OFFSET="4" LAYOUT_WIDTH="20"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_KIND" OFFSET="4" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="PROJ_FROM_YEAR" LAYOUT_WIDTH="6"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-STRATEGY">
+					<HEADER CLASS="form-section-header col-24 mg-t-30 border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">ความเชื่อมโยงของโครงการกับประเด็นการยกระดับคะแนนดัชนีการรับรู้การทุจริต(CPI)และแหล่งข้อมูล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-4">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center">ประเด็น/แหล่งข้อมูล</th>
+										<th class="center" style="width: 5em">BF(TI)<br>(1)</th>
+										<th class="center" style="width: 5em">EIU<br>(2)</th>
+										<th class="center" style="width: 5em">GI<br>(3)</th>
+										<th class="center" style="width: 5em">IMD<br>(4)</th>
+										<th class="center" style="width: 5em">PERC<br>(5)</th>
+										<th class="center" style="width: 5em">PRS<br>(6)</th>
+										<th class="center" style="width: 5em">WEF<br>(7)</th>
+										<th class="center" style="width: 5em">WJP<br>(8)</th>
+										<th class="center" style="width: 5em">VDEM<br>(9)</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">1.สินบน</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+									</tr>
+									<tr>
+										<td class="left">2.การขัดกันแห่งผลประโยชน์</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+									</tr>
+									<tr>
+										<td class="left">3.นโยบายของรัฐบาลในการแก้ไขปัญหาการทุจริต</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+									<tr>
+										<td class="left">4.การตรวจสอบเจ้าหน้าที่รัฐ</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+									<tr>
+										<td class="left">5.ความโปร่งใสในระบบงบประมาณและการจัดซื้อจัดจ้าง</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-1">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">1.หลักการและเหตุผล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-2">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">2.วัตถุประสงค์</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-3">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">3.ประโยชน์ที่คาดว่าจะได้รับ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-4">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">4.เป้าหมาย</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-5">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">5.กลุ่มเป้าหมาย</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-6">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">6.พื้นที่ดำเนินการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-7">
+				<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">7.กิจกรรมที่จะดำเนินการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">ขั้นตอนการดำเนินงาน</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 1</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 2</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 3</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 4</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2">
+											<button type="button" id="add-btn" class="btn btn-primary btn-round data-grid-add-btn mg-y-5 w-100 white"><i class="fa fa-plus"></i></button>
+										</th>
+									</tr>
+									<tr>
+										<th class="center" style="width: 3em">ต.ค.</th>
+										<th class="center" style="width: 3em">พ.ย.</th>
+										<th class="center" style="width: 3em">ธ.ค.</th>
+										<th class="center" style="width: 3em">ม.ค.</th>
+										<th class="center" style="width: 3em">ก.พ.</th>
+										<th class="center" style="width: 3em">มี.ค.</th>
+										<th class="center" style="width: 3em">เม.ย.</th>
+										<th class="center" style="width: 3em">พ.ค.</th>
+										<th class="center" style="width: 3em">มิ.ย.</th>
+										<th class="center" style="width: 3em">ก.ค.</th>
+										<th class="center" style="width: 3em">ส.ค.</th>
+										<th class="center" style="width: 3em">ก.ย.</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">กิจกรรมที่ ๑ การระดมความคิดเห็นเพื่อ
+											กำหนดประเด็นจัดทำแผนงานและ
+											แนวทางในการขับเคลื่อนเพื่อป้องปราม
+											หรือเฝ้าระวังปัญหาการทุจริตในพื้นที่</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+									<tr>
+										<td class="left">กิจกรรมที่ ๒ การลงพื้นที่เพื่อเฝ้าระวังและ
+											ป้องปรามการทุจริตในพื้นที่ตามนโยบาย
+											ของสำนักงานป.ป.ช.หรือตามประเด็นที่
+											ได้รับแจ้งข้อมูลจากศูนย์ป้องปราม
+											การทุจริตแห่งชาติสำนักงานป.ป.ช.</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-8">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">8.ตัวชี้วัดของผลผลิต/ผลลัพธ์การดำเนินโครงการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">ผลผลิต(Output)/ผลลัพธ์(Outcome)</th>
+										<th class="center" style="width: 12em">ตัวชี้วัด</th>
+										<th class="center" style="width: 12em">ค่าเป้าหมาย</th>
+										<th class="center" style="width: 12em">ระยะเวลา</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2">
+											<button type="button" id="add-btn" class="btn btn-primary btn-round data-grid-add-btn mg-y-5 w-100 white"><i class="fa fa-plus"></i></button>
+										</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left"><b>ผลผลิต(Output)</b><br>
+											รายงานสรุปผลโครงการแก้ไขปัญหา
+											การทุจริตในพื้นที่
+										</td>
+										<td class="center">แนวทางการแก้ไขปัญหา
+											การทุจริตในพื้นที่</td>
+										<td class="center">รายงาน ๑ ฉบับ</td>
+										<td class="center">ไตรมาสที่ ๔</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+
+									<tr>
+										<td class="left"><b>ผลลัพธ์(Outcome)</b><br>
+											หน่วยงานที่เกี่ยวข้องนำแนวทางการแก้ไข
+											ปัญหาการทุจริตไปใช้ในการป้องกัน
+											การทุจริตในพื้นที่เพื่อทำให้คดีทุจริต
+											ในพื้นที่ลดลง
+										</td>
+										<td class="center">จำนวนหน่วยงานที่นำแนวทาง
+											การแก้ไขปัญหาการทุจริตในพื้นที่
+											ไปใช้ในการป้องกันการทุจริต
+											ในพื้นที่่</td>
+										<td class="center">อย่างน้อย ๑ หน่วยงาน</td>
+										<td class="center">ไตรมาสที่ ๔</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-9">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">9.งบประมาณ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_BUDGET" OFFSET="4" LAYOUT_WIDTH="6"/>
+					</ROW>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">งบรายจ่าย</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 1</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 2</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 3</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 4</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2"></th>
+									</tr>
+									<tr>
+										<th class="center" style="width: 3em">ต.ค.</th>
+										<th class="center" style="width: 3em">พ.ย.</th>
+										<th class="center" style="width: 3em">ธ.ค.</th>
+										<th class="center" style="width: 3em">ม.ค.</th>
+										<th class="center" style="width: 3em">ก.พ.</th>
+										<th class="center" style="width: 3em">มี.ค.</th>
+										<th class="center" style="width: 3em">เม.ย.</th>
+										<th class="center" style="width: 3em">พ.ค.</th>
+										<th class="center" style="width: 3em">มิ.ย.</th>
+										<th class="center" style="width: 3em">ก.ค.</th>
+										<th class="center" style="width: 3em">ส.ค.</th>
+										<th class="center" style="width: 3em">ก.ย.</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">งบบริหารจัดการรายเดือน</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+								<tfoot>
+									<tr>
+										<td class="left">รวมงบประมาณรายไตรมาส</td>
+										<td class="right" colspan="3">0</td>
+										<td class="right" colspan="3">0</td>
+										<td class="right" colspan="3">0</td>
+										<td class="right" colspan="3">0</td>
+										<td class="operate-header" style="text-align: center; width: 90px;"></td>
+									</tr>
+								</tfoot>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-10">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">10.ผู้รับผิดชอบโครงการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-13">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">11.ผู้ที่เกี่ยวข้องที่อาจจะได้รับผลกระทบ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_INVOLVERS" LAYOUT_WIDTH="10" OFFSET="4"/>
+						<FIELD NAME="PROJ_INVOLVISSE" LAYOUT_WIDTH="10"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-NOTE-11">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">12.ลักษณะโครงการ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_PHASE" OFFSET="4" LAYOUT_WIDTH="16"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-12">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">13.การติดตามประเมินผล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-FILE-UPLOAD">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{14.||project.constructor_attatchment}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							if ($PageCtx.$action === "add") {
+								let projYear = $$("PROJ_YEAR").val();
+								let projType = "INYR";
+								let btmCode = "02";
+								let stmCode = $user.deptCode;
+								let acmCode = $$("ACM_CODE").val();
+								let projId = `${projYear}x${projType}x${stmCode}x${acmCode}`;
+
+								$$("PROJ_ID").val(projId);
+								$$("PROJ_TYPE").val(projType);
+								$$("STM_CODE").val(stmCode);
+								$$("BTM_CODE").val(btmCode);
+							}
+							Object.assign(data, form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+			</SCRIPT>
+			<BUTTONS>
+				<BUTTON NAME="btnButton1" CAPTION="ส่งผู้อำนวยการสำนักพิจารณา" CLASS="btn btn-warning" SECTION="RIGHT"/>
+			</BUTTONS>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010.frml
new file mode 100644
index 0000000..7d93b35
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010.frml
@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ.PROJ_ID
+					, PROJ.PROJ_TYPE
+					, PROJ.PROJ_YEAR
+					, PROJ.STM_CODE
+					, PROJ.FLOW_TYPE
+					, PROJ.FLOW_TYPE_DESC
+					, PROJ.PJM_CODE, PROJ.PROJ_NAME
+					, PROJ.ACM_CODE, PROJ.ACM_NAME
+					, PROJ.PROJ_SEQ
+					, (SELECT RFC_DESC FROM REFER_CODE RFC WHERE RFC.RFG_GRP='FLOW-STATE' AND RFC.RFC_CODE='REVISE') FLOW_STATE
+				</SELECT>
+				<FROM>
+					FROM (SELECT PROJ.PROJ_ID
+							, PROJ.PROJ_TYPE
+							, TO_CHAR(PROJ.PROJ_YEAR, 'FM0000') PROJ_YEAR
+							, PROJ.STM_CODE
+							, FTYP.RFC_CODE FLOW_TYPE
+							, FTYP.RFC_DESC FLOW_TYPE_DESC
+							, PROJ.PJM_CODE, BUD.GET_PROJECT(PROJ.PJM_CODE) PROJ_NAME
+							, PROJ.ACM_CODE, BUD.GET_ACTIVITY(PROJ.ACM_CODE) ACM_NAME
+							, FTYP.RFC_ORDER PROJ_SEQ
+							FROM REFER_CODE FTYP
+								INNER JOIN REFER_CODE PTYPE ON PTYPE.RFG_GRP = 'PROJ-TYPE' AND PTYPE.RFC_FLAG = FTYP.RFC_CODE
+								INNER JOIN PROJECTS PROJ ON PROJ.PROJ_TYPE = PTYPE.RFC_CODE
+							WHERE FTYP.RFG_GRP = 'FLOW-TYPE' AND FTYP.RFC_CODE != 'GENERAL' AND PROJ.PROJ_YEAR = :PROJ_YEAR AND PROJ.STM_CODE = :STM_CODE
+							UNION ALL
+							SELECT :PROJ_YEAR || 'xGENERALx' || :STM_CODE PROJ_ID
+								, 'GENERAL' PROJ_TYPE
+								, :PROJ_YEAR PROJ_YEAR
+								, :STM_CODE STM_CODE
+								, FTYP.RFC_CODE FLOW_TYPE
+								, FTYP.RFC_DESC FLOW_TYPE_DESC
+								, 'GENERAL' PJM_CODE, FTYP.RFC_DESC PROJ_NAME
+								, 'GENERAL' ACM_CODE, FTYP.RFC_DESC ACM_NAME
+								, FTYP.RFC_ORDER PROJ_SEQ
+							FROM REFER_CODE FTYP
+								WHERE FTYP.RFC_CODE = 'GENERAL'
+							) PROJ
+				</FROM>
+				<ORDER>ORDER BY PROJ_SEQ, PROJ_ID</ORDER>
+			</SQL>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-MASTER">
+			<HEADER NAVI="N" EDIT="N" ADD="N" DELETE="N" VIEW="N"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="FLOW_TYPE_DESC" LABEL="props.type" ALIGN="left" WIDTH="20em">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 text-nowrap"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="PROJ_NAME" LABEL="project.const_name" ALIGN="left">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 row"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="FLOW_STATE" LABEL="props.state" ALIGN="center" WIDTH="10em"/>
+				<COMMAND-BUTTONS>
+					<BUTTON NAME="btnEditor" CLASS="btn btn-warning btn-editor" ICON-CLASS="fa fa-edit white">
+						<EVENT ON="click"><![CDATA[
+							({ev,row})=>{
+								console.log(row);
+								row.pageTitle = $("h4.page-title").html();
+								if (row.proj_type === "GENERAL") {
+									$PageCtx.saveSessionData("general", row);
+									$PageCtx.saveStorageData("general#search", {proj_year: row.proj_year});
+									$WebNavi.goto("/bdgt04/bgt0403010-general");
+								} else {
+									$PageCtx.saveSessionData("project", row);
+									let proj = {proj_id : row.proj_id,acm_code : row.acm_code, type: row.proj_type.toLowerCase()};
+									let data = base64(JSON.stringify(proj)) ;
+									let editUrl = `/bdgt04/bgt0403010-project?edit&data=${data}`;
+									$WebNavi.goto(editUrl);
+								}
+							}
+						]]></EVENT>
+					</BUTTON>
+					<BUTTON NAME="btnViewer" CLASS="btn btn-primary btn-viewer" ICON-CLASS="fa fa-file-alt white">
+						<EVENT ON="click"><![CDATA[({ev,row})=>{ console.log(row);}]]></EVENT>
+					</BUTTON>
+				</COMMAND-BUTTONS>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="Y" ALLOW-NO-FILTER="Y">
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="COMBOBOX" SEARCH-ORIGIN="PROJ_YEAR=${VALUE}">
+						<LIST-OPTION TABLE="VL_YEAR" TEXT="#DV_YEAR" VALUE="DV_YEAR" ORDER="DV_YEAR" FIRSTLIST="@{NONE}"/>
+					</FIELD>
+					<FIELD NAME="VERSION" CAPTION="props.versions" INPUTTYPE="COMBOBOX">
+						<LIST-OPTION TABLE="REFER_CODE" TEXT="#RFC_DESC" VALUE="RFC_CODE" ORDER="RFC_ORDER" FILTER="RFG_GRP='PROPS-VERS'" FIRSTLIST="@{NONE}"/>
+					</FIELD>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" VAL_WIDTH="6" CAPT_WIDTH="12" LAYOUT_WIDTH="12"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+		</FORM_BROWSE>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/construct.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/construct.frml
new file mode 100644
index 0000000..6106315
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/construct.frml
@@ -0,0 +1,324 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-construct-budget.frml"></INCLUDE>
+	</INCLUDES>
+
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, PROJ_TYPE
+					, PROJ_YEAR
+					, PJM_CODE
+					, STM_CODE
+					, BTM_CODE
+					, ACM_CODE
+					, BUD.GET_ACTIVITY(ACM_CODE) ACM_NAME
+					, PLAN_TYPE
+					, PROJ_DURATION
+					, PROJ_INST_COUNT
+					, PROJ_START_YEAR
+					, PROJ_END_YEAR
+					, PROJ_FOR_STAFF
+					, PROJ_FROM_YEAR
+					, CREATE_BY
+					, CREATE_TIME
+					, UPDATE_BY
+					, UPDATE_TIME
+				</SELECT>
+				<FROM>FROM PROJECTS</FROM>
+				<FILTER>WHERE STM_CODE = :STM_CODE AND PROJ_TYPE='CNST'</FILTER>
+				<ORDER>ORDER BY PROJ_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PROJ_TYPE" TYPE="TEXT" LABEL="ประเภทโครงการ" WIDTH="25"/>
+				<FIELD NAME="PROJ_YEAR" TYPE="NUMBER" LABEL="ปีงบประมาณ" WIDTH="15"/>
+				<FIELD NAME="PJM_CODE" TYPE="TEXT" LABEL="รหัสโครงการ (BUD)" WIDTH="20"/>
+				<FIELD NAME="STM_CODE" TYPE="TEXT" LABEL="รหัสหน่วยงาน" WIDTH="10"/>
+				<FIELD NAME="BTM_CODE" TYPE="TEXT" LABEL="รหัสประเภทงบประมาณ" WIDTH="10"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20"/>
+				<FIELD NAME="PLAN_TYPE" TYPE="TEXT" LABEL="ประเภทแผน" WIDTH="15"/>
+				<FIELD NAME="PROJ_DURATION" TYPE="NUMBER" LABEL="ระยะเวลาดำเนินการ (วัน)" WIDTH="15"/>
+				<FIELD NAME="PROJ_INST_COUNT" TYPE="NUMBER" LABEL="ระยะเวลาดำเนินการ (วัน)" WIDTH="15"/>
+				<FIELD NAME="PROJ_START_YEAR" TYPE="NUMBER" LABEL="ปีที่เริ่มโครงการ (ก่อสร้าง)" WIDTH="15"/>
+				<FIELD NAME="PROJ_END_YEAR" TYPE="NUMBER" LABEL="ปีที่สิ้นสุดโครงการ (ก่อสร้าง)" WIDTH="15"/>
+				<FIELD NAME="PROJ_FOR_STAFF" TYPE="NUMBER" LABEL="จำนวนบุคลากรที่รองรับ" WIDTH="15"/>
+				<FIELD NAME="PROJ_FROM_YEAR" TYPE="NUMBER" LABEL="ต่อเนื่องจากปี" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-CONST">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_CONST_INFO</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT PROJ_ID
+					, ACM_CODE
+					, PCTI_ADDRESS
+					, PCTI_TUMBON
+					, PCTI_AMPUR
+					, PCTI_PROVINCE
+					, PCTI_ADDR_NOTE
+					, PCTI_AREA
+					, PCTI_EMP_COUNT
+					, PCTI_CHK_LOCATION
+					, PCTI_CHK_DOCUMENT
+					, PCTI_REMARK
+					, CREATE_BY
+					, JDTOE(CREATE_TIME) CREATE_TIME, CREATE_TIME DT_CREATE_TIME
+					, UPDATE_BY
+					, JDTOE(UPDATE_TIME) UPDATE_TIME, UPDATE_TIME DT_UPDATE_TIME
+				</SELECT>
+				<FROM>FROM PROJECT_CONST_INFO</FROM>
+				<ORDER>ORDER BY PROJ_ID, ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="project.id" WIDTH="50"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="project.acm_code" WIDTH="20"/>
+				<FIELD NAME="PCTI_ADDRESS" TYPE="TEXT" LABEL="pcti.address" WIDTH="200"/>
+				<FIELD NAME="PCTI_TUMBON" TYPE="TEXT" LABEL="pcti.tumbon" WIDTH="200"/>
+				<FIELD NAME="PCTI_AMPUR" TYPE="TEXT" LABEL="pcti.ampur" WIDTH="200"/>
+				<FIELD NAME="PCTI_PROVINCE" TYPE="TEXT" LABEL="pcti.province" WIDTH="200"/>
+				<FIELD NAME="PCTI_ADDR_NOTE" TYPE="TEXT" LABEL="pcti.addr_note" WIDTH="1000"/>
+				<FIELD NAME="PCTI_AREA" TYPE="NUMBER" LABEL="pcti.area" WIDTH="15"/>
+				<FIELD NAME="PCTI_EMP_COUNT" TYPE="NUMBER" LABEL="pcti.emp_count" WIDTH="15"/>
+				<FIELD NAME="PCTI_CHK_LOCATION" TYPE="TEXT" LABEL="pcti.chk_location" WIDTH="500"/>
+				<FIELD NAME="PCTI_CHK_DOCUMENT" TYPE="TEXT" LABEL="pcti.chk_document" WIDTH="500"/>
+				<FIELD NAME="PCTI_REMARK" TYPE="TEXT" LABEL="pcti.remark" WIDTH="2000"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="sys.create_by" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="sys.create_time" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="sys.update_by" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="sys.update_time" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RESET="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PJM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="STM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="BTM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PLAN_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_DURATION" INPUTTYPE="HIDDEN"/>
+
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.const_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_NAME" CAPTION="project.const_name" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PROJ_START_YEAR" CAPTION="project.start_year" INPUTTYPE="TEXT" DATATYPE="NUMTEXT" ALIGN="center"/>
+				<FIELD NAME="PROJ_END_YEAR" CAPTION="project.end_year" INPUTTYPE="TEXT" DATATYPE="NUMTEXT" ALIGN="center"/>
+				<FIELD NAME="PROJ_DURATION" CAPTION="project.duration" INPUTTYPE="TEXT" DATATYPE="NUMBER" ALIGN="center" DECIMAL="0" SUFFIX="day"/>
+				<FIELD NAME="PROJ_INST_COUNT" CAPTION="project.inst_count" INPUTTYPE="TEXT" DATATYPE="NUMTEXT" ALIGN="center"/>
+
+				<FIELD NAME="BUDGET_YEAR_01" CAPTION="2567" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="BUDGET_YEAR_02" CAPTION="2568" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="BUDGET_YEAR_03" CAPTION="2569" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="BUDGET_YEAR_04" CAPTION="2570" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="BUDGET_YEAR_05" CAPTION="2571" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+				<SECTION ID="SECT-PROJECT-CONST">
+					<FIELD NAME="PCTI_ADDRESS" CAPTION="pcti.address" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_TUMBON" CAPTION="pcti.tumbon" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_AMPUR" CAPTION="pcti.ampur" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_PROVINCE" CAPTION="pcti.province" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_ADDR_NOTE" CAPTION="pcti.addr_note" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_AREA" CAPTION="pcti.area" INPUTTYPE="TEXT" DATATYPE="NUMBER" SUFFIX="segtor"/>
+					<FIELD NAME="PCTI_EMP_COUNT" CAPTION="pcti.emp_count" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+					<FIELD NAME="PCTI_CHK_LOCATION" CAPTION="pcti.chk_location" INPUTTYPE="CHECKBOXGROUP">
+						<LIST-OPTION TABLE="REFER_CODE" VALUE="RFC_CODE" TEXT="RFC_DESC" FILTER="RFG_GRP='CNT-PAREA'" COLUMN="4" ORDER="RFC_ORDER"/>
+					</FIELD>
+					<FIELD NAME="PCTI_CHK_DOCUMENT" CAPTION="pcti.chk_document" INPUTTYPE="CHECKBOXGROUP">
+						<LIST-OPTION TABLE="REFER_CODE" VALUE="RFC_CODE" TEXT="RFC_DESC" FILTER="RFG_GRP='CNT-PDOC'" COLUMN="4" ORDER="RFC_ORDER"/>
+					</FIELD>
+					<FIELD NAME="PCTI_REMARK" CAPTION="pcti.remark" INPUTTYPE="TEXTAREA" ROWS="3"/>
+				</SECTION>
+
+				<FIELD NAME="GRID-BUDGET" INPUTTYPE="DATA-GRID" GRID-ID="GRID-CONST-BUDGET" ROWS="5" CAPTION="project.budget"/>
+				<SECTION ID="SEC-ATTATCH-FILE">
+					<FIELD NAME="FILE_BOX_01" CAPTION="แบบ/ประมาณการราคาอาคารสำนักงาน" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_02" CAPTION="หนังสืออนุญาตให้ใช้ที่ดิน ได้มาซึ่งกรรมสิทธิ์ในที่ดิน" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_03" CAPTION="ผังบริเวณ ประมาณราคาผังบริเวณ สิ่งก่อสร้างประกอบ" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_04" CAPTION="ประมาณการถมดิน/รื้อถอนอาคาร/กำแพงกันดิน ฯลฯ (ถ้ามี)" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_05" CAPTION="ประมาณการขยายเขตไฟฟ้า ขยายเขตประปา" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+				</SECTION>
+
+			</FIELDS>
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_NAME" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_EMP_COUNT" LAYOUT_WIDTH="4" OFFSET="4"/>
+						<FIELD NAME="PROJ_DURATION" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PROJ_INST_COUNT" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PROJ_START_YEAR" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PROJ_END_YEAR" LAYOUT_WIDTH="4"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-CONST" DATASET="DS-PROJECT-CONST" AUTO-INSERT="Y" TYPE="DATA-SECTION">
+					<HEADER CLASS="col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{project.year_budgets}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="BUDGET_YEAR_01" LAYOUT_WIDTH="4" OFFSET="4"/>
+						<FIELD NAME="BUDGET_YEAR_02" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="BUDGET_YEAR_03" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="BUDGET_YEAR_04" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="BUDGET_YEAR_05" LAYOUT_WIDTH="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-PROJECT-CONST" DATASET="DS-PROJECT-CONST" AUTO-INSERT="Y" TYPE="DATA-SECTION">
+					<HEADER CLASS="col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[
+						<h4 class="ml-3 col-24">@M{pcti.location_info}</h4>
+						]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PCTI_ADDRESS" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_TUMBON" LAYOUT_WIDTH="4" OFFSET="4"/>
+						<FIELD NAME="PCTI_AMPUR" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PCTI_PROVINCE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PCTI_AREA" LAYOUT_WIDTH="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_ADDR_NOTE" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_CHK_LOCATION" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_CHK_DOCUMENT" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_REMARK" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.budget}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="GRID-BUDGET" LAYOUT_WIDTH="24" OFFSET=""/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.constructor_attatchment}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="10" OFFSET="4"/>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="10"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="10" OFFSET="4"/>
+						<FIELD NAME="FILE_BOX_04" LAYOUT_WIDTH="10"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_05" LAYOUT_WIDTH="10" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-REVISE-COMMENT">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">การแก้ไข</h4>]]></HEADER>
+					<ROW TYPE="CONTENT">
+					<![CDATA[
+						<div class="mg-b-16">
+							<div id="FIELD-REVISE_COMMENT" class="form-group col-24 offset-0">
+								<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">รายการแก้ไข</label>
+								<div class="form-col col-24 col-sm-14" data-field="REVISE_COMMENT">
+									<input type="text" name="REVISE_COMMENT" id="REVISE_COMMENT" value="ให้ดำเนินการแก้ไข .........."  input-type="TEXT"  charcase="NORMAL" class="form-control dyn-form-control text" readonly>
+								</div>
+							</div>
+						</div>
+						<div>
+							<div>ประวัติการแก้ไข</div>
+							<ul>
+								<li>แก้ครั้งที่ 1 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 2 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 3 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 4 วันที่ xx/xx/xxxx : ...................................</li>
+							</ul>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+
+			</LAYOUT>
+
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE>
+						<![CDATA[
+						({form, data}) => {
+							console.log("before save data ...");
+							if ($PageCtx.$action === "add") {
+								let projYear = $$("PROJ_YEAR").val();
+								let projType = "CNST";
+								let stmCode = $user.deptCode;
+								let pjmCode = "B.2.01";
+								let btmCode = "01";
+								let acmCode = $$("ACM_CODE").val();
+
+								let projId = `${projYear}x${projType}x${stmCode}x${pjmCode}x${btmCode}x${acmCode}`;
+
+								$$("PROJ_ID").val(projId);
+								$$("PROJ_TYPE").val("CONST");
+								$$("STM_CODE").val(stmCode);
+								$$("PJM_CODE").val(pjmCode);
+								$$("BTM_CODE").val(btmCode);
+								$$("AC_CODE").val(acmCode);
+							}
+							//update data to save
+							Object.assign(data, $PageCtx.$form.jsonData());
+						}
+						]]>
+					</BEFORE-SAVE>
+				</EVENTS>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/equipt.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/equipt.frml
new file mode 100644
index 0000000..cd9e0b3
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/equipt.frml
@@ -0,0 +1,340 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PBDG.PROJ_ID
+							, PBDG.PBDG_ID
+							, PBDG.ACM_CODE
+							, BUD.GET_ACTIVITY(PBDG.ACM_CODE) ACM_NAME
+							, PBDG.PBDG_TOTAL
+							, PBDG.PBDG_COUNT
+							, PBDG.PBDG_ASSET_TYPE
+							, PBDG.PBDG_REASON
+							, PMAS.PROJ_YEAR
+							, PMAS.STM_CODE
+							, PMAS.PROJ_YEAR||'/'||PMAS.STM_CODE||'/'||PBDG.PROJ_ID FILEPATH
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS PBDG
+						  INNER JOIN PROJECTS PMAS ON PMAS.PROJ_ID = PBDG.PROJ_ID
+				</FROM>
+				<ORDER>ORDER BY PROJ_ID,PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32" ORIGIN="PBDG.PROJ_ID"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32" ORIGIN="PBDG.PROJ_ID"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20" ORIGIN="PBDG.ACM_CODE"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+				<FIELD NAME="PBDG_ASSET_TYPE" TYPE="TEXT" LABEL="ประเภทครุภัณฑ์" WIDTH="25"/>
+				<FIELD NAME="PBDG_REASON" TYPE="TEXT" LABEL="เหตุผลในการจัดหา" WIDTH="2000"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+
+		<DATASET ID="DS-BUDGET-ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, PBDG_ID
+					, BGM_CODE
+					, PBGI_QT_01
+					, PBGI_QT_02
+					, PBGI_QT_03
+					, PBGI_QT_04
+					, PBGI_QTY
+					, PBGI_COST
+					, PBGI_FREQ
+					, PBGI_ASSET_TYPE
+					, PBGI_REPLACE
+					, PBGI_ADDITION
+					, PBGI_ACQUIRE
+					, PBGI_TOTAL
+					, PBGI_REASON
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGET_ITEMS</FROM>
+				<ORDER>ORDER BY PROJ_ID,BGM_CODE,PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="pbgi.id" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="pbgi.pbdg_id" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="pbgi.bgm_code" WIDTH="20"/>
+				<FIELD NAME="PBGI_QT_01" TYPE="NUMBER" LABEL="pwbg.quotr_01" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_02" TYPE="NUMBER" LABEL="pwbg.quotr_02" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_03" TYPE="NUMBER" LABEL="pwbg.quotr_03" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_04" TYPE="NUMBER" LABEL="pwbg.quotr_04" WIDTH="15"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="pbgi.qty" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="pbgi.cost" WIDTH="15"/>
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="pbgi.freq" WIDTH="10"/>
+				<FIELD NAME="PBGI_ASSET_TYPE" TYPE="TEXT" LABEL="pbgi.asset_type" WIDTH="10"/>
+				<FIELD NAME="PBGI_REPLACE" TYPE="NUMBER" LABEL="pbgi.replace" WIDTH="10"/>
+				<FIELD NAME="PBGI_ADDITION" TYPE="NUMBER" LABEL="pbgi.addition" WIDTH="10"/>
+				<FIELD NAME="PBGI_ACQUIRE" TYPE="NUMBER" LABEL="pbgi.acquire" WIDTH="10"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="pbgi.total" WIDTH="15"/>
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="pbgi.reason" WIDTH="4000"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="sys.create_by" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="sys.create_time" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="sys.update_by" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="sys.update_time" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,PBDG_ID" DETAIL-FIELDS="PROJ_ID,PBDG_ID"/>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.equipt_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_NAME" CAPTION="project.equipt_name" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PBDG_ASSET_TYPE" CAPTION="pbge.asset_type" INPUTTYPE="COMBOBOX" REQUIRE="Y">
+					<LIST-OPTION TABLE="REFER_CODE" TEXT="RFC_DESC" VALUE="RFC_CODE" ORDER="RFC_ORDER" FILTER="RFG_GRP='ASSET-TYPE'" FIRSTLIST="@{CAPTION}"/>
+				</FIELD>
+				<FIELD NAME="PBDG_REASON" CAPTION="pbge.reason" INPUTTYPE="TEXT" />
+
+				<FIELD NAME="FILE_BOX_01" CAPTION="pbge.quotaion_file 1" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+					<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+						UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+						DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+				</FIELD>
+				<FIELD NAME="FILE_BOX_02" CAPTION="pbge.quotaion_file 2" INPUTTYPE="FILE-BOX">
+					<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+						UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+						DEFAULT-NAME="@{filepath}/@{acm_code}/file-02"/>
+				</FIELD>
+				<FIELD NAME="FILE_BOX_03" CAPTION="pbge.quotaion_file 3" INPUTTYPE="FILE-BOX">
+					<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+						UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+						DEFAULT-NAME="@{filepath}/@{acm_code}/file-03"/>
+				</FIELD>
+
+				<SECTION ID="SECT-PROJECT-TARGET">
+					<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_COUNT" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PWMT_UNIT" CAPTION="project.unit" INPUTTYPE="TEXT" READONLY="Y"></FIELD>
+					<FIELD NAME="PTGT_QT_0101" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.quoter 1"/>
+					<FIELD NAME="PTGT_QT_0201" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.quoter 2"/>
+					<FIELD NAME="PTGT_QT_0301" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.quoter 3"/>
+					<FIELD NAME="PTGT_QT_0401" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.quoter 4"/>
+					<FIELD NAME="QT_TOTAL_01" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.total" READONLY="Y"/>
+				</SECTION>
+
+				<SECTION ID="SECT-BUDGET-ITEMS">
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-EQUIPT-BUDGET" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div><label class="offset-${data.node_level}">[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="PBGI_QT_01" CAPTION="pbge.origin" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+					<FIELD NAME="PBGI_REPLACE" CAPTION="pbge.replace" INPUTTYPE="TEXT" DATATYPE="NUMBER" CLASS-NAME="equipt-qty equipt-item"/>
+					<FIELD NAME="PBGI_ADDITION" CAPTION="pbge.addition" INPUTTYPE="TEXT" DATATYPE="NUMBER" CLASS-NAME="equipt-qty equipt-item"/>
+					<FIELD NAME="PBGI_ACQUIRE" CAPTION="pbge.acquire" INPUTTYPE="TEXT" DATATYPE="NUMBER" CLASS-NAME="equipt-qty equipt-item"/>
+					<FIELD NAME="PBGI_QTY" CAPTION="pbge.qty" INPUTTYPE="TEXT" DATATYPE="NUMBER" READONLY="Y" CLASS-NAME="equipt-item"/>
+
+					<FIELD NAME="PBGI_COST" CAPTION="pbge.cost" INPUTTYPE="TEXT" DATATYPE="NUMBER" CLASS-NAME=" equipt-item"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="pbge.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" READONLY="Y"/>
+				</SECTION>
+
+
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_NAME" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBDG_ASSET_TYPE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PBDG_REASON" LAYOUT_WIDTH="18"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-PROJECT-BUTGET" TYPE="DATA-SECTION" DATASET="DS-BUDGET-ITEMS">
+					<ROW ID="ROW-BUDGET-DATA">
+						<FIELD NAME="PBGI_QT_01" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PBGI_REPLACE" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_ADDITION" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_ACQUIRE" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_QTY" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_COST" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="4" OFFSET="4"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="14"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-PROJECT-TARGET" TYPE="DATA-SECTION" DATASET="DS-PROJECT-TARGETS">
+					<HEADER CLASS="col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{project.target}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PTGT_QT_0101" LAYOUT_WIDTH="3" OFFSET="4"/>
+						<FIELD NAME="PTGT_QT_0201" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PTGT_QT_0301" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PTGT_QT_0401" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QT_TOTAL_01" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PWMT_UNIT" LAYOUT_WIDTH="3"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-QUOTATION-FILE">
+					<HEADER CLASS="col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{pbge.quotaion_file}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="12" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="12" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="12" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-REVISE-COMMENT">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">การแก้ไข</h4>]]></HEADER>
+					<ROW TYPE="CONTENT">
+					<![CDATA[
+						<div class="mg-b-16">
+							<div id="FIELD-REVISE_COMMENT" class="form-group col-24 offset-0">
+								<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">รายการแก้ไข</label>
+								<div class="form-col col-24 col-sm-14" data-field="REVISE_COMMENT">
+									<input type="text" name="REVISE_COMMENT" id="REVISE_COMMENT" value="ให้ดำเนินการแก้ไข .........."  input-type="TEXT"  charcase="NORMAL" class="form-control dyn-form-control text" readonly>
+								</div>
+							</div>
+						</div>
+						<div>
+							<div>ประวัติการแก้ไข</div>
+							<ul>
+								<li>แก้ครั้งที่ 1 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 2 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 3 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 4 วันที่ xx/xx/xxxx : ...................................</li>
+							</ul>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+
+			<SCRIPT>
+				<DECLARATION>
+					const equiptQty = $$(".equipt-qty");
+					const equiptItem = $$(".equipt-item");
+					const txtEquiptQty = $$("PBGI_QTY");
+					const txtEquiptCost = $$("PBGI_COST");
+					const txtEquiptTotal = $$("PBGI_TOTAL");
+				</DECLARATION>
+
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							$$("PBDG_COUNT").val(txtEquiptQty.number());
+							$$("PBDG_TOTAL").val(txtEquiptTotal.number());
+
+							Object.assign(data, form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+
+				<INITIALIZE>
+					<![CDATA[
+					const quoterSum = () => {
+						let summary = 0;
+						for (let qt = 1; qt <= 4; qt++) {
+							summary += $$(`PTGT_QT_0${qt}01`).number();
+						}
+						$$(`QT_TOTAL_01`).val(formatNumber(summary));
+					}
+
+					$$("^PTGT_QT_").on("change", quoterSum);
+
+					const equiptSum = ()=>{
+						let sumEquipt = equiptQty.sum();
+						txtEquiptQty.val(formatNumber(sumEquipt));
+						let equiptCost = txtEquiptCost.number();
+						txtEquiptTotal.val(formatNumber(sumEquipt*equiptCost));
+					}
+					equiptItem.on("change",equiptSum);
+
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/general.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/general.frml
new file mode 100644
index 0000000..4b23fed
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/general.frml
@@ -0,0 +1,255 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-construct-budget.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ.PROJ_ID
+					, PROJ.PROJ_TYPE
+					, PROJ.PROJ_YEAR
+					, PROJ.PJM_CODE
+					, PROJ.STM_CODE
+					, PROJ.BTM_CODE
+					, PROJ.ACM_CODE
+					, BUD.GET_ACTIVITY(PROJ.ACM_CODE) ACM_NAME
+					, PROJ.PLAN_TYPE
+					, PROJ.PROJ_DURATION
+					, PROJ.PROJ_START_YEAR
+					, PROJ.PROJ_END_YEAR
+					, PROJ.PROJ_FOR_STAFF
+
+					, PROJ.PROJ_FROM_YEAR
+					, 0 BDGT_TOTAL
+				</SELECT>
+				<FROM>FROM PROJECTS PROJ
+						   INNER JOIN REFER_CODE RFC ON RFC.RFG_GRP='PROJ-TYPE' AND RFC.RFC_CODE=PROJ.PROJ_TYPE AND RFC.RFC_FLAG = 'GENERAL'
+				</FROM>
+				<FILTER>WHERE STM_CODE = :STM_CODE AND PROJ.PROJ_YEAR = :PROJ_YEAR</FILTER>
+				<ORDER>ORDER BY RFC.RFC_ORDER, PROJ.PROJ_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PROJ_TYPE" TYPE="TEXT" LABEL="ประเภทโครงการ" WIDTH="25"/>
+				<FIELD NAME="PROJ_YEAR" TYPE="NUMBER" LABEL="ปีงบประมาณ" WIDTH="15"/>
+				<FIELD NAME="PJM_CODE" TYPE="TEXT" LABEL="รหัสโครงการ (BUD)" WIDTH="20"/>
+				<FIELD NAME="STM_CODE" TYPE="TEXT" LABEL="รหัสหน่วยงาน" WIDTH="10"/>
+				<FIELD NAME="BTM_CODE" TYPE="TEXT" LABEL="รหัสประเภทงบประมาณ" WIDTH="10"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20"/>
+				<FIELD NAME="PLAN_TYPE" TYPE="TEXT" LABEL="ประเภทแผน" WIDTH="15"/>
+				<FIELD NAME="PROJ_DURATION" TYPE="NUMBER" LABEL="ระยะเวลาดำเนินการ (วัน)" WIDTH="15"/>
+				<FIELD NAME="PROJ_START_YEAR" TYPE="NUMBER" LABEL="ปีที่เริ่มโครงการ (ก่อสร้าง)" WIDTH="15"/>
+				<FIELD NAME="PROJ_END_YEAR" TYPE="NUMBER" LABEL="ปีที่สิ้นสุดโครงการ (ก่อสร้าง)" WIDTH="15"/>
+				<FIELD NAME="PROJ_FOR_STAFF" TYPE="NUMBER" LABEL="จำนวนบุคลากรที่รองรับ" WIDTH="15"/>
+
+				<FIELD NAME="PROJ_FROM_YEAR" TYPE="NUMBER" LABEL="ต่อเนื่องจากปี" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<SUBDATASETS>
+				<SUBDATASET NAME="ACTIVITIES" DATASET-ID="DS-ACTIVITY-TREE" LINK-FIELDS="PROJ_ID"/>
+			</SUBDATASETS>
+		</DATASET>
+		<DATASET ID="DS-ACTIVITY-TREE">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>V_ACTIVITY_TREE</TABLENAME>
+			<SQL>
+				<SELECT>
+					SELECT PACT.PROJ_ID
+					, PACT.PROJ_YEAR
+					, PACT.PROJ_TYPE
+					, PACT.PROJ_GROUP
+					, ACTT.ACM_CODE
+					, ACTT.ACM_NAME
+					, ACTT.ACM_SEQ
+					, ACTT.NODE_LEVEL+1 NODE_LEVEL
+					, ACTT.MAIN_NODE
+					, ACTT.ACM_UNIT
+					, ACTT.ACM_START_YEAR
+					, ACTT.ACM_END_YEAR
+					, ACTT.NODE_TYPE
+					, PACT.BDGT_COUNT
+					, PACT.BDGT_TOTAL
+				</SELECT>
+				<FROM>
+					FROM BGT.V_ACTIVITY_TREE ACTT
+						 INNER JOIN (SELECT DISTINCT ACM.ACM_CODE
+									   FROM BUD.ACTIVITY_M ACM
+									        INNER JOIN BUD.ACTIVITY_CTRL_H ACH ON ACM.ACM_CODE = ACH.ACH_CODE
+											START WITH ACM.ACM_CODE IN (SELECT ACM_CODE FROM V_PROJECT_ACTIVITY PACT WHERE PACT.PROJ_ID = :PROJ_ID)
+											CONNECT BY PRIOR ACH.ACH_CTRL_CODE = ACH.ACH_CODE) FLTR ON FLTR.ACM_CODE = ACTT.ACM_CODE
+						LEFT OUTER JOIN V_PROJECT_ACTIVITY PACT ON PACT.ACM_CODE = ACTT.ACM_CODE AND PACT.PROJ_ID = :PROJ_ID
+				</FROM>
+				<ORDER>
+					ORDER BY ACTT.ACM_SEQ
+				</ORDER>
+			</SQL>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-MASTER">
+			<HEADER NAVI="N" EDIT="N" ADD="N" DELETE="N" VIEW="N"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="ACM_CODE" LABEL="project.const_code" ALIGN="left">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 row text-nowrap"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="ACM_NAME" LABEL="project.const_name" ALIGN="left">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 row text-nowrap"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="BDGT_COUNT" LABEL="pbdg.acm_count" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[(value, row, idx) => {
+							if (row["node_type"] === "D") {
+								return `<div class="col-24 text-nowrap">${formatNumber(value)} ${row["acm_unit"]}</div>`;
+								// return  formatNumber(value)+" "+row["acm_unit"];
+							} else {
+								return ""
+							}
+						}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="BDGT_TOTAL" LABEL="project.bgt_amount" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[(value, row, idx) => {return formatNumber(value);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<COMMAND-BUTTONS>
+					<BUTTON NAME="btnEditor" CLASS="btn btn-warning btn-editor" ICON-CLASS="fa fa-edit white">
+						<FILTER><![CDATA[({$ctx,row})=>{return ["D"].includes(row["node_type"]);}]]></FILTER>
+						<EVENT ON="click"><![CDATA[
+							({ev, row}) => {
+								console.log(row);
+								$PageCtx.saveSessionData("edit", row);
+								let proj = {proj_id : row.proj_id,acm_code : row.acm_code, type: row.proj_type.toLowerCase()};
+								let data = base64(JSON.stringify(proj)) ;
+								let editUrl = `/bdgt04/bgt0403010-general?edit&data=${data}`;
+								$WebNavi.goto(editUrl);
+							}
+							]]></EVENT>
+					</BUTTON>
+					<BUTTON NAME="btnViewer" CLASS="btn btn-primary btn-viewer" ICON-CLASS="fa fa-file-alt white">
+						<FILTER><![CDATA[({$ctx,row})=>{return ["D"].includes(row["node_type"]);}]]></FILTER>
+						<EVENT ON="click"><![CDATA[({ev,row})=>{ console.log(row);}]]></EVENT>
+					</BUTTON>
+				</COMMAND-BUTTONS>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="N" ALLOW-NO-FILTER="Y">
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="12" VAL_WIDTH="5" CAPT_WIDTH="14"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+			<FOOTER SHOW="Y"/>
+			<BUTTONS>
+				<BUTTON NAME="btnButton1" CAPTION="ส่งผู้อำนวยการสำนักพิจารณา" CLASS="btn btn-warning" SECTION="RIGHT"/>
+			</BUTTONS>
+			<SCRIPT>
+				<EVENTS>
+					<AFTER-LOAD>
+						<![CDATA[
+							($ctx,data)=>{
+								let src = [...data]; // clone data to src
+									data.splice(0); // clear data element
+
+								let id = 1;
+								for (let item of src) {
+									item["node_type"] = "P";
+									item["node_level"] = "0";
+									item["$itemno"] = id++;
+									data.push(item);
+									if (isArray(item.activities)) {
+										for (let sitem of item.activities) {
+											sitem["$itemno"] = id++;
+											data.push(sitem);
+										}
+									}
+								}
+								// console.log(data);
+							}
+					]]>
+					</AFTER-LOAD>
+				</EVENTS>
+
+				<INITIALIZE>
+					<![CDATA[
+					{
+						// console.log("init activity grid");
+						const fieldFormat = (value,row) => {
+							if (row["node_type"] === "P") {
+								return "";
+							}
+							return formatNumber(value, 0);
+						}
+						const summary = (field, data) => {
+							let total = 0;
+							for (let id=0; id < data.length; id++) {
+								let row = data[id];
+								if (row["node_type"] === "D") {
+									total += (+row[field]) || 0;
+								}
+							}
+							if ($PageCtx.$dataGrid.load && !$PageCtx.$dataGrid.reload) {
+								$PageCtx.$dataGrid.reload = true;
+								for (let id=data.length-1; id>=0; id--) {
+									let row = data[id];
+									if (row["node_type"] === "C") {
+										let grpTotal = 0;
+										let mainNode = row["acm_code"];
+										let nodes = [];
+										nodes.push($$("main_node="+mainNode,data));
+										for (let node of nodes.flat()) {
+											grpTotal += +node[field];
+										}
+										data[id][field] = grpTotal;
+									}
+								}
+								$PageCtx.$dataGrid.load(data);
+								$PageCtx.$dataGrid.reload = false;
+							}
+							return formatNumber(total, 0);
+						}
+
+						const $ctx = $PageCtx;
+						const gridFields = [$$("field=bdgt_total", $ctx.gridColumn.flat())].flat();
+						for (let field of gridFields) {
+							field.formatter = fieldFormat;
+							field.footerFormatter = function (data) {
+								return summary(this.field, data);
+							}
+						}
+
+						$ctx.rowStyle = function (row, index) {
+							if (row["node_type"] === "C") {
+								return {classes : `group-level-${row["node_level"]}`};
+							}
+							if (row["node_type"] === "P") {
+								return {classes : `group-level-0`};
+							}
+							return {}; // Default style for other rows
+						}
+					}
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+
+
+		</FORM_BROWSE>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/manage.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/manage.frml
new file mode 100644
index 0000000..9f4a16c
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/manage.frml
@@ -0,0 +1,253 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-manage-budget.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PBDG.PROJ_ID
+					, PROJ.PROJ_YEAR
+					, PBDG.PBDG_ID
+					, PBDG.ACM_CODE
+					, BUD.GET_ACTIVITY(PBDG.ACM_CODE) ACM_NAME
+					, PBDG.PBDG_TOTAL
+					, PBDG.PBDG_COUNT
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS PBDG
+					INNER JOIN PROJECTS PROJ ON PROJ.PROJ_ID=PBDG.PROJ_ID
+				</FROM>
+				<ORDER>ORDER BY PBDG.PROJ_ID,PBDG.PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32" ORIGIN="PBDG.PROJ_ID"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20" ORIGIN="PBDG.ACM_CODE"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+			</FIELDS>
+		</DATASET>
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+	</DATASETS>
+	<FORM>
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.acm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PROJ_PRINCIPLES" CAPTION="project.remak" INPUTTYPE="TEXT" ROWS="3"/>
+				<FIELD NAME="ACM_NAME" CAPTION="project.acm_name" INPUTTYPE="TEXT" EDIT-READONLY="Y"/>
+
+				<SECTION ID="SECT-PROJECT-TARGET">
+					<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_COUNT" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PWMT_UNIT" CAPTION="project.target" INPUTTYPE="TEXT" READONLY="Y"></FIELD>
+					<FIELD NAME="QUOTER_1" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 1" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0101" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0102" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_2" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 2" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0201" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0202" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_3" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 3" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0301" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0302" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_4" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 4" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0401" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0402" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="TOTAL_QT" INPUTTYPE="MULTI-FIELD" CAPTION="project.total" FIELD-SEPARATOR="/" READONLY="Y">
+						<FIELD-LIST>
+							<FIELD NAME="QT_TOTAL_01" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="QT_TOTAL_02" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+				</SECTION>
+
+				<FIELD NAME="GRID-BUDGET" INPUTTYPE="DATA-GRID" GRID-ID="GRID-WORK-BUDGET" ROWS="5" CAPTION="project.budget"/>
+
+				<SECTION ID="SEC-ATTATCH-FILE">
+					<FIELD NAME="FILE_BOX_01" CAPTION="file.upload 1" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_02" CAPTION="file.upload 2" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_03" CAPTION="file.upload 3" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+				</SECTION>
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="6"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="ACM_NAME" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_PRINCIPLES" LAYOUT_WIDTH="18" OFFSET="6"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-TARGET" TYPE="DATA-SECTION" DATASET="DS-PROJECT-TARGETS">
+					<ROW>
+						<FIELD NAME="PWMT_UNIT" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="QUOTER_1" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_2" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_3" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_4" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="TOTAL_QT" LAYOUT_WIDTH="4"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[
+						<h4 class="ml-3 border-bottom-1 col-24">@M{project.budget}</h4>
+						]]></HEADER>
+					<ROW>
+						<FIELD NAME="GRID-BUDGET" LAYOUT_WIDTH="24" OFFSET=""/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-FILE-UPLOAD">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.constructor_attatchment}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-REVISE-COMMENT">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">การแก้ไข</h4>]]></HEADER>
+					<ROW TYPE="CONTENT">
+					<![CDATA[
+						<div class="mg-b-16">
+							<div id="FIELD-REVISE_COMMENT" class="form-group col-24 offset-0">
+								<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">รายการแก้ไข</label>
+								<div class="form-col col-24 col-sm-14" data-field="REVISE_COMMENT">
+									<input type="text" name="REVISE_COMMENT" id="REVISE_COMMENT" value="ให้ดำเนินการแก้ไข .........."  input-type="TEXT"  charcase="NORMAL" class="form-control dyn-form-control text" readonly>
+								</div>
+							</div>
+						</div>
+						<div>
+							<div>ประวัติการแก้ไข</div>
+							<ul>
+								<li>แก้ครั้งที่ 1 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 2 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 3 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 4 วันที่ xx/xx/xxxx : ...................................</li>
+							</ul>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							let acmCount = $$("^QT_TOTAL_0").sum();
+							$$("PBDG_COUNT").val(acmCount);
+							let gridCtx = ($PageCtx.widgets["GRID-BUDGET"]||{})["$GridCtx"];
+							if (gridCtx) {
+								 let bdgTotal = gridCtx.sum_of["pbgi_total"];
+								$$("PBDG_TOTAL").val(bdgTotal);
+							}
+							Object.assign(data,form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+				<INITIALIZE>
+					<![CDATA[
+					     const quoterSum = ()=>{
+						     for (let sect=1; sect <=2; sect++) {
+							     let summary = 0;
+							     for (let qt = 1; qt <= 4; qt++) {
+								     summary += $$(`PTGT_QT_0${qt}0${sect}`).number();
+							     }
+							     $$(`QT_TOTAL_0${sect}`).val(formatNumber(summary));
+						     }
+					     }
+						 $$("^PTGT_QT_").on("change",quoterSum);
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/project-budget.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/project-budget.frml
new file mode 100644
index 0000000..2bd3c9b
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/project-budget.frml
@@ -0,0 +1,343 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-proj-budget.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-BROWSER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>V_ACTIVITY_TREE</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT :PROJ_ID PROJ_ID
+					, ACTT.ACM_CODE
+					, ACTT.ACM_NAME
+					, ACTT.ACM_SEQ
+					, ACTT.NODE_LEVEL
+					, ACTT.MAIN_NODE
+					, ACTT.ACM_UNIT
+					, ACTT.ACM_START_YEAR
+					, ACTT.ACM_END_YEAR
+					, ACTT.NODE_TYPE
+					, PJBG.PBDG_TOTAL PBDG_TOTAL
+					, PJBG.PBDG_COUNT  PBDG_COUNT
+				</SELECT>
+				<FROM>
+					FROM BGT.V_ACTIVITY_TREE ACTT
+						 INNER JOIN ( SELECT DISTINCT ACM.ACM_CODE
+										FROM BUD.ACTIVITY_M ACM
+											 INNER JOIN BUD.ACTIVITY_CTRL_H ACH ON ACM.ACM_CODE = ACH.ACH_CODE
+										START WITH ACM.ACM_CODE IN (SELECT ACM_CODE FROM PROJECT_BUDGETS PJBD WHERE PROJ_ID = :PROJ_ID)
+									  CONNECT BY PRIOR ACH.ACH_CTRL_CODE = ACH.ACH_CODE) FLTR ON FLTR.ACM_CODE = ACTT.ACM_CODE
+						 LEFT OUTER JOIN PROJECT_BUDGETS PJBG ON PJBG.PROJ_ID=:PROJ_ID AND PJBG.ACM_CODE = ACTT.ACM_CODE
+				</FROM>
+				<ORDER>ORDER BY ACTT.ACM_SEQ</ORDER>
+			</SQL>
+		</DATASET>
+
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, PBDG_ID
+					, ACM_CODE
+					, PBDG_TOTAL
+					, PBDG_COUNT
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-BROWSER">
+			<HEADER NAVI="Y" ADD="Y" EDIT="Y" DELETE="Y"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="ACM_CODE" LABEL="project.acm_code" ALIGN="left" WIDTH="15em">
+					<DATA-FORMATTER><![CDATA[
+						(value,row,idx)=>{
+							return $(`<div class="col-24 row"><div class="col offset-${row.node_level}">${value}</div></div>`);
+						}
+						]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="ACM_NAME" LABEL="project.acm_name" ALIGN="left">
+					<DATA-FORMATTER><![CDATA[
+						(value,row,idx)=>{
+							return $(`<div class="col-24 row"><div class="col offset-${row.node_level}">${value}</div></div>`);
+						}
+						]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="PBDG_TOTAL" LABEL="project.bgt_amount" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return (row["node_type"]==="D")? value : "";}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<COMMAND-BUTTONS>
+					<BUTTONS-FILTER>
+						<EDIT><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></EDIT>
+						<DELETE><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></DELETE>
+						<VIEW><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></VIEW>
+					</BUTTONS-FILTER>
+				</COMMAND-BUTTONS>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="Y" ALLOW-NO-FILTER="Y" >
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" DATATYPE="TEXT" ALIGN="center"/>
+					<FIELD NAME="PROJ_NAME" CAPTION="project.name" INPUTTYPE="TEXT" DATATYPE="TEXT" ALIGN="left"/>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"></FIELD>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" CAPT_WIDTH="10" VAL_WIDTH="6" LAYOUT_WIDTH="12"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_NAME" CAPT_WIDTH="5" VAL_WIDTH="18" LAYOUT_WIDTH="24"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+			<FOOTER SHOW="Y"/>
+			<SCRIPT>
+				<INITIALIZE>
+					<![CDATA[
+					{
+						console.log("init activity grid");
+
+						const fieldFormat = (value) => {
+							return formatNumber(value, 0);
+						}
+
+						$PageCtx.sum_of = {};
+						const summary = (field, data) => {
+							console.log("budget summary process.")
+							let total = 0;
+							for (let id=0; id < data.length; id++) {
+								let row = data[id];
+								if (row["node_type"] === "D") {
+									total += (+row[field]) || 0;
+								}
+							}
+
+							$PageCtx.sum_of[field] = total;
+
+							if ($PageCtx.$dataGrid.load && !$PageCtx.$dataGrid.reload) {
+								$PageCtx.$dataGrid.reload = true;
+								for (let id=data.length-1; id>=0; id--) {
+									let row = data[id];
+									if (row["node_type"] === "C") {
+										let grpTotal = 0;
+										let mainNode = row["acm_code"];
+										let nodes = [];
+										nodes.push($$("main_node="+mainNode,data));
+										for (let node of nodes.flat()) {
+											grpTotal += +node[field];
+										}
+										data[id][field] = grpTotal;
+									}
+								}
+								$PageCtx.$dataGrid.load(data);
+								$PageCtx.$dataGrid.reload = false;
+							}
+
+							return formatNumber(total, 0);
+						}
+
+						const $ctx = $PageCtx;
+						const gridFields = [$$("field^pbdg_", $ctx.gridColumn.flat())].flat();
+						for (let field of gridFields) {
+							field.formatter = fieldFormat;
+							field.footerFormatter = function (data) {
+								return summary(this.field, data);
+							}
+						}
+
+						$ctx.rowStyle = function (row, index) {
+							if (row["node_type"] === "C") {
+								return {
+									classes : `group-level-${row["node_level"]}`
+								};
+							}
+							return {}; // Default style for other rows
+						}
+					}
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_BROWSE>
+
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PROJ_NAME" CAPTION="project.name" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="VACM_CODE" CAPTION="project.acm_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.acm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-ACTIVITY-02-BDGT" VALUE-FIELD="ACM_CODE" TEXT-FIELD="ACM_NAME" PARAMETERS="DV_YEAR=PROJ_YEAR,STM_CODE=STM_CODE">
+						<UPDATE-FIELDS>
+							<FIELD SRC="ACM_CODE" TARGET="VACM_CODE"></FIELD>
+							<FIELD SRC="ACM_UNIT" TARGET="TARGET_UNIT"></FIELD>
+							<FIELD SRC="ACM_UNIT" TARGET="PWMT_UNIT"></FIELD>
+							<FIELD SRC="PJM_CODE" TARGET="PJM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								if (data.node_type === "C") {
+									data.disabled = true;
+								}
+								return $(`<div><label>[${data.acm_code}]</label> : <label>${data.acm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+				<FIELD NAME="GRID-BUDGET" INPUTTYPE="DATA-GRID" GRID-ID="GRID-WORK-BUDGET" ROWS="5" CAPTION="project.budget"/>
+
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_NAME" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.budget}</h4>]]></HEADER>
+					<ROW>
+						<FIELD NAME="GRID-BUDGET" LAYOUT_WIDTH="24" OFFSET=""/>
+					</ROW>
+				</SECTION>
+
+
+				<SECTION ID="SECT-REVISE-COMMENT">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">การแก้ไข</h4>]]></HEADER>
+					<ROW TYPE="CONTENT">
+					<![CDATA[
+						<div class="mg-b-16">
+							<div id="FIELD-REVISE_COMMENT" class="form-group col-24 offset-0">
+								<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">รายการแก้ไข</label>
+								<div class="form-col col-24 col-sm-14" data-field="REVISE_COMMENT">
+									<input type="text" name="REVISE_COMMENT" id="REVISE_COMMENT" value="ให้ดำเนินการแก้ไข .........."  input-type="TEXT"  charcase="NORMAL" class="form-control dyn-form-control text" readonly>
+								</div>
+							</div>
+						</div>
+						<div>
+							<div>ประวัติการแก้ไข</div>
+							<ul>
+								<li>แก้ครั้งที่ 1 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 2 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 3 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 4 วันที่ xx/xx/xxxx : ...................................</li>
+							</ul>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							let acmCount = $$("^QT_TOTAL_0").sum();
+							$$("PBDG_COUNT").val(acmCount);
+							let gridCtx = ($PageCtx.widgets["GRID-BUDGET"]||{})["$GridCtx"];
+							if (gridCtx) {
+								 let bdgTotal = gridCtx.sum_of["pbgi_total"];
+								$$("PBDG_TOTAL").val(bdgTotal);
+							}
+							Object.assign(data,form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+				<INITIALIZE>
+					<![CDATA[
+					     const quoterSum = ()=>{
+						     for (let sect=1; sect <=2; sect++) {
+							     let summary = 0;
+							     for (let qt = 1; qt <= 4; qt++) {
+								     summary += $$(`PTGT_QT_0${qt}0${sect}`).number();
+							     }
+							     $$(`QT_TOTAL_0${sect}`).val(formatNumber(summary));
+						     }
+					     }
+						 $$("^PTGT_QT_").on("change",quoterSum);
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/project.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/project.frml
new file mode 100644
index 0000000..2bac7ea
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/project.frml
@@ -0,0 +1,644 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-stratigy.frml"></INCLUDE>
+		<INCLUDE FILE="#grids/grid-stratigy-item.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT PROJ.PROJ_ID
+					, PROJ.PROJ_TYPE
+					, PROJ.PROJ_YEAR
+					, PROJ.PJM_CODE
+					, BUD.GET_PROJECT(PROJ.PJM_CODE) PROJ_NAME
+					, PROJ.STM_CODE
+					, PROJ.BTM_CODE
+					, PROJ.ACM_CODE
+					, BUD.GET_ACTIVITY(PROJ.ACM_CODE) ACM_NAME
+					, PROJ.PLAN_TYPE
+					, PROJ.PROJ_DURATION
+					, PROJ.PROJ_START_YEAR
+					, PROJ.PROJ_END_YEAR
+					, PROJ.PROJ_FOR_STAFF
+
+					, PROJ.PROJ_CATE
+					, PROJ.PROJ_KIND
+					, PROJ.PROJ_FROM_YEAR
+
+				</SELECT>
+				<FROM>FROM PROJECTS PROJ</FROM>
+				<FILTER>WHERE STM_CODE=:STM_CODE</FILTER>
+				<ORDER>ORDER BY PROJ_YEAR DESC, PROJ_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="VARCHAR" WIDTH="50" LABEL="plcp.id"/>
+				<FIELD NAME="PROJ_TYPE" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.type"/>
+				<FIELD NAME="PROJ_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.year"/>
+				<FIELD NAME="PJM_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="plcp.pjm_code"/>
+				<FIELD NAME="STM_CODE" TYPE="VARCHAR" WIDTH="10" LABEL="plcp.stm_code"/>
+				<FIELD NAME="BTM_CODE" TYPE="VARCHAR" WIDTH="10" LABEL="plcp.btm_code"/>
+				<FIELD NAME="ACM_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="plcp.acm_code"/>
+				<FIELD NAME="ACM_NAME" TYPE="VARCHAR" WIDTH="200" LABEL="plcp.acm_name"/>
+				<FIELD NAME="PLAN_TYPE" TYPE="VARCHAR" WIDTH="15" LABEL="plcp.plan_type"/>
+				<FIELD NAME="PROJ_DURATION" TYPE="NUMBER" WIDTH="10" LABEL="plcp.duration"/>
+				<FIELD NAME="PROJ_START_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.start_year"/>
+				<FIELD NAME="PROJ_END_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.end_year"/>
+				<FIELD NAME="PROJ_FOR_STAFF" TYPE="NUMBER" WIDTH="10" LABEL="plcp.for_staff"/>
+
+				<FIELD NAME="PROJ_CATE" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.catagory"/>
+				<FIELD NAME="PROJ_KIND" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.kine"/>
+				<FIELD NAME="PROJ_FROM_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.from_year"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="N">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="STM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="BTM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PLAN_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_DURATION" INPUTTYPE="HIDDEN"/>
+
+				<FIELD NAME="PROJ_YEAR" CAPTION="plcp.year" INPUTTYPE="TEXT" READONLY="Y" DATATYPE="TEXT"/>
+				<FIELD NAME="VPJM_CODE" CAPTION="plcp.pjm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PJM_CODE" CAPTION="plcp.pjm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-PROJECT-02" VALUE-FIELD="PJM_CODE" TEXT-FIELD="PJM_NAME">
+						<UPDATE-FIELDS>
+							<FIELD SRC="PJM_CODE" TARGET="VPJM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								// data.disabled = data["node_type"] === "C";
+								return $(`<div class="d-flex flex-row gap-1 dyn-list-item"><label class="flex-column text-nowrap col-3">[${data.pjm_code}]</label> : <label>${data.pjm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+
+				<FIELD NAME="VACM_CODE" CAPTION="plcp.acm_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_CODE" CAPTION="plcp.acm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-ACTIVITY-02" VALUE-FIELD="ACM_CODE" TEXT-FIELD="ACM_NAME" PARAMETERS="DV_YEAR=PROJ_YEAR,STM_CODE=STM_CODE">
+						<UPDATE-FIELDS>
+							<FIELD SRC="ACM_CODE" TARGET="VACM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								// data.disabled = data["node_type"] === "C";
+								return $(`<div class="d-flex flex-row gap-1 dyn-list-item"><label class="flex-column text-nowrap col-3">[${data.acm_code}]</label> : <label>${data.acm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+
+				<FIELD NAME="STM_CODE" CAPTION="plcp.stm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="BTM_CODE" CAPTION="plcp.btm_code" INPUTTYPE="TEXT"/>
+				<FIELD NAME="PLAN_TYPE" CAPTION="plcp.plan_type" INPUTTYPE="TEXT"/>
+				<FIELD NAME="PROJ_DURATION" CAPTION="plcp.duration" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_START_YEAR" CAPTION="plcp.start_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_END_YEAR" CAPTION="plcp.end_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_FOR_STAFF" CAPTION="plcp.for_staff" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+
+				<FIELD NAME="PROJ_CATE" CAPTION="plcp.catagory" INPUTTYPE="RADIOGROUP" DATATYPE="TEXT" CLASS-NAME="flex-option">
+					<LIST-OPTION TABLE="BGT.REFER_CODE" TEXT="#RFC_DESC" VALUE="RFC_CODE" FILTER="RFG_GRP='PROJ-CATE'" ORDER="RFC_CODE"/>
+				</FIELD>
+
+				<FIELD NAME="PROJ_KIND" CAPTION="plcp.kind" INPUTTYPE="SWITCH" DATATYPE="TEXT"
+					VALUE="NEW" UNCHECK_VALUE="OLD" SUFFIX="#plcp.new|plcp.continue"></FIELD>
+
+
+				<FIELD NAME="PROJ_PHASE" CAPTION="#--" SHOWCAPT="Y" INPUTTYPE="CHECKBOXGROUP" DATATYPE="TEXT">
+					<LIST-OPTION TABLE="BGT.REFER_CODE" TEXT="#RFC_DESC" VALUE="RFC_CODE" FILTER="RFG_GRP='PROJ-PHASE'" ORDER="RFC_CODE" COLUMN="4"/>
+				</FIELD>
+				<FIELD NAME="PROJ_BUDGET" CAPTION="plcp.budget" INPUTTYPE="TEXT" DATATYPE="NUMBER" SUFFIX="บาท"/>
+
+
+				<FIELD NAME="PROJ_FROM_YEAR" CAPTION="plcp.from_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+				<FIELD NAME="GRID-STRATEGY" INPUTTYPE="DATA-GRID" GRID-ID="GRID-PROJECT-STTGYS" CAPTION="pstg.header"/>
+
+				<FIELD NAME="PROJ_INVOLVERS" INPUTTYPE="TEXTAREA" CAPTION="plcp.involvers" ROWS="4"/>
+				<FIELD NAME="PROJ_INVOLVISSE" INPUTTYPE="TEXTAREA" CAPTION="plcp.involv_issue" ROWS="4"/>
+			</FIELDS>
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VPJM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PJM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+				</SECTION>
+				<SECTION>
+					<HEADER CLASS="form-section-header col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{pstg.header}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="GRID-STRATEGY" LAYOUT_WIDTH="20" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+				<SECTION>
+					<ROW>
+						<FIELD NAME="PROJ_CATE" OFFSET="4" LAYOUT_WIDTH="20"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_KIND" OFFSET="4" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="PROJ_FROM_YEAR" LAYOUT_WIDTH="6"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-STRATEGY">
+					<HEADER CLASS="form-section-header col-24 mg-t-30 border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">ความเชื่อมโยงของโครงการกับประเด็นการยกระดับคะแนนดัชนีการรับรู้การทุจริต(CPI)และแหล่งข้อมูล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-4">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center">ประเด็น/แหล่งข้อมูล</th>
+										<th class="center" style="width: 5em">BF(TI)<br>(1)</th>
+										<th class="center" style="width: 5em">EIU<br>(2)</th>
+										<th class="center" style="width: 5em">GI<br>(3)</th>
+										<th class="center" style="width: 5em">IMD<br>(4)</th>
+										<th class="center" style="width: 5em">PERC<br>(5)</th>
+										<th class="center" style="width: 5em">PRS<br>(6)</th>
+										<th class="center" style="width: 5em">WEF<br>(7)</th>
+										<th class="center" style="width: 5em">WJP<br>(8)</th>
+										<th class="center" style="width: 5em">VDEM<br>(9)</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">1.สินบน</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+									</tr>
+									<tr>
+										<td class="left">2.การขัดกันแห่งผลประโยชน์</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+									</tr>
+									<tr>
+										<td class="left">3.นโยบายของรัฐบาลในการแก้ไขปัญหาการทุจริต</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+									<tr>
+										<td class="left">4.การตรวจสอบเจ้าหน้าที่รัฐ</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+									<tr>
+										<td class="left">5.ความโปร่งใสในระบบงบประมาณและการจัดซื้อจัดจ้าง</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-1">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">1.หลักการและเหตุผล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-2">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">2.วัตถุประสงค์</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-3">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">3.ประโยชน์ที่คาดว่าจะได้รับ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-4">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">4.เป้าหมาย</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-5">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">5.กลุ่มเป้าหมาย</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-6">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">6.พื้นที่ดำเนินการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-7">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">7.กิจกรรมที่จะดำเนินการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">ขั้นตอนการดำเนินงาน</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 1</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 2</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 3</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 4</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2">
+											<button type="button" id="add-btn" class="btn btn-primary btn-round data-grid-add-btn mg-y-5 w-100 white"><i class="fa fa-plus"></i></button>
+										</th>
+									</tr>
+									<tr>
+										<th class="center" style="width: 3em">ต.ค.</th>
+										<th class="center" style="width: 3em">พ.ย.</th>
+										<th class="center" style="width: 3em">ธ.ค.</th>
+										<th class="center" style="width: 3em">ม.ค.</th>
+										<th class="center" style="width: 3em">ก.พ.</th>
+										<th class="center" style="width: 3em">มี.ค.</th>
+										<th class="center" style="width: 3em">เม.ย.</th>
+										<th class="center" style="width: 3em">พ.ค.</th>
+										<th class="center" style="width: 3em">มิ.ย.</th>
+										<th class="center" style="width: 3em">ก.ค.</th>
+										<th class="center" style="width: 3em">ส.ค.</th>
+										<th class="center" style="width: 3em">ก.ย.</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">กิจกรรมที่ ๑ การระดมความคิดเห็นเพื่อ
+											กำหนดประเด็นจัดทำแผนงานและ
+											แนวทางในการขับเคลื่อนเพื่อป้องปราม
+											หรือเฝ้าระวังปัญหาการทุจริตในพื้นที่</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+									<tr>
+										<td class="left">กิจกรรมที่ ๒ การลงพื้นที่เพื่อเฝ้าระวังและ
+											ป้องปรามการทุจริตในพื้นที่ตามนโยบาย
+											ของสำนักงานป.ป.ช.หรือตามประเด็นที่
+											ได้รับแจ้งข้อมูลจากศูนย์ป้องปราม
+											การทุจริตแห่งชาติสำนักงานป.ป.ช.</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-8">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">8.ตัวชี้วัดของผลผลิต/ผลลัพธ์การดำเนินโครงการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">ผลผลิต(Output)/ผลลัพธ์(Outcome)</th>
+										<th class="center" style="width: 12em">ตัวชี้วัด</th>
+										<th class="center" style="width: 12em">ค่าเป้าหมาย</th>
+										<th class="center" style="width: 12em">ระยะเวลา</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2">
+											<button type="button" id="add-btn" class="btn btn-primary btn-round data-grid-add-btn mg-y-5 w-100 white"><i class="fa fa-plus"></i></button>
+										</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left"><b>ผลผลิต(Output)</b><br>
+											รายงานสรุปผลโครงการแก้ไขปัญหา
+											การทุจริตในพื้นที่
+										</td>
+										<td class="center">แนวทางการแก้ไขปัญหา
+											การทุจริตในพื้นที่</td>
+										<td class="center">รายงาน ๑ ฉบับ</td>
+										<td class="center">ไตรมาสที่ ๔</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+
+									<tr>
+										<td class="left"><b>ผลลัพธ์(Outcome)</b><br>
+											หน่วยงานที่เกี่ยวข้องนำแนวทางการแก้ไข
+											ปัญหาการทุจริตไปใช้ในการป้องกัน
+											การทุจริตในพื้นที่เพื่อทำให้คดีทุจริต
+											ในพื้นที่ลดลง
+										</td>
+										<td class="center">จำนวนหน่วยงานที่นำแนวทาง
+											การแก้ไขปัญหาการทุจริตในพื้นที่
+											ไปใช้ในการป้องกันการทุจริต
+											ในพื้นที่่</td>
+										<td class="center">อย่างน้อย ๑ หน่วยงาน</td>
+										<td class="center">ไตรมาสที่ ๔</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-9">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">9.งบประมาณ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_BUDGET" OFFSET="4" LAYOUT_WIDTH="6"/>
+					</ROW>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">งบรายจ่าย</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 1</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 2</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 3</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 4</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2"></th>
+									</tr>
+									<tr>
+										<th class="center" style="width: 3em">ต.ค.</th>
+										<th class="center" style="width: 3em">พ.ย.</th>
+										<th class="center" style="width: 3em">ธ.ค.</th>
+										<th class="center" style="width: 3em">ม.ค.</th>
+										<th class="center" style="width: 3em">ก.พ.</th>
+										<th class="center" style="width: 3em">มี.ค.</th>
+										<th class="center" style="width: 3em">เม.ย.</th>
+										<th class="center" style="width: 3em">พ.ค.</th>
+										<th class="center" style="width: 3em">มิ.ย.</th>
+										<th class="center" style="width: 3em">ก.ค.</th>
+										<th class="center" style="width: 3em">ส.ค.</th>
+										<th class="center" style="width: 3em">ก.ย.</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">งบบริหารจัดการรายเดือน</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+								<tfoot>
+									<tr>
+										<td class="left">รวมงบประมาณรายไตรมาส</td>
+										<td class="right" colspan="3">0</td>
+										<td class="right" colspan="3">0</td>
+										<td class="right" colspan="3">0</td>
+										<td class="right" colspan="3">0</td>
+										<td class="operate-header" style="text-align: center; width: 90px;"></td>
+									</tr>
+								</tfoot>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-10">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">10.ผู้รับผิดชอบโครงการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-13">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">11.ผู้ที่เกี่ยวข้องที่อาจจะได้รับผลกระทบ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_INVOLVERS" LAYOUT_WIDTH="10" OFFSET="4"/>
+						<FIELD NAME="PROJ_INVOLVISSE" LAYOUT_WIDTH="10"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-NOTE-11">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">12.ลักษณะโครงการ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_PHASE" OFFSET="4" LAYOUT_WIDTH="16"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-12">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">13.การติดตามประเมินผล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-REVISE-COMMENT">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">การแก้ไข</h4>]]></HEADER>
+					<ROW TYPE="CONTENT">
+					<![CDATA[
+						<div class="mg-b-16">
+							<div id="FIELD-REVISE_COMMENT" class="form-group col-24 offset-0">
+								<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">รายการแก้ไข</label>
+								<div class="form-col col-24 col-sm-14" data-field="REVISE_COMMENT">
+									<input type="text" name="REVISE_COMMENT" id="REVISE_COMMENT" value="ให้ดำเนินการแก้ไข .........."  input-type="TEXT"  charcase="NORMAL" class="form-control dyn-form-control text" readonly>
+								</div>
+							</div>
+						</div>
+						<div>
+							<div>ประวัติการแก้ไข</div>
+							<ul>
+								<li>แก้ครั้งที่ 1 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 2 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 3 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 4 วันที่ xx/xx/xxxx : ...................................</li>
+							</ul>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							if ($PageCtx.$action === "add") {
+								let projYear = $$("PROJ_YEAR").val();
+								let projType = "PLCY";
+								let btmCode = "01";
+								let stmCode = $user.deptCode;
+								let acmCode = $$("ACM_CODE").val();
+								let projId = `${projYear}x${projType}x${stmCode}x${acmCode}`;
+
+								$$("PROJ_ID").val(projId);
+								$$("PROJ_TYPE").val(projType);
+								$$("STM_CODE").val(stmCode);
+								$$("BTM_CODE").val(btmCode);
+							}
+							Object.assign(data, form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+			</SCRIPT>
+			<BUTTONS>
+				<BUTTON NAME="btnReturn" CAPTION="Return" CLASS="btn btn-primary" SECTION="CENTER" POSITION="AFTER-RESET" ICON-CLASS="fa fa-reply-all">
+				<EVENT ON="click"><![CDATA[(ev)=>{
+									ev.preventDefault();
+									$WebNavi.goto("/bdgt04/bgt0403010");
+								}]]>
+				</EVENT>
+				</BUTTON>
+				<BUTTON NAME="btnButton1" CAPTION="ส่งผู้อำนวยการสำนักพิจารณา" CLASS="btn btn-outline-warning" SECTION="RIGHT"/>
+				<BUTTON NAME="btnButton2" CAPTION="รายละเอียดงบประมาณ" CLASS="btn btn-outline-success" SECTION="LEFT">
+					<EVENT ON="click"><![CDATA[
+						(ev) => {
+							ev.preventDefault();
+							let data = $PageCtx.$data;
+							let projId = data.proj_id;
+							let targetUrl = url("/bdgt04/bgt0403010-project-budget?proj_id=" + projId);
+							data.page_title = $("h4.page-title").html();
+							data.postData = $PageCtx.$Params.get("data");
+							$PageCtx.saveSessionData("budget", data);
+							$PageCtx.saveStorageData("budget#search", {PROJ_ID: projId});
+							$WebNavi.goto(targetUrl);
+						}
+						]]></EVENT>
+				</BUTTON>
+			</BUTTONS>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/routine.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/routine.frml
new file mode 100644
index 0000000..3423ae7
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403010/routine.frml
@@ -0,0 +1,256 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-routine-budget.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PBDG.PROJ_ID
+					, PROJ.PROJ_YEAR
+					, PBDG.PBDG_ID
+					, PBDG.ACM_CODE
+					, BUD.GET_ACTIVITY(PBDG.ACM_CODE) ACM_NAME
+					, PBDG.PBDG_TOTAL
+					, PBDG.PBDG_COUNT
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS PBDG
+						  INNER JOIN PROJECTS PROJ ON PROJ.PROJ_ID=PBDG.PROJ_ID
+				</FROM>
+				<ORDER>ORDER BY PBDG.PROJ_ID,PBDG.PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32" ORIGIN="PBDG.PROJ_ID"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20" ORIGIN="PBDG.ACM_CODE"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.acm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PROJ_PRINCIPLES" CAPTION="project.remak" INPUTTYPE="TEXT" ROWS="3"/>
+				<FIELD NAME="ACM_NAME" CAPTION="project.acm_name" INPUTTYPE="TEXT" EDIT-READONLY="Y"/>
+
+				<SECTION ID="SECT-PROJECT-TARGET">
+					<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_COUNT" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PWMT_UNIT" CAPTION="project.target" INPUTTYPE="TEXT" READONLY="Y"></FIELD>
+					<FIELD NAME="QUOTER_1" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 1" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0101" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0102" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_2" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 2" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0201" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0202" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_3" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 3" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0301" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0302" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_4" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 4" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0401" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0402" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="TOTAL_QT" INPUTTYPE="MULTI-FIELD" CAPTION="project.total" FIELD-SEPARATOR="/" READONLY="Y">
+						<FIELD-LIST>
+							<FIELD NAME="QT_TOTAL_01" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="QT_TOTAL_02" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+				</SECTION>
+
+				<FIELD NAME="GRID-BUDGET" INPUTTYPE="DATA-GRID" GRID-ID="GRID-WORK-BUDGET" ROWS="5" CAPTION="project.budget"/>
+
+				<SECTION ID="SEC-ATTATCH-FILE">
+					<FIELD NAME="FILE_BOX_01" CAPTION="file.upload 1" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_02" CAPTION="file.upload 2" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_03" CAPTION="file.upload 3" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+				</SECTION>
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="6"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="ACM_NAME" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_PRINCIPLES" LAYOUT_WIDTH="18" OFFSET="6"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-TARGET" TYPE="DATA-SECTION" DATASET="DS-PROJECT-TARGETS">
+					<ROW>
+						<FIELD NAME="PWMT_UNIT" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="QUOTER_1" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_2" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_3" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_4" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="TOTAL_QT" LAYOUT_WIDTH="4"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[
+						<h4 class="ml-3 border-bottom-1 col-24">@M{project.budget}</h4>
+						]]></HEADER>
+					<ROW>
+						<FIELD NAME="GRID-BUDGET" LAYOUT_WIDTH="24" OFFSET=""/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-FILE-UPLOAD">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.constructor_attatchment}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-REVISE-COMMENT">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">การแก้ไข</h4>]]></HEADER>
+					<ROW TYPE="CONTENT">
+					<![CDATA[
+						<div class="mg-b-16">
+							<div id="FIELD-REVISE_COMMENT" class="form-group col-24 offset-0">
+								<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">รายการแก้ไข</label>
+								<div class="form-col col-24 col-sm-14" data-field="REVISE_COMMENT">
+									<input type="text" name="REVISE_COMMENT" id="REVISE_COMMENT" value="ให้ดำเนินการแก้ไข .........."  input-type="TEXT"  charcase="NORMAL" class="form-control dyn-form-control text" readonly>
+								</div>
+							</div>
+						</div>
+						<div>
+							<div>ประวัติการแก้ไข</div>
+							<ul>
+								<li>แก้ครั้งที่ 1 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 2 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 3 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 4 วันที่ xx/xx/xxxx : ...................................</li>
+							</ul>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							let acmCount = $$("^QT_TOTAL_0").sum();
+							$$("PBDG_COUNT").val(acmCount);
+							let gridCtx = ($PageCtx.widgets["GRID-BUDGET"]||{})["$GridCtx"];
+							if (gridCtx) {
+								 let bdgTotal = gridCtx.sum_of["pbgi_total"];
+								$$("PBDG_TOTAL").val(bdgTotal);
+							}
+							Object.assign(data,form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+				<INITIALIZE>
+					<![CDATA[
+					     const quoterSum = ()=>{
+						     for (let sect=1; sect <=2; sect++) {
+							     let summary = 0;
+							     for (let qt = 1; qt <= 4; qt++) {
+								     summary += $$(`PTGT_QT_0${qt}0${sect}`).number();
+							     }
+							     $$(`QT_TOTAL_0${sect}`).val(formatNumber(summary));
+						     }
+					     }
+						 $$("^PTGT_QT_").on("change",quoterSum);
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020.frml
new file mode 100644
index 0000000..6c458f4
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020.frml
@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ.PROJ_ID
+					, PROJ.PROJ_TYPE
+					, PROJ.PROJ_YEAR
+					, PROJ.STM_CODE
+					, PROJ.FLOW_TYPE
+					, PROJ.FLOW_TYPE_DESC
+					, PROJ.PJM_CODE, PROJ.PROJ_NAME
+					, PROJ.ACM_CODE, PROJ.ACM_NAME
+					, PROJ.PROJ_SEQ
+					, BGT.FLOW_STATE('STEP-'||TO_CHAR (DBMS_RANDOM.VALUE(2, 4),'FM00')) FLOW_STATE
+					, JDTOTT(SYSDATE - (DBMS_RANDOM.VALUE(3, 10))) STATE_DATE
+					, TO_CHAR (DBMS_RANDOM.VALUE(2, 8),'FM000') LATEST_VER
+				</SELECT>
+				<FROM>
+					FROM (SELECT PROJ.PROJ_ID
+							, PROJ.PROJ_TYPE
+							, TO_CHAR(PROJ.PROJ_YEAR, 'FM0000') PROJ_YEAR
+							, PROJ.STM_CODE
+							, FTYP.RFC_CODE FLOW_TYPE
+							, FTYP.RFC_DESC FLOW_TYPE_DESC
+							, PROJ.PJM_CODE, BUD.GET_PROJECT(PROJ.PJM_CODE) PROJ_NAME
+							, PROJ.ACM_CODE, BUD.GET_ACTIVITY(PROJ.ACM_CODE) ACM_NAME
+							, FTYP.RFC_ORDER PROJ_SEQ
+							FROM REFER_CODE FTYP
+								INNER JOIN REFER_CODE PTYPE ON PTYPE.RFG_GRP = 'PROJ-TYPE' AND PTYPE.RFC_FLAG = FTYP.RFC_CODE
+								INNER JOIN PROJECTS PROJ ON PROJ.PROJ_TYPE = PTYPE.RFC_CODE
+							WHERE FTYP.RFG_GRP = 'FLOW-TYPE' AND FTYP.RFC_CODE != 'GENERAL' AND PROJ.PROJ_YEAR = :PROJ_YEAR AND PROJ.STM_CODE = :STM_CODE
+							UNION ALL
+							SELECT :PROJ_YEAR || 'xGENERALx' || :STM_CODE PROJ_ID
+								, 'GENERAL' PROJ_TYPE
+								, :PROJ_YEAR PROJ_YEAR
+								, :STM_CODE STM_CODE
+								, FTYP.RFC_CODE FLOW_TYPE
+								, FTYP.RFC_DESC FLOW_TYPE_DESC
+								, 'GENERAL' PJM_CODE, FTYP.RFC_DESC PROJ_NAME
+								, 'GENERAL' ACM_CODE, FTYP.RFC_DESC ACM_NAME
+								, FTYP.RFC_ORDER PROJ_SEQ
+							FROM REFER_CODE FTYP
+								WHERE FTYP.RFC_CODE = 'GENERAL'
+							) PROJ
+				</FROM>
+				<ORDER>ORDER BY PROJ_SEQ, PROJ_ID</ORDER>
+			</SQL>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-MASTER">
+			<HEADER NAVI="N" EDIT="N" ADD="N" DELETE="N" VIEW="N"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="FLOW_TYPE_DESC" LABEL="props.type" ALIGN="left" WIDTH="15em">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 text-nowrap"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="PROJ_NAME" LABEL="project.const_name" ALIGN="left">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 row"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="LATEST_VER" LABEL="props.latest_version" ALIGN="center" WIDTH="5em"/>
+				<FIELD NAME="STATE_DATE" LABEL="props.state_date" ALIGN="center" WIDTH="8em"/>
+				<FIELD NAME="FLOW_STATE" LABEL="props.state" ALIGN="center" WIDTH="10em"/>
+
+				<COMMAND-BUTTONS>
+					<BUTTON NAME="btnViewer" CLASS="btn btn-primary btn-viewer" ICON-CLASS="fa fa-file-alt white">
+						<EVENT ON="click"><![CDATA[
+							({ev,row})=>{
+								console.log(row);
+								row.pageTitle = $("h4.page-title").html() + " - "+row["flow_type_desc"];
+								if (row.proj_type === "GENERAL") {
+									$PageCtx.saveSessionData("general", row);
+									$PageCtx.saveStorageData("general#search", {proj_year: row.proj_year});
+									$WebNavi.goto("/bdgt04/bgt0403020-general");
+								} else {
+									$PageCtx.saveSessionData("project", row);
+									let proj = {proj_id : row.proj_id,acm_code : row.acm_code, type: row.proj_type.toLowerCase()};
+									let data = base64(JSON.stringify(proj)) ;
+									let editUrl = `/bdgt04/bgt0403020-project?view&data=${data}`;
+									$WebNavi.goto(editUrl);
+								}
+							}
+							]]></EVENT>
+					</BUTTON>
+				</COMMAND-BUTTONS>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="Y" ALLOW-NO-FILTER="Y">
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="COMBOBOX" SEARCH-ORIGIN="PROJ_YEAR=${VALUE}">
+						<LIST-OPTION TABLE="VL_YEAR" TEXT="#DV_YEAR" VALUE="DV_YEAR" ORDER="DV_YEAR" FIRSTLIST="@{NONE}"/>
+					</FIELD>
+					<FIELD NAME="VERSION" CAPTION="props.versions" INPUTTYPE="COMBOBOX">
+						<LIST-OPTION TABLE="REFER_CODE" TEXT="#RFC_DESC" VALUE="RFC_CODE" ORDER="RFC_ORDER" FILTER="RFG_GRP='PROPS-VERS'" FIRSTLIST="@{NONE}"/>
+					</FIELD>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" VAL_WIDTH="6" CAPT_WIDTH="12" LAYOUT_WIDTH="12"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+		</FORM_BROWSE>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/construct.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/construct.frml
new file mode 100644
index 0000000..8f6b70d
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/construct.frml
@@ -0,0 +1,297 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-construct-budget.frml"></INCLUDE>
+	</INCLUDES>
+
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, PROJ_TYPE
+					, PROJ_YEAR
+					, PJM_CODE
+					, STM_CODE
+					, BTM_CODE
+					, ACM_CODE
+					, BUD.GET_ACTIVITY(ACM_CODE) ACM_NAME
+					, PLAN_TYPE
+					, PROJ_DURATION
+					, PROJ_INST_COUNT
+					, PROJ_START_YEAR
+					, PROJ_END_YEAR
+					, PROJ_FOR_STAFF
+					, PROJ_FROM_YEAR
+					, CREATE_BY
+					, CREATE_TIME
+					, UPDATE_BY
+					, UPDATE_TIME
+				</SELECT>
+				<FROM>FROM PROJECTS</FROM>
+				<FILTER>WHERE STM_CODE = :STM_CODE AND PROJ_TYPE='CNST'</FILTER>
+				<ORDER>ORDER BY PROJ_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PROJ_TYPE" TYPE="TEXT" LABEL="ประเภทโครงการ" WIDTH="25"/>
+				<FIELD NAME="PROJ_YEAR" TYPE="NUMBER" LABEL="ปีงบประมาณ" WIDTH="15"/>
+				<FIELD NAME="PJM_CODE" TYPE="TEXT" LABEL="รหัสโครงการ (BUD)" WIDTH="20"/>
+				<FIELD NAME="STM_CODE" TYPE="TEXT" LABEL="รหัสหน่วยงาน" WIDTH="10"/>
+				<FIELD NAME="BTM_CODE" TYPE="TEXT" LABEL="รหัสประเภทงบประมาณ" WIDTH="10"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20"/>
+				<FIELD NAME="PLAN_TYPE" TYPE="TEXT" LABEL="ประเภทแผน" WIDTH="15"/>
+				<FIELD NAME="PROJ_DURATION" TYPE="NUMBER" LABEL="ระยะเวลาดำเนินการ (วัน)" WIDTH="15"/>
+				<FIELD NAME="PROJ_INST_COUNT" TYPE="NUMBER" LABEL="ระยะเวลาดำเนินการ (วัน)" WIDTH="15"/>
+				<FIELD NAME="PROJ_START_YEAR" TYPE="NUMBER" LABEL="ปีที่เริ่มโครงการ (ก่อสร้าง)" WIDTH="15"/>
+				<FIELD NAME="PROJ_END_YEAR" TYPE="NUMBER" LABEL="ปีที่สิ้นสุดโครงการ (ก่อสร้าง)" WIDTH="15"/>
+				<FIELD NAME="PROJ_FOR_STAFF" TYPE="NUMBER" LABEL="จำนวนบุคลากรที่รองรับ" WIDTH="15"/>
+				<FIELD NAME="PROJ_FROM_YEAR" TYPE="NUMBER" LABEL="ต่อเนื่องจากปี" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-CONST">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_CONST_INFO</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT PROJ_ID
+					, ACM_CODE
+					, PCTI_ADDRESS
+					, PCTI_TUMBON
+					, PCTI_AMPUR
+					, PCTI_PROVINCE
+					, PCTI_ADDR_NOTE
+					, PCTI_AREA
+					, PCTI_EMP_COUNT
+					, PCTI_CHK_LOCATION
+					, PCTI_CHK_DOCUMENT
+					, PCTI_REMARK
+					, CREATE_BY
+					, JDTOE(CREATE_TIME) CREATE_TIME, CREATE_TIME DT_CREATE_TIME
+					, UPDATE_BY
+					, JDTOE(UPDATE_TIME) UPDATE_TIME, UPDATE_TIME DT_UPDATE_TIME
+				</SELECT>
+				<FROM>FROM PROJECT_CONST_INFO</FROM>
+				<ORDER>ORDER BY PROJ_ID, ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="project.id" WIDTH="50"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="project.acm_code" WIDTH="20"/>
+				<FIELD NAME="PCTI_ADDRESS" TYPE="TEXT" LABEL="pcti.address" WIDTH="200"/>
+				<FIELD NAME="PCTI_TUMBON" TYPE="TEXT" LABEL="pcti.tumbon" WIDTH="200"/>
+				<FIELD NAME="PCTI_AMPUR" TYPE="TEXT" LABEL="pcti.ampur" WIDTH="200"/>
+				<FIELD NAME="PCTI_PROVINCE" TYPE="TEXT" LABEL="pcti.province" WIDTH="200"/>
+				<FIELD NAME="PCTI_ADDR_NOTE" TYPE="TEXT" LABEL="pcti.addr_note" WIDTH="1000"/>
+				<FIELD NAME="PCTI_AREA" TYPE="NUMBER" LABEL="pcti.area" WIDTH="15"/>
+				<FIELD NAME="PCTI_EMP_COUNT" TYPE="NUMBER" LABEL="pcti.emp_count" WIDTH="15"/>
+				<FIELD NAME="PCTI_CHK_LOCATION" TYPE="TEXT" LABEL="pcti.chk_location" WIDTH="500"/>
+				<FIELD NAME="PCTI_CHK_DOCUMENT" TYPE="TEXT" LABEL="pcti.chk_document" WIDTH="500"/>
+				<FIELD NAME="PCTI_REMARK" TYPE="TEXT" LABEL="pcti.remark" WIDTH="2000"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="sys.create_by" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="sys.create_time" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="sys.update_by" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="sys.update_time" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RESET="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PJM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="STM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="BTM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PLAN_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_DURATION" INPUTTYPE="HIDDEN"/>
+
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.const_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_NAME" CAPTION="project.const_name" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PROJ_START_YEAR" CAPTION="project.start_year" INPUTTYPE="TEXT" DATATYPE="NUMTEXT" ALIGN="center"/>
+				<FIELD NAME="PROJ_END_YEAR" CAPTION="project.end_year" INPUTTYPE="TEXT" DATATYPE="NUMTEXT" ALIGN="center"/>
+				<FIELD NAME="PROJ_DURATION" CAPTION="project.duration" INPUTTYPE="TEXT" DATATYPE="NUMBER" ALIGN="center" DECIMAL="0" SUFFIX="day"/>
+				<FIELD NAME="PROJ_INST_COUNT" CAPTION="project.inst_count" INPUTTYPE="TEXT" DATATYPE="NUMTEXT" ALIGN="center" REQUIRE="Y"/>
+
+				<FIELD NAME="BUDGET_YEAR_01" CAPTION="2567" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="BUDGET_YEAR_02" CAPTION="2568" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="BUDGET_YEAR_03" CAPTION="2569" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="BUDGET_YEAR_04" CAPTION="2570" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="BUDGET_YEAR_05" CAPTION="2571" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+				<SECTION ID="SECT-PROJECT-CONST">
+					<FIELD NAME="PCTI_ADDRESS" CAPTION="pcti.address" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_TUMBON" CAPTION="pcti.tumbon" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_AMPUR" CAPTION="pcti.ampur" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_PROVINCE" CAPTION="pcti.province" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_ADDR_NOTE" CAPTION="pcti.addr_note" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_AREA" CAPTION="pcti.area" INPUTTYPE="TEXT" DATATYPE="NUMBER" SUFFIX="segtor"/>
+					<FIELD NAME="PCTI_EMP_COUNT" CAPTION="pcti.emp_count" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+					<FIELD NAME="PCTI_CHK_LOCATION" CAPTION="pcti.chk_location" INPUTTYPE="CHECKBOXGROUP">
+						<LIST-OPTION TABLE="REFER_CODE" VALUE="RFC_CODE" TEXT="RFC_DESC" FILTER="RFG_GRP='CNT-PAREA'" COLUMN="4" ORDER="RFC_ORDER"/>
+					</FIELD>
+					<FIELD NAME="PCTI_CHK_DOCUMENT" CAPTION="pcti.chk_document" INPUTTYPE="CHECKBOXGROUP">
+						<LIST-OPTION TABLE="REFER_CODE" VALUE="RFC_CODE" TEXT="RFC_DESC" FILTER="RFG_GRP='CNT-PDOC'" COLUMN="4" ORDER="RFC_ORDER"/>
+					</FIELD>
+					<FIELD NAME="PCTI_REMARK" CAPTION="pcti.remark" INPUTTYPE="TEXTAREA" ROWS="3"/>
+				</SECTION>
+
+				<FIELD NAME="GRID-BUDGET" INPUTTYPE="DATA-GRID" GRID-ID="GRID-CONST-BUDGET" ROWS="5" CAPTION="project.budget"/>
+				<SECTION ID="SEC-ATTATCH-FILE">
+					<FIELD NAME="FILE_BOX_01" CAPTION="แบบ/ประมาณการราคาอาคารสำนักงาน" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_02" CAPTION="หนังสืออนุญาตให้ใช้ที่ดิน ได้มาซึ่งกรรมสิทธิ์ในที่ดิน" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_03" CAPTION="ผังบริเวณ ประมาณราคาผังบริเวณ สิ่งก่อสร้างประกอบ" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_04" CAPTION="ประมาณการถมดิน/รื้อถอนอาคาร/กำแพงกันดิน ฯลฯ (ถ้ามี)" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_05" CAPTION="ประมาณการขยายเขตไฟฟ้า ขยายเขตประปา" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+				</SECTION>
+
+			</FIELDS>
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_NAME" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_EMP_COUNT" LAYOUT_WIDTH="4" OFFSET="4"/>
+						<FIELD NAME="PROJ_DURATION" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PROJ_INST_COUNT" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PROJ_START_YEAR" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PROJ_END_YEAR" LAYOUT_WIDTH="4"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-CONST" DATASET="DS-PROJECT-CONST" AUTO-INSERT="Y" TYPE="DATA-SECTION">
+					<HEADER CLASS="col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{project.year_budgets}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="BUDGET_YEAR_01" LAYOUT_WIDTH="4" OFFSET="4"/>
+						<FIELD NAME="BUDGET_YEAR_02" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="BUDGET_YEAR_03" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="BUDGET_YEAR_04" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="BUDGET_YEAR_05" LAYOUT_WIDTH="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-PROJECT-CONST" DATASET="DS-PROJECT-CONST" AUTO-INSERT="Y" TYPE="DATA-SECTION">
+					<HEADER CLASS="col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[
+						<h4 class="ml-3 col-24">@M{pcti.location_info}</h4>
+						]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PCTI_ADDRESS" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_TUMBON" LAYOUT_WIDTH="4" OFFSET="4"/>
+						<FIELD NAME="PCTI_AMPUR" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PCTI_PROVINCE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PCTI_AREA" LAYOUT_WIDTH="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_ADDR_NOTE" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_CHK_LOCATION" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_CHK_DOCUMENT" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_REMARK" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.budget}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="GRID-BUDGET" LAYOUT_WIDTH="24" OFFSET=""/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.constructor_attatchment}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="10" OFFSET="4"/>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="10"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="10" OFFSET="4"/>
+						<FIELD NAME="FILE_BOX_04" LAYOUT_WIDTH="10"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_05" LAYOUT_WIDTH="10" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+			</LAYOUT>
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE>
+						<![CDATA[
+						({form, data}) => {
+							console.log("before save data ...");
+							if ($PageCtx.$action === "add") {
+								let projYear = $$("PROJ_YEAR").val();
+								let projType = "CNST";
+								let stmCode = $user.deptCode;
+								let pjmCode = "B.2.01";
+								let btmCode = "01";
+								let acmCode = $$("ACM_CODE").val();
+
+								let projId = `${projYear}x${projType}x${stmCode}x${pjmCode}x${btmCode}x${acmCode}`;
+
+								$$("PROJ_ID").val(projId);
+								$$("PROJ_TYPE").val("CONST");
+								$$("STM_CODE").val(stmCode);
+								$$("PJM_CODE").val(pjmCode);
+								$$("BTM_CODE").val(btmCode);
+								$$("AC_CODE").val(acmCode);
+							}
+							//update data to save
+							Object.assign(data, $PageCtx.$form.jsonData());
+						}
+						]]>
+					</BEFORE-SAVE>
+				</EVENTS>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/equipt.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/equipt.frml
new file mode 100644
index 0000000..f0e90dc
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/equipt.frml
@@ -0,0 +1,314 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PBDG.PROJ_ID
+							, PBDG.PBDG_ID
+							, PBDG.ACM_CODE
+							, BUD.GET_ACTIVITY(PBDG.ACM_CODE) ACM_NAME
+							, PBDG.PBDG_TOTAL
+							, PBDG.PBDG_COUNT
+							, PBDG.PBDG_ASSET_TYPE
+							, PBDG.PBDG_REASON
+							, PMAS.PROJ_YEAR
+							, PMAS.STM_CODE
+							, PMAS.PROJ_YEAR||'/'||PMAS.STM_CODE||'/'||PBDG.PROJ_ID FILEPATH
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS PBDG
+						  INNER JOIN PROJECTS PMAS ON PMAS.PROJ_ID = PBDG.PROJ_ID
+				</FROM>
+				<ORDER>ORDER BY PROJ_ID,PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32" ORIGIN="PBDG.PROJ_ID"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32" ORIGIN="PBDG.PROJ_ID"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20" ORIGIN="PBDG.ACM_CODE"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+				<FIELD NAME="PBDG_ASSET_TYPE" TYPE="TEXT" LABEL="ประเภทครุภัณฑ์" WIDTH="25"/>
+				<FIELD NAME="PBDG_REASON" TYPE="TEXT" LABEL="เหตุผลในการจัดหา" WIDTH="2000"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+
+		<DATASET ID="DS-BUDGET-ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, PBDG_ID
+					, BGM_CODE
+					, PBGI_QT_01
+					, PBGI_QT_02
+					, PBGI_QT_03
+					, PBGI_QT_04
+					, PBGI_QTY
+					, PBGI_COST
+					, PBGI_FREQ
+					, PBGI_ASSET_TYPE
+					, PBGI_REPLACE
+					, PBGI_ADDITION
+					, PBGI_ACQUIRE
+					, PBGI_TOTAL
+					, PBGI_REASON
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGET_ITEMS</FROM>
+				<ORDER>ORDER BY PROJ_ID,BGM_CODE,PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="pbgi.id" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="pbgi.pbdg_id" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="pbgi.bgm_code" WIDTH="20"/>
+				<FIELD NAME="PBGI_QT_01" TYPE="NUMBER" LABEL="pwbg.quotr_01" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_02" TYPE="NUMBER" LABEL="pwbg.quotr_02" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_03" TYPE="NUMBER" LABEL="pwbg.quotr_03" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_04" TYPE="NUMBER" LABEL="pwbg.quotr_04" WIDTH="15"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="pbgi.qty" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="pbgi.cost" WIDTH="15"/>
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="pbgi.freq" WIDTH="10"/>
+				<FIELD NAME="PBGI_ASSET_TYPE" TYPE="TEXT" LABEL="pbgi.asset_type" WIDTH="10"/>
+				<FIELD NAME="PBGI_REPLACE" TYPE="NUMBER" LABEL="pbgi.replace" WIDTH="10"/>
+				<FIELD NAME="PBGI_ADDITION" TYPE="NUMBER" LABEL="pbgi.addition" WIDTH="10"/>
+				<FIELD NAME="PBGI_ACQUIRE" TYPE="NUMBER" LABEL="pbgi.acquire" WIDTH="10"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="pbgi.total" WIDTH="15"/>
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="pbgi.reason" WIDTH="4000"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="sys.create_by" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="sys.create_time" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="sys.update_by" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="sys.update_time" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,PBDG_ID" DETAIL-FIELDS="PROJ_ID,PBDG_ID"/>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.equipt_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_NAME" CAPTION="project.equipt_name" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PBDG_ASSET_TYPE" CAPTION="pbge.asset_type" INPUTTYPE="COMBOBOX" REQUIRE="Y">
+					<LIST-OPTION TABLE="REFER_CODE" TEXT="RFC_DESC" VALUE="RFC_CODE" ORDER="RFC_ORDER" FILTER="RFG_GRP='ASSET-TYPE'" FIRSTLIST="@{CAPTION}"/>
+				</FIELD>
+				<FIELD NAME="PBDG_REASON" CAPTION="pbge.reason" INPUTTYPE="TEXT" />
+
+				<FIELD NAME="FILE_BOX_01" CAPTION="pbge.quotaion_file 1" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+					<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+						UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+						DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+				</FIELD>
+				<FIELD NAME="FILE_BOX_02" CAPTION="pbge.quotaion_file 2" INPUTTYPE="FILE-BOX">
+					<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+						UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+						DEFAULT-NAME="@{filepath}/@{acm_code}/file-02"/>
+				</FIELD>
+				<FIELD NAME="FILE_BOX_03" CAPTION="pbge.quotaion_file 3" INPUTTYPE="FILE-BOX">
+					<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+						UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+						DEFAULT-NAME="@{filepath}/@{acm_code}/file-03"/>
+				</FIELD>
+
+				<SECTION ID="SECT-PROJECT-TARGET">
+					<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_COUNT" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PWMT_UNIT" CAPTION="project.unit" INPUTTYPE="TEXT" READONLY="Y"></FIELD>
+					<FIELD NAME="PTGT_QT_0101" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.quoter 1"/>
+					<FIELD NAME="PTGT_QT_0201" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.quoter 2"/>
+					<FIELD NAME="PTGT_QT_0301" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.quoter 3"/>
+					<FIELD NAME="PTGT_QT_0401" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.quoter 4"/>
+					<FIELD NAME="QT_TOTAL_01" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.total" READONLY="Y"/>
+				</SECTION>
+
+				<SECTION ID="SECT-BUDGET-ITEMS">
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-EQUIPT-BUDGET" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div><label class="offset-${data.node_level}">[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="PBGI_QT_01" CAPTION="pbge.origin" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+					<FIELD NAME="PBGI_REPLACE" CAPTION="pbge.replace" INPUTTYPE="TEXT" DATATYPE="NUMBER" CLASS-NAME="equipt-qty equipt-item"/>
+					<FIELD NAME="PBGI_ADDITION" CAPTION="pbge.addition" INPUTTYPE="TEXT" DATATYPE="NUMBER" CLASS-NAME="equipt-qty equipt-item"/>
+					<FIELD NAME="PBGI_ACQUIRE" CAPTION="pbge.acquire" INPUTTYPE="TEXT" DATATYPE="NUMBER" CLASS-NAME="equipt-qty equipt-item"/>
+					<FIELD NAME="PBGI_QTY" CAPTION="pbge.qty" INPUTTYPE="TEXT" DATATYPE="NUMBER" READONLY="Y" CLASS-NAME="equipt-item"/>
+
+					<FIELD NAME="PBGI_COST" CAPTION="pbge.cost" INPUTTYPE="TEXT" DATATYPE="NUMBER" CLASS-NAME=" equipt-item"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="pbge.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" READONLY="Y"/>
+				</SECTION>
+
+
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_NAME" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBDG_ASSET_TYPE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PBDG_REASON" LAYOUT_WIDTH="18"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-PROJECT-BUTGET" TYPE="DATA-SECTION" DATASET="DS-BUDGET-ITEMS">
+					<ROW ID="ROW-BUDGET-DATA">
+						<FIELD NAME="PBGI_QT_01" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PBGI_REPLACE" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_ADDITION" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_ACQUIRE" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_QTY" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_COST" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="4" OFFSET="4"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="14"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-PROJECT-TARGET" TYPE="DATA-SECTION" DATASET="DS-PROJECT-TARGETS">
+					<HEADER CLASS="col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{project.target}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PTGT_QT_0101" LAYOUT_WIDTH="3" OFFSET="4"/>
+						<FIELD NAME="PTGT_QT_0201" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PTGT_QT_0301" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PTGT_QT_0401" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QT_TOTAL_01" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PWMT_UNIT" LAYOUT_WIDTH="3"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-QUOTATION-FILE">
+					<HEADER CLASS="col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{pbge.quotaion_file}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="12" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="12" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="12" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+
+			<SCRIPT>
+				<DECLARATION>
+					const equiptQty = $$(".equipt-qty");
+					const equiptItem = $$(".equipt-item");
+					const txtEquiptQty = $$("PBGI_QTY");
+					const txtEquiptCost = $$("PBGI_COST");
+					const txtEquiptTotal = $$("PBGI_TOTAL");
+				</DECLARATION>
+
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							$$("PBDG_COUNT").val(txtEquiptQty.number());
+							$$("PBDG_TOTAL").val(txtEquiptTotal.number());
+
+							Object.assign(data, form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+
+				<INITIALIZE>
+					<![CDATA[
+					const quoterSum = () => {
+						let summary = 0;
+						for (let qt = 1; qt <= 4; qt++) {
+							summary += $$(`PTGT_QT_0${qt}01`).number();
+						}
+						$$(`QT_TOTAL_01`).val(formatNumber(summary));
+					}
+
+					$$("^PTGT_QT_").on("change", quoterSum);
+
+					const equiptSum = ()=>{
+						let sumEquipt = equiptQty.sum();
+						txtEquiptQty.val(formatNumber(sumEquipt));
+						let equiptCost = txtEquiptCost.number();
+						txtEquiptTotal.val(formatNumber(sumEquipt*equiptCost));
+					}
+					equiptItem.on("change",equiptSum);
+
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/general.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/general.frml
new file mode 100644
index 0000000..d78156d
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/general.frml
@@ -0,0 +1,265 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-construct-budget.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ.PROJ_ID
+					, PROJ.PROJ_TYPE
+					, PROJ.PROJ_YEAR
+					, PROJ.PJM_CODE
+					, PROJ.STM_CODE
+					, PROJ.BTM_CODE
+					, PROJ.ACM_CODE
+					, BUD.GET_ACTIVITY(PROJ.ACM_CODE) ACM_NAME
+					, PROJ.PLAN_TYPE
+					, PROJ.PROJ_DURATION
+					, PROJ.PROJ_START_YEAR
+					, PROJ.PROJ_END_YEAR
+					, PROJ.PROJ_FOR_STAFF
+
+					, PROJ.PROJ_FROM_YEAR
+					, 0 BDGT_TOTAL
+				</SELECT>
+				<FROM>FROM PROJECTS PROJ
+						   INNER JOIN REFER_CODE RFC ON RFC.RFG_GRP='PROJ-TYPE' AND RFC.RFC_CODE=PROJ.PROJ_TYPE AND RFC.RFC_FLAG = 'GENERAL'
+				</FROM>
+				<FILTER>WHERE STM_CODE = :STM_CODE AND PROJ.PROJ_YEAR = :PROJ_YEAR</FILTER>
+				<ORDER>ORDER BY RFC.RFC_ORDER, PROJ.PROJ_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PROJ_TYPE" TYPE="TEXT" LABEL="ประเภทโครงการ" WIDTH="25"/>
+				<FIELD NAME="PROJ_YEAR" TYPE="NUMBER" LABEL="ปีงบประมาณ" WIDTH="15"/>
+				<FIELD NAME="PJM_CODE" TYPE="TEXT" LABEL="รหัสโครงการ (BUD)" WIDTH="20"/>
+				<FIELD NAME="STM_CODE" TYPE="TEXT" LABEL="รหัสหน่วยงาน" WIDTH="10"/>
+				<FIELD NAME="BTM_CODE" TYPE="TEXT" LABEL="รหัสประเภทงบประมาณ" WIDTH="10"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20"/>
+				<FIELD NAME="PLAN_TYPE" TYPE="TEXT" LABEL="ประเภทแผน" WIDTH="15"/>
+				<FIELD NAME="PROJ_DURATION" TYPE="NUMBER" LABEL="ระยะเวลาดำเนินการ (วัน)" WIDTH="15"/>
+				<FIELD NAME="PROJ_START_YEAR" TYPE="NUMBER" LABEL="ปีที่เริ่มโครงการ (ก่อสร้าง)" WIDTH="15"/>
+				<FIELD NAME="PROJ_END_YEAR" TYPE="NUMBER" LABEL="ปีที่สิ้นสุดโครงการ (ก่อสร้าง)" WIDTH="15"/>
+				<FIELD NAME="PROJ_FOR_STAFF" TYPE="NUMBER" LABEL="จำนวนบุคลากรที่รองรับ" WIDTH="15"/>
+
+				<FIELD NAME="PROJ_FROM_YEAR" TYPE="NUMBER" LABEL="ต่อเนื่องจากปี" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<SUBDATASETS>
+				<SUBDATASET NAME="ACTIVITIES" DATASET-ID="DS-ACTIVITY-TREE" LINK-FIELDS="PROJ_ID"/>
+			</SUBDATASETS>
+		</DATASET>
+		<DATASET ID="DS-ACTIVITY-TREE">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>V_ACTIVITY_TREE</TABLENAME>
+			<SQL>
+				<SELECT>
+					SELECT PACT.PROJ_ID
+					, PACT.PROJ_YEAR
+					, PACT.PROJ_TYPE
+					, PACT.PROJ_GROUP
+					, ACTT.ACM_CODE
+					, ACTT.ACM_NAME
+					, ACTT.ACM_SEQ
+					, ACTT.NODE_LEVEL+1 NODE_LEVEL
+					, ACTT.MAIN_NODE
+					, ACTT.ACM_UNIT
+					, ACTT.ACM_START_YEAR
+					, ACTT.ACM_END_YEAR
+					, ACTT.NODE_TYPE
+					, PACT.BDGT_COUNT
+					, PACT.BDGT_TOTAL
+				</SELECT>
+				<FROM>
+					FROM BGT.V_ACTIVITY_TREE ACTT
+						 INNER JOIN (SELECT DISTINCT ACM.ACM_CODE
+									   FROM BUD.ACTIVITY_M ACM
+									        INNER JOIN BUD.ACTIVITY_CTRL_H ACH ON ACM.ACM_CODE = ACH.ACH_CODE
+											START WITH ACM.ACM_CODE IN (SELECT ACM_CODE FROM V_PROJECT_ACTIVITY PACT WHERE PACT.PROJ_ID = :PROJ_ID)
+											CONNECT BY PRIOR ACH.ACH_CTRL_CODE = ACH.ACH_CODE) FLTR ON FLTR.ACM_CODE = ACTT.ACM_CODE
+						LEFT OUTER JOIN V_PROJECT_ACTIVITY PACT ON PACT.ACM_CODE = ACTT.ACM_CODE AND PACT.PROJ_ID = :PROJ_ID
+				</FROM>
+				<ORDER>
+					ORDER BY ACTT.ACM_SEQ
+				</ORDER>
+			</SQL>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-MASTER">
+			<HEADER NAVI="N" EDIT="N" ADD="N" DELETE="N" VIEW="N"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="ACM_CODE" LABEL="project.const_code" ALIGN="left">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 row text-nowrap"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="ACM_NAME" LABEL="project.const_name" ALIGN="left">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 row text-nowrap"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="BDGT_COUNT" LABEL="pbdg.acm_count" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[(value, row, idx) => {
+							if (row["node_type"] === "D") {
+								return `<div class="col-24 text-nowrap">${formatNumber(value)} ${row["acm_unit"]}</div>`;
+								// return  formatNumber(value)+" "+row["acm_unit"];
+							} else {
+								return ""
+							}
+						}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="BDGT_TOTAL" LABEL="project.bgt_amount" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[(value, row, idx) => {return formatNumber(value);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<COMMAND-BUTTONS>
+					<BUTTON-X NAME="btnEditor" CLASS="btn btn-warning btn-editor" ICON-CLASS="fa fa-edit white">
+						<FILTER><![CDATA[({$ctx,row})=>{return ["D"].includes(row["node_type"]);}]]></FILTER>
+						<EVENT ON="click"><![CDATA[
+							({ev, row}) => {
+								console.log(row);
+								$PageCtx.saveSessionData("edit", row);
+								let proj = {proj_id : row.proj_id,acm_code : row.acm_code, type: row.proj_type.toLowerCase()};
+								let data = base64(JSON.stringify(proj)) ;
+								let editUrl = `/bdgt04/bgt0403020-general?edit&data=${data}`;
+								$WebNavi.goto(editUrl);
+							}
+							]]></EVENT>
+					</BUTTON-X>
+					<BUTTON NAME="btnViewer" CLASS="btn btn-primary btn-viewer" ICON-CLASS="fa fa-file-alt white">
+						<FILTER><![CDATA[({$ctx,row})=>{return ["D"].includes(row["node_type"]);}]]></FILTER>
+						<EVENT ON="click"><![CDATA[
+							({ev, row}) => {
+								console.log(row);
+								$PageCtx.saveSessionData("edit", row);
+								let proj = {proj_id : row.proj_id,acm_code : row.acm_code, type: row.proj_type.toLowerCase()};
+								let data = base64(JSON.stringify(proj)) ;
+								let editUrl = `/bdgt04/bgt0403020-general?view&data=${data}`;
+								$WebNavi.goto(editUrl);
+							}
+							]]></EVENT>
+					</BUTTON>
+				</COMMAND-BUTTONS>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="N" ALLOW-NO-FILTER="Y">
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="VERSION" CAPTION="props.version" INPUTTYPE="COMBOBOX" DATATYPE="TEXT">
+						<LIST-OPTION TABLE="VL_VERSIONS" TEXT="VER_NAME" VALUE="VERSION" FILTER="VERSION &lt; 6" ORDER="VERSION DESC" FIRSTLIST="@{NONE}"></LIST-OPTION>
+					</FIELD>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="12" VAL_WIDTH="5" CAPT_WIDTH="14"/>
+						<FIELD NAME="VERSION" LAYOUT_WIDTH="12" VAL_WIDTH="5" CAPT_WIDTH="6"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+			<FOOTER SHOW="Y"/>
+			<SCRIPT>
+				<EVENTS>
+					<AFTER-LOAD>
+						<![CDATA[
+							($ctx,data)=>{
+								let src = [...data]; // clone data to src
+									data.splice(0); // clear data element
+
+								let id = 1;
+								for (let item of src) {
+									item["node_type"] = "P";
+									item["node_level"] = "0";
+									item["$itemno"] = id++;
+									data.push(item);
+									if (isArray(item.activities)) {
+										for (let sitem of item.activities) {
+											sitem["$itemno"] = id++;
+											data.push(sitem);
+										}
+									}
+								}
+								// console.log(data);
+							}
+					]]>
+					</AFTER-LOAD>
+				</EVENTS>
+
+				<INITIALIZE>
+					<![CDATA[
+					{
+						// console.log("init activity grid");
+						const fieldFormat = (value,row) => {
+							if (row["node_type"] === "P") {
+								return "";
+							}
+							return formatNumber(value, 0);
+						}
+						const summary = (field, data) => {
+							let total = 0;
+							for (let id=0; id < data.length; id++) {
+								let row = data[id];
+								if (row["node_type"] === "D") {
+									total += (+row[field]) || 0;
+								}
+							}
+							if ($PageCtx.$dataGrid.load && !$PageCtx.$dataGrid.reload) {
+								$PageCtx.$dataGrid.reload = true;
+								for (let id=data.length-1; id>=0; id--) {
+									let row = data[id];
+									if (row["node_type"] === "C") {
+										let grpTotal = 0;
+										let mainNode = row["acm_code"];
+										let nodes = [];
+										nodes.push($$("main_node="+mainNode,data));
+										for (let node of nodes.flat()) {
+											grpTotal += +node[field];
+										}
+										data[id][field] = grpTotal;
+									}
+								}
+								$PageCtx.$dataGrid.load(data);
+								$PageCtx.$dataGrid.reload = false;
+							}
+							return formatNumber(total, 0);
+						}
+
+						const $ctx = $PageCtx;
+						const gridFields = [$$("field=bdgt_total", $ctx.gridColumn.flat())].flat();
+						for (let field of gridFields) {
+							field.formatter = fieldFormat;
+							field.footerFormatter = function (data) {
+								return summary(this.field, data);
+							}
+						}
+
+						$ctx.rowStyle = function (row, index) {
+							if (row["node_type"] === "C") {
+								return {classes : `group-level-${row["node_level"]}`};
+							}
+							if (row["node_type"] === "P") {
+								return {classes : `group-level-0`};
+							}
+							return {}; // Default style for other rows
+						}
+					}
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+
+
+		</FORM_BROWSE>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/manage.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/manage.frml
new file mode 100644
index 0000000..259b98b
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/manage.frml
@@ -0,0 +1,227 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-manage-budget.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PBDG.PROJ_ID
+					, PROJ.PROJ_YEAR
+					, PBDG.PBDG_ID
+					, PBDG.ACM_CODE
+					, BUD.GET_ACTIVITY(PBDG.ACM_CODE) ACM_NAME
+					, PBDG.PBDG_TOTAL
+					, PBDG.PBDG_COUNT
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS PBDG
+					INNER JOIN PROJECTS PROJ ON PROJ.PROJ_ID=PBDG.PROJ_ID
+				</FROM>
+				<ORDER>ORDER BY PBDG.PROJ_ID,PBDG.PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32" ORIGIN="PBDG.PROJ_ID"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20" ORIGIN="PBDG.ACM_CODE"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+			</FIELDS>
+		</DATASET>
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+	</DATASETS>
+	<FORM>
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.acm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PROJ_PRINCIPLES" CAPTION="project.remak" INPUTTYPE="TEXT" ROWS="3"/>
+				<FIELD NAME="ACM_NAME" CAPTION="project.acm_name" INPUTTYPE="TEXT" EDIT-READONLY="Y"/>
+
+				<SECTION ID="SECT-PROJECT-TARGET">
+					<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_COUNT" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PWMT_UNIT" CAPTION="project.target" INPUTTYPE="TEXT" READONLY="Y"></FIELD>
+					<FIELD NAME="QUOTER_1" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 1" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0101" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0102" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_2" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 2" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0201" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0202" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_3" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 3" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0301" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0302" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_4" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 4" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0401" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0402" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="TOTAL_QT" INPUTTYPE="MULTI-FIELD" CAPTION="project.total" FIELD-SEPARATOR="/" READONLY="Y">
+						<FIELD-LIST>
+							<FIELD NAME="QT_TOTAL_01" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="QT_TOTAL_02" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+				</SECTION>
+
+				<FIELD NAME="GRID-BUDGET" INPUTTYPE="DATA-GRID" GRID-ID="GRID-WORK-BUDGET" ROWS="5" CAPTION="project.budget"/>
+
+				<SECTION ID="SEC-ATTATCH-FILE">
+					<FIELD NAME="FILE_BOX_01" CAPTION="file.upload 1" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_02" CAPTION="file.upload 2" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_03" CAPTION="file.upload 3" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+				</SECTION>
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="6"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="ACM_NAME" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_PRINCIPLES" LAYOUT_WIDTH="18" OFFSET="6"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-TARGET" TYPE="DATA-SECTION" DATASET="DS-PROJECT-TARGETS">
+					<ROW>
+						<FIELD NAME="PWMT_UNIT" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="QUOTER_1" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_2" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_3" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_4" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="TOTAL_QT" LAYOUT_WIDTH="4"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[
+						<h4 class="ml-3 border-bottom-1 col-24">@M{project.budget}</h4>
+						]]></HEADER>
+					<ROW>
+						<FIELD NAME="GRID-BUDGET" LAYOUT_WIDTH="24" OFFSET=""/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-FILE-UPLOAD">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.constructor_attatchment}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							let acmCount = $$("^QT_TOTAL_0").sum();
+							$$("PBDG_COUNT").val(acmCount);
+							let gridCtx = ($PageCtx.widgets["GRID-BUDGET"]||{})["$GridCtx"];
+							if (gridCtx) {
+								 let bdgTotal = gridCtx.sum_of["pbgi_total"];
+								$$("PBDG_TOTAL").val(bdgTotal);
+							}
+							Object.assign(data,form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+				<INITIALIZE>
+					<![CDATA[
+					     const quoterSum = ()=>{
+						     for (let sect=1; sect <=2; sect++) {
+							     let summary = 0;
+							     for (let qt = 1; qt <= 4; qt++) {
+								     summary += $$(`PTGT_QT_0${qt}0${sect}`).number();
+							     }
+							     $$(`QT_TOTAL_0${sect}`).val(formatNumber(summary));
+						     }
+					     }
+						 $$("^PTGT_QT_").on("change",quoterSum);
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/project-budget.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/project-budget.frml
new file mode 100644
index 0000000..18f55d8
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/project-budget.frml
@@ -0,0 +1,321 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-proj-budget.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-BROWSER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>V_ACTIVITY_TREE</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT :PROJ_ID PROJ_ID
+					, ACTT.ACM_CODE
+					, ACTT.ACM_NAME
+					, ACTT.ACM_SEQ
+					, ACTT.NODE_LEVEL
+					, ACTT.MAIN_NODE
+					, ACTT.ACM_UNIT
+					, ACTT.ACM_START_YEAR
+					, ACTT.ACM_END_YEAR
+					, ACTT.NODE_TYPE
+					, PJBG.PBDG_TOTAL PBDG_TOTAL
+					, PJBG.PBDG_COUNT  PBDG_COUNT
+				</SELECT>
+				<FROM>
+					FROM BGT.V_ACTIVITY_TREE ACTT
+						 INNER JOIN ( SELECT DISTINCT ACM.ACM_CODE
+										FROM BUD.ACTIVITY_M ACM
+											 INNER JOIN BUD.ACTIVITY_CTRL_H ACH ON ACM.ACM_CODE = ACH.ACH_CODE
+										START WITH ACM.ACM_CODE IN (SELECT ACM_CODE FROM PROJECT_BUDGETS PJBD WHERE PROJ_ID = :PROJ_ID)
+									  CONNECT BY PRIOR ACH.ACH_CTRL_CODE = ACH.ACH_CODE) FLTR ON FLTR.ACM_CODE = ACTT.ACM_CODE
+						 LEFT OUTER JOIN PROJECT_BUDGETS PJBG ON PJBG.PROJ_ID=:PROJ_ID AND PJBG.ACM_CODE = ACTT.ACM_CODE
+				</FROM>
+				<ORDER>ORDER BY ACTT.ACM_SEQ</ORDER>
+			</SQL>
+		</DATASET>
+
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, PBDG_ID
+					, ACM_CODE
+					, PBDG_TOTAL
+					, PBDG_COUNT
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-BROWSER">
+			<HEADER NAVI="Y" ADD="N" EDIT="N" DELETE="N" VIEW="Y"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="ACM_CODE" LABEL="project.acm_code" ALIGN="left" WIDTH="15em">
+					<DATA-FORMATTER><![CDATA[
+						(value,row,idx)=>{
+							return $(`<div class="col-24 row"><div class="col offset-${row.node_level}">${value}</div></div>`);
+						}
+						]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="ACM_NAME" LABEL="project.acm_name" ALIGN="left">
+					<DATA-FORMATTER><![CDATA[
+						(value,row,idx)=>{
+							return $(`<div class="col-24 row"><div class="col offset-${row.node_level}">${value}</div></div>`);
+						}
+						]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="PBDG_TOTAL" LABEL="project.bgt_amount" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return (row["node_type"]==="D")? value : "";}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<COMMAND-BUTTONS>
+					<BUTTONS-FILTER>
+						<EDIT><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></EDIT>
+						<DELETE><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></DELETE>
+						<VIEW><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></VIEW>
+					</BUTTONS-FILTER>
+				</COMMAND-BUTTONS>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="Y" ALLOW-NO-FILTER="Y" >
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" DATATYPE="TEXT" ALIGN="center"/>
+					<FIELD NAME="PROJ_NAME" CAPTION="project.name" INPUTTYPE="TEXT" DATATYPE="TEXT" ALIGN="left"/>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"></FIELD>
+					<FIELD NAME="VERSION" CAPTION="props.version" INPUTTYPE="COMBOBOX" DATATYPE="TEXT">
+						<LIST-OPTION TABLE="VL_VERSIONS" TEXT="VER_NAME" VALUE="VERSION" FILTER="VERSION &lt; 6" ORDER="VERSION DESC" FIRSTLIST="@{NONE}"></LIST-OPTION>
+					</FIELD>
+
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" CAPT_WIDTH="10" VAL_WIDTH="6" LAYOUT_WIDTH="12"/>
+						<FIELD NAME="VERSION" CAPT_WIDTH="6" VAL_WIDTH="6" LAYOUT_WIDTH="12"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_NAME" CAPT_WIDTH="5" VAL_WIDTH="18" LAYOUT_WIDTH="24"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+			<FOOTER SHOW="Y"/>
+			<SCRIPT>
+				<INITIALIZE>
+					<![CDATA[
+					{
+						console.log("init activity grid");
+
+						const fieldFormat = (value) => {
+							return formatNumber(value, 0);
+						}
+
+						$PageCtx.sum_of = {};
+						const summary = (field, data) => {
+							console.log("budget summary process.")
+							let total = 0;
+							for (let id=0; id < data.length; id++) {
+								let row = data[id];
+								if (row["node_type"] === "D") {
+									total += (+row[field]) || 0;
+								}
+							}
+
+							$PageCtx.sum_of[field] = total;
+
+							if ($PageCtx.$dataGrid.load && !$PageCtx.$dataGrid.reload) {
+								$PageCtx.$dataGrid.reload = true;
+								for (let id=data.length-1; id>=0; id--) {
+									let row = data[id];
+									if (row["node_type"] === "C") {
+										let grpTotal = 0;
+										let mainNode = row["acm_code"];
+										let nodes = [];
+										nodes.push($$("main_node="+mainNode,data));
+										for (let node of nodes.flat()) {
+											grpTotal += +node[field];
+										}
+										data[id][field] = grpTotal;
+									}
+								}
+								$PageCtx.$dataGrid.load(data);
+								$PageCtx.$dataGrid.reload = false;
+							}
+
+							return formatNumber(total, 0);
+						}
+
+						const $ctx = $PageCtx;
+						const gridFields = [$$("field^pbdg_", $ctx.gridColumn.flat())].flat();
+						for (let field of gridFields) {
+							field.formatter = fieldFormat;
+							field.footerFormatter = function (data) {
+								return summary(this.field, data);
+							}
+						}
+
+						$ctx.rowStyle = function (row, index) {
+							if (row["node_type"] === "C") {
+								return {
+									classes : `group-level-${row["node_level"]}`
+								};
+							}
+							return {}; // Default style for other rows
+						}
+					}
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_BROWSE>
+
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PROJ_NAME" CAPTION="project.name" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="VACM_CODE" CAPTION="project.acm_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.acm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-ACTIVITY-02-BDGT" VALUE-FIELD="ACM_CODE" TEXT-FIELD="ACM_NAME" PARAMETERS="DV_YEAR=PROJ_YEAR,STM_CODE=STM_CODE">
+						<UPDATE-FIELDS>
+							<FIELD SRC="ACM_CODE" TARGET="VACM_CODE"></FIELD>
+							<FIELD SRC="ACM_UNIT" TARGET="TARGET_UNIT"></FIELD>
+							<FIELD SRC="ACM_UNIT" TARGET="PWMT_UNIT"></FIELD>
+							<FIELD SRC="PJM_CODE" TARGET="PJM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								if (data.node_type === "C") {
+									data.disabled = true;
+								}
+								return $(`<div><label>[${data.acm_code}]</label> : <label>${data.acm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+				<FIELD NAME="GRID-BUDGET" INPUTTYPE="DATA-GRID" GRID-ID="GRID-WORK-BUDGET" ROWS="5" CAPTION="project.budget"/>
+
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_NAME" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.budget}</h4>]]></HEADER>
+					<ROW>
+						<FIELD NAME="GRID-BUDGET" LAYOUT_WIDTH="24" OFFSET=""/>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							let acmCount = $$("^QT_TOTAL_0").sum();
+							$$("PBDG_COUNT").val(acmCount);
+							let gridCtx = ($PageCtx.widgets["GRID-BUDGET"]||{})["$GridCtx"];
+							if (gridCtx) {
+								 let bdgTotal = gridCtx.sum_of["pbgi_total"];
+								$$("PBDG_TOTAL").val(bdgTotal);
+							}
+							Object.assign(data,form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+				<INITIALIZE>
+					<![CDATA[
+					     const quoterSum = ()=>{
+						     for (let sect=1; sect <=2; sect++) {
+							     let summary = 0;
+							     for (let qt = 1; qt <= 4; qt++) {
+								     summary += $$(`PTGT_QT_0${qt}0${sect}`).number();
+							     }
+							     $$(`QT_TOTAL_0${sect}`).val(formatNumber(summary));
+						     }
+					     }
+						 $$("^PTGT_QT_").on("change",quoterSum);
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/project.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/project.frml
new file mode 100644
index 0000000..639aced
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/project.frml
@@ -0,0 +1,621 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-stratigy.frml"></INCLUDE>
+		<INCLUDE FILE="#grids/grid-stratigy-item.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT PROJ.PROJ_ID
+					, PROJ.PROJ_TYPE
+					, PROJ.PROJ_YEAR
+					, PROJ.PJM_CODE
+					, BUD.GET_PROJECT(PROJ.PJM_CODE) PROJ_NAME
+					, PROJ.STM_CODE
+					, PROJ.BTM_CODE
+					, PROJ.ACM_CODE
+					, BUD.GET_ACTIVITY(PROJ.ACM_CODE) ACM_NAME
+					, PROJ.PLAN_TYPE
+					, PROJ.PROJ_DURATION
+					, PROJ.PROJ_START_YEAR
+					, PROJ.PROJ_END_YEAR
+					, PROJ.PROJ_FOR_STAFF
+
+					, PROJ.PROJ_CATE
+					, PROJ.PROJ_KIND
+					, PROJ.PROJ_FROM_YEAR
+
+				</SELECT>
+				<FROM>FROM PROJECTS PROJ</FROM>
+				<FILTER>WHERE STM_CODE=:STM_CODE</FILTER>
+				<ORDER>ORDER BY PROJ_YEAR DESC, PROJ_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="VARCHAR" WIDTH="50" LABEL="plcp.id"/>
+				<FIELD NAME="PROJ_TYPE" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.type"/>
+				<FIELD NAME="PROJ_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.year"/>
+				<FIELD NAME="PJM_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="plcp.pjm_code"/>
+				<FIELD NAME="STM_CODE" TYPE="VARCHAR" WIDTH="10" LABEL="plcp.stm_code"/>
+				<FIELD NAME="BTM_CODE" TYPE="VARCHAR" WIDTH="10" LABEL="plcp.btm_code"/>
+				<FIELD NAME="ACM_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="plcp.acm_code"/>
+				<FIELD NAME="ACM_NAME" TYPE="VARCHAR" WIDTH="200" LABEL="plcp.acm_name"/>
+				<FIELD NAME="PLAN_TYPE" TYPE="VARCHAR" WIDTH="15" LABEL="plcp.plan_type"/>
+				<FIELD NAME="PROJ_DURATION" TYPE="NUMBER" WIDTH="10" LABEL="plcp.duration"/>
+				<FIELD NAME="PROJ_START_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.start_year"/>
+				<FIELD NAME="PROJ_END_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.end_year"/>
+				<FIELD NAME="PROJ_FOR_STAFF" TYPE="NUMBER" WIDTH="10" LABEL="plcp.for_staff"/>
+
+				<FIELD NAME="PROJ_CATE" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.catagory"/>
+				<FIELD NAME="PROJ_KIND" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.kine"/>
+				<FIELD NAME="PROJ_FROM_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.from_year"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="N">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="STM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="BTM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PLAN_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_DURATION" INPUTTYPE="HIDDEN"/>
+
+				<FIELD NAME="PROJ_YEAR" CAPTION="plcp.year" INPUTTYPE="TEXT" READONLY="Y" DATATYPE="TEXT"/>
+				<FIELD NAME="VERSION" CAPTION="props.version" INPUTTYPE="COMBOBOX" DATATYPE="TEXT">
+					<LIST-OPTION TABLE="VL_VERSIONS" TEXT="VER_NAME" VALUE="VERSION" FILTER="VERSION &lt; 6" ORDER="VERSION DESC" FIRSTLIST="@{NONE}"></LIST-OPTION>
+				</FIELD>
+				<FIELD NAME="VPJM_CODE" CAPTION="plcp.pjm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PJM_CODE" CAPTION="plcp.pjm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-PROJECT-02" VALUE-FIELD="PJM_CODE" TEXT-FIELD="PJM_NAME">
+						<UPDATE-FIELDS>
+							<FIELD SRC="PJM_CODE" TARGET="VPJM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								// data.disabled = data["node_type"] === "C";
+								return $(`<div class="d-flex flex-row gap-1 dyn-list-item"><label class="flex-column text-nowrap col-3">[${data.pjm_code}]</label> : <label>${data.pjm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+
+				<FIELD NAME="VACM_CODE" CAPTION="plcp.acm_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_CODE" CAPTION="plcp.acm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-ACTIVITY-02" VALUE-FIELD="ACM_CODE" TEXT-FIELD="ACM_NAME" PARAMETERS="DV_YEAR=PROJ_YEAR,STM_CODE=STM_CODE">
+						<UPDATE-FIELDS>
+							<FIELD SRC="ACM_CODE" TARGET="VACM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								// data.disabled = data["node_type"] === "C";
+								return $(`<div class="d-flex flex-row gap-1 dyn-list-item"><label class="flex-column text-nowrap col-3">[${data.acm_code}]</label> : <label>${data.acm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+
+				<FIELD NAME="STM_CODE" CAPTION="plcp.stm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="BTM_CODE" CAPTION="plcp.btm_code" INPUTTYPE="TEXT"/>
+				<FIELD NAME="PLAN_TYPE" CAPTION="plcp.plan_type" INPUTTYPE="TEXT"/>
+				<FIELD NAME="PROJ_DURATION" CAPTION="plcp.duration" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_START_YEAR" CAPTION="plcp.start_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_END_YEAR" CAPTION="plcp.end_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_FOR_STAFF" CAPTION="plcp.for_staff" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+
+				<FIELD NAME="PROJ_CATE" CAPTION="plcp.catagory" INPUTTYPE="RADIOGROUP" DATATYPE="TEXT" CLASS-NAME="flex-option">
+					<LIST-OPTION TABLE="BGT.REFER_CODE" TEXT="#RFC_DESC" VALUE="RFC_CODE" FILTER="RFG_GRP='PROJ-CATE'" ORDER="RFC_CODE"/>
+				</FIELD>
+
+				<FIELD NAME="PROJ_KIND" CAPTION="plcp.kind" INPUTTYPE="SWITCH" DATATYPE="TEXT"
+					VALUE="NEW" UNCHECK_VALUE="OLD" SUFFIX="#plcp.new|plcp.continue"></FIELD>
+
+
+				<FIELD NAME="PROJ_PHASE" CAPTION="#--" SHOWCAPT="Y" INPUTTYPE="CHECKBOXGROUP" DATATYPE="TEXT">
+					<LIST-OPTION TABLE="BGT.REFER_CODE" TEXT="#RFC_DESC" VALUE="RFC_CODE" FILTER="RFG_GRP='PROJ-PHASE'" ORDER="RFC_CODE" COLUMN="4"/>
+				</FIELD>
+				<FIELD NAME="PROJ_BUDGET" CAPTION="plcp.budget" INPUTTYPE="TEXT" DATATYPE="NUMBER" SUFFIX="บาท"/>
+
+
+				<FIELD NAME="PROJ_FROM_YEAR" CAPTION="plcp.from_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+				<FIELD NAME="GRID-STRATEGY" INPUTTYPE="DATA-GRID" GRID-ID="GRID-PROJECT-STTGYS" CAPTION="pstg.header"/>
+
+				<FIELD NAME="PROJ_INVOLVERS" INPUTTYPE="TEXTAREA" CAPTION="plcp.involvers" ROWS="4"/>
+				<FIELD NAME="PROJ_INVOLVISSE" INPUTTYPE="TEXTAREA" CAPTION="plcp.involv_issue" ROWS="4"/>
+			</FIELDS>
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+						<FIELD NAME="VERSION" LAYOUT_WIDTH="6" OFFSET="6"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VPJM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PJM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+				</SECTION>
+				<SECTION>
+					<HEADER CLASS="form-section-header col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{pstg.header}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="GRID-STRATEGY" LAYOUT_WIDTH="20" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+				<SECTION>
+					<ROW>
+						<FIELD NAME="PROJ_CATE" OFFSET="4" LAYOUT_WIDTH="20"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_KIND" OFFSET="4" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="PROJ_FROM_YEAR" LAYOUT_WIDTH="6"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-STRATEGY">
+					<HEADER CLASS="form-section-header col-24 mg-t-30 border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">ความเชื่อมโยงของโครงการกับประเด็นการยกระดับคะแนนดัชนีการรับรู้การทุจริต(CPI)และแหล่งข้อมูล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-4">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center">ประเด็น/แหล่งข้อมูล</th>
+										<th class="center" style="width: 5em">BF(TI)<br>(1)</th>
+										<th class="center" style="width: 5em">EIU<br>(2)</th>
+										<th class="center" style="width: 5em">GI<br>(3)</th>
+										<th class="center" style="width: 5em">IMD<br>(4)</th>
+										<th class="center" style="width: 5em">PERC<br>(5)</th>
+										<th class="center" style="width: 5em">PRS<br>(6)</th>
+										<th class="center" style="width: 5em">WEF<br>(7)</th>
+										<th class="center" style="width: 5em">WJP<br>(8)</th>
+										<th class="center" style="width: 5em">VDEM<br>(9)</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">1.สินบน</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+									</tr>
+									<tr>
+										<td class="left">2.การขัดกันแห่งผลประโยชน์</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+									</tr>
+									<tr>
+										<td class="left">3.นโยบายของรัฐบาลในการแก้ไขปัญหาการทุจริต</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+									<tr>
+										<td class="left">4.การตรวจสอบเจ้าหน้าที่รัฐ</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+									<tr>
+										<td class="left">5.ความโปร่งใสในระบบงบประมาณและการจัดซื้อจัดจ้าง</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-1">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">1.หลักการและเหตุผล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-2">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">2.วัตถุประสงค์</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-3">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">3.ประโยชน์ที่คาดว่าจะได้รับ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-4">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">4.เป้าหมาย</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-5">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">5.กลุ่มเป้าหมาย</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-6">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">6.พื้นที่ดำเนินการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-7">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">7.กิจกรรมที่จะดำเนินการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">ขั้นตอนการดำเนินงาน</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 1</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 2</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 3</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 4</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2">
+											<button type="button" id="add-btn" class="btn btn-primary btn-round data-grid-add-btn mg-y-5 w-100 white"><i class="fa fa-plus"></i></button>
+										</th>
+									</tr>
+									<tr>
+										<th class="center" style="width: 3em">ต.ค.</th>
+										<th class="center" style="width: 3em">พ.ย.</th>
+										<th class="center" style="width: 3em">ธ.ค.</th>
+										<th class="center" style="width: 3em">ม.ค.</th>
+										<th class="center" style="width: 3em">ก.พ.</th>
+										<th class="center" style="width: 3em">มี.ค.</th>
+										<th class="center" style="width: 3em">เม.ย.</th>
+										<th class="center" style="width: 3em">พ.ค.</th>
+										<th class="center" style="width: 3em">มิ.ย.</th>
+										<th class="center" style="width: 3em">ก.ค.</th>
+										<th class="center" style="width: 3em">ส.ค.</th>
+										<th class="center" style="width: 3em">ก.ย.</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">กิจกรรมที่ ๑ การระดมความคิดเห็นเพื่อ
+											กำหนดประเด็นจัดทำแผนงานและ
+											แนวทางในการขับเคลื่อนเพื่อป้องปราม
+											หรือเฝ้าระวังปัญหาการทุจริตในพื้นที่</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+									<tr>
+										<td class="left">กิจกรรมที่ ๒ การลงพื้นที่เพื่อเฝ้าระวังและ
+											ป้องปรามการทุจริตในพื้นที่ตามนโยบาย
+											ของสำนักงานป.ป.ช.หรือตามประเด็นที่
+											ได้รับแจ้งข้อมูลจากศูนย์ป้องปราม
+											การทุจริตแห่งชาติสำนักงานป.ป.ช.</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-8">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">8.ตัวชี้วัดของผลผลิต/ผลลัพธ์การดำเนินโครงการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">ผลผลิต(Output)/ผลลัพธ์(Outcome)</th>
+										<th class="center" style="width: 12em">ตัวชี้วัด</th>
+										<th class="center" style="width: 12em">ค่าเป้าหมาย</th>
+										<th class="center" style="width: 12em">ระยะเวลา</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2">
+											<button type="button" id="add-btn" class="btn btn-primary btn-round data-grid-add-btn mg-y-5 w-100 white"><i class="fa fa-plus"></i></button>
+										</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left"><b>ผลผลิต(Output)</b><br>
+											รายงานสรุปผลโครงการแก้ไขปัญหา
+											การทุจริตในพื้นที่
+										</td>
+										<td class="center">แนวทางการแก้ไขปัญหา
+											การทุจริตในพื้นที่</td>
+										<td class="center">รายงาน ๑ ฉบับ</td>
+										<td class="center">ไตรมาสที่ ๔</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+
+									<tr>
+										<td class="left"><b>ผลลัพธ์(Outcome)</b><br>
+											หน่วยงานที่เกี่ยวข้องนำแนวทางการแก้ไข
+											ปัญหาการทุจริตไปใช้ในการป้องกัน
+											การทุจริตในพื้นที่เพื่อทำให้คดีทุจริต
+											ในพื้นที่ลดลง
+										</td>
+										<td class="center">จำนวนหน่วยงานที่นำแนวทาง
+											การแก้ไขปัญหาการทุจริตในพื้นที่
+											ไปใช้ในการป้องกันการทุจริต
+											ในพื้นที่่</td>
+										<td class="center">อย่างน้อย ๑ หน่วยงาน</td>
+										<td class="center">ไตรมาสที่ ๔</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-9">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">9.งบประมาณ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_BUDGET" OFFSET="4" LAYOUT_WIDTH="6"/>
+					</ROW>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">งบรายจ่าย</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 1</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 2</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 3</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 4</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2"></th>
+									</tr>
+									<tr>
+										<th class="center" style="width: 3em">ต.ค.</th>
+										<th class="center" style="width: 3em">พ.ย.</th>
+										<th class="center" style="width: 3em">ธ.ค.</th>
+										<th class="center" style="width: 3em">ม.ค.</th>
+										<th class="center" style="width: 3em">ก.พ.</th>
+										<th class="center" style="width: 3em">มี.ค.</th>
+										<th class="center" style="width: 3em">เม.ย.</th>
+										<th class="center" style="width: 3em">พ.ค.</th>
+										<th class="center" style="width: 3em">มิ.ย.</th>
+										<th class="center" style="width: 3em">ก.ค.</th>
+										<th class="center" style="width: 3em">ส.ค.</th>
+										<th class="center" style="width: 3em">ก.ย.</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">งบบริหารจัดการรายเดือน</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+								<tfoot>
+									<tr>
+										<td class="left">รวมงบประมาณรายไตรมาส</td>
+										<td class="right" colspan="3">0</td>
+										<td class="right" colspan="3">0</td>
+										<td class="right" colspan="3">0</td>
+										<td class="right" colspan="3">0</td>
+										<td class="operate-header" style="text-align: center; width: 90px;"></td>
+									</tr>
+								</tfoot>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-10">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">10.ผู้รับผิดชอบโครงการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-13">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">11.ผู้ที่เกี่ยวข้องที่อาจจะได้รับผลกระทบ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_INVOLVERS" LAYOUT_WIDTH="10" OFFSET="4"/>
+						<FIELD NAME="PROJ_INVOLVISSE" LAYOUT_WIDTH="10"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-NOTE-11">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">12.ลักษณะโครงการ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_PHASE" OFFSET="4" LAYOUT_WIDTH="16"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-12">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">13.การติดตามประเมินผล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							if ($PageCtx.$action === "add") {
+								let projYear = $$("PROJ_YEAR").val();
+								let projType = "PLCY";
+								let btmCode = "01";
+								let stmCode = $user.deptCode;
+								let acmCode = $$("ACM_CODE").val();
+								let projId = `${projYear}x${projType}x${stmCode}x${acmCode}`;
+
+								$$("PROJ_ID").val(projId);
+								$$("PROJ_TYPE").val(projType);
+								$$("STM_CODE").val(stmCode);
+								$$("BTM_CODE").val(btmCode);
+							}
+							Object.assign(data, form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+			</SCRIPT>
+			<BUTTONS>
+				<BUTTON NAME="btnReturn" CAPTION="Return" CLASS="btn btn-primary" SECTION="CENTER" POSITION="AFTER-RESET" ICON-CLASS="fa fa-reply-all">
+					<EVENT ON="click"><![CDATA[(ev)=>{
+										ev.preventDefault();
+										$WebNavi.goto("/bdgt04/bgt0403020");
+									}]]>
+					</EVENT>
+				</BUTTON>
+				<BUTTON NAME="btnButton2" CAPTION="รายละเอียดงบประมาณ" CLASS="btn btn-outline-success" SECTION="LEFT">
+					<EVENT ON="click"><![CDATA[
+						(ev) => {
+							ev.preventDefault();
+							let data = $PageCtx.$data;
+							let projId = data.proj_id;
+							let targetUrl = url("/bdgt04/bgt0403020-project-budget?proj_id=" + projId);
+							data.pageTitle = $("h4.page-title").html();
+							data.postData = $PageCtx.$Params.get("data");
+							$PageCtx.saveSessionData("budget", data);
+							$PageCtx.saveStorageData("budget#search", {PROJ_ID: projId});
+							$WebNavi.goto(targetUrl);
+						}
+						]]></EVENT>
+				</BUTTON>
+			</BUTTONS>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/routine.frml b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/routine.frml
new file mode 100644
index 0000000..b8d92e8
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/bdgt-0403020/routine.frml
@@ -0,0 +1,230 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-routine-budget.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PBDG.PROJ_ID
+					, PROJ.PROJ_YEAR
+					, PBDG.PBDG_ID
+					, PBDG.ACM_CODE
+					, BUD.GET_ACTIVITY(PBDG.ACM_CODE) ACM_NAME
+					, PBDG.PBDG_TOTAL
+					, PBDG.PBDG_COUNT
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS PBDG
+						  INNER JOIN PROJECTS PROJ ON PROJ.PROJ_ID=PBDG.PROJ_ID
+				</FROM>
+				<ORDER>ORDER BY PBDG.PROJ_ID,PBDG.PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32" ORIGIN="PBDG.PROJ_ID"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20" ORIGIN="PBDG.ACM_CODE"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.acm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PROJ_PRINCIPLES" CAPTION="project.remak" INPUTTYPE="TEXT" ROWS="3"/>
+				<FIELD NAME="ACM_NAME" CAPTION="project.acm_name" INPUTTYPE="TEXT" EDIT-READONLY="Y"/>
+
+				<SECTION ID="SECT-PROJECT-TARGET">
+					<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_COUNT" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PWMT_UNIT" CAPTION="project.target" INPUTTYPE="TEXT" READONLY="Y"></FIELD>
+					<FIELD NAME="QUOTER_1" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 1" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0101" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0102" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_2" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 2" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0201" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0202" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_3" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 3" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0301" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0302" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_4" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 4" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0401" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0402" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="TOTAL_QT" INPUTTYPE="MULTI-FIELD" CAPTION="project.total" FIELD-SEPARATOR="/" READONLY="Y">
+						<FIELD-LIST>
+							<FIELD NAME="QT_TOTAL_01" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="QT_TOTAL_02" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+				</SECTION>
+
+				<FIELD NAME="GRID-BUDGET" INPUTTYPE="DATA-GRID" GRID-ID="GRID-WORK-BUDGET" ROWS="5" CAPTION="project.budget"/>
+
+				<SECTION ID="SEC-ATTATCH-FILE">
+					<FIELD NAME="FILE_BOX_01" CAPTION="file.upload 1" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_02" CAPTION="file.upload 2" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_03" CAPTION="file.upload 3" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+				</SECTION>
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="6"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="ACM_NAME" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_PRINCIPLES" LAYOUT_WIDTH="18" OFFSET="6"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-TARGET" TYPE="DATA-SECTION" DATASET="DS-PROJECT-TARGETS">
+					<ROW>
+						<FIELD NAME="PWMT_UNIT" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="QUOTER_1" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_2" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_3" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_4" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="TOTAL_QT" LAYOUT_WIDTH="4"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[
+						<h4 class="ml-3 border-bottom-1 col-24">@M{project.budget}</h4>
+						]]></HEADER>
+					<ROW>
+						<FIELD NAME="GRID-BUDGET" LAYOUT_WIDTH="24" OFFSET=""/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-FILE-UPLOAD">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.constructor_attatchment}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							let acmCount = $$("^QT_TOTAL_0").sum();
+							$$("PBDG_COUNT").val(acmCount);
+							let gridCtx = ($PageCtx.widgets["GRID-BUDGET"]||{})["$GridCtx"];
+							if (gridCtx) {
+								 let bdgTotal = gridCtx.sum_of["pbgi_total"];
+								$$("PBDG_TOTAL").val(bdgTotal);
+							}
+							Object.assign(data,form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+				<INITIALIZE>
+					<![CDATA[
+					     const quoterSum = ()=>{
+						     for (let sect=1; sect <=2; sect++) {
+							     let summary = 0;
+							     for (let qt = 1; qt <= 4; qt++) {
+								     summary += $$(`PTGT_QT_0${qt}0${sect}`).number();
+							     }
+							     $$(`QT_TOTAL_0${sect}`).val(formatNumber(summary));
+						     }
+					     }
+						 $$("^PTGT_QT_").on("change",quoterSum);
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/grids/grid-construct-budget.frml b/DevResources/full-examples/bdgt04/view/frm/grids/grid-construct-budget.frml
new file mode 100644
index 0000000..746f1dd
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/grids/grid-construct-budget.frml
@@ -0,0 +1,263 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-PROJECT_BUDGET_ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT :PROJ_ID PROJ_ID
+					, ACTT.ACM_CODE
+					, ACTT.ACM_NAME
+					, ACTT.ACM_SEQ
+					, ACTT.NODE_LEVEL
+					, ACTT.MAIN_NODE
+					, ACTT.ACM_UNIT
+					, ACTT.ACM_START_YEAR
+					, ACTT.ACM_END_YEAR
+					, ACTT.NODE_TYPE
+					, PBGI.PBDG_ID
+					, PBGI.BGM_CODE
+					, PBGI.PBGI_QTY
+					, PBGI.PBGI_COST
+					, PBGI.PBGI_FREQ
+					, PBGI.PBGI_ASSET_TYPE
+					, PBGI.PBGI_REPLACE
+					, PBGI.PBGI_ADDITION
+					, PBGI.PBGI_ACQUIRE
+					, PBGI.PBGI_TOTAL
+					, PBGI.PBGI_REASON
+					</SELECT>
+				<FROM>
+					FROM BGT.V_ACTIVITY_TREE ACTT
+						INNER JOIN ( SELECT DISTINCT ACM.ACM_CODE
+									   FROM BUD.ACTIVITY_M ACM
+										     INNER JOIN BUD.ACTIVITY_CTRL_H ACH ON ACM.ACM_CODE = ACH.ACH_CODE
+											 START WITH ACM.ACM_CODE IN (SELECT PBGI.PBDG_ID ACM_CODE FROM PROJECT_BUDGET_ITEMS PBGI WHERE PROJ_ID = :PROJ_ID)
+											 CONNECT BY PRIOR ACH.ACH_CTRL_CODE = ACH.ACH_CODE) FLTR ON FLTR.ACM_CODE = ACTT.ACM_CODE
+						LEFT OUTER JOIN BGT.PROJECT_BUDGET_ITEMS PBGI ON PBGI.PBDG_ID = ACTT.ACM_CODE
+				</FROM>
+				<ORDER>ORDER BY ACTT.ACM_SEQ</ORDER>
+			</SQL>
+			<SAVE-FILTER>
+				<FIELD NAME="NODE_TYPE" VALUE="[C,P]" ACTION="EXCLUDE"/>
+			</SAVE-FILTER>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32" FORM-NAME="ACM_CODE"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="รหัสหมวดงบประมาณ" WIDTH="20"/>
+				<FIELD NAME="PBGI_QT_01" TYPE="NUMBER" LABEL="จำนวนไตรมาส 1" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_02" TYPE="NUMBER" LABEL="จำนวนไตรมาส 2" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_03" TYPE="NUMBER" LABEL="จำนวนไตรมาส 3" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_04" TYPE="NUMBER" LABEL="จำนวนไตรมาส 4" WIDTH="15"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="จำนวน" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="ราคาต่อหน่วย" WIDTH="15"/>
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="ความถี่/จำนวนครั้ง" WIDTH="10"/>
+				<FIELD NAME="PBGI_ASSET_TYPE" TYPE="TEXT" LABEL="ประเภทสินทรัพย์" WIDTH="10"/>
+				<FIELD NAME="PBGI_REPLACE" TYPE="NUMBER" LABEL="ทดแทนของเดิม" WIDTH="10"/>
+				<FIELD NAME="PBGI_ADDITION" TYPE="NUMBER" LABEL="เพิ่มเติม" WIDTH="10"/>
+				<FIELD NAME="PBGI_ACQUIRE" TYPE="NUMBER" LABEL="จัดหาใหม่" WIDTH="10"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="รวมเป็นเงิน" WIDTH="15"/>
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="เหตุผลความจำเป็น" WIDTH="4000"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<DATA-GRIDS>
+		<DATA-GRID ID="GRID-CONST-BUDGET">
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID" DETAIL-FIELDS="PROJ_ID"/>
+			<UNIQ-CHECK CHECK-FIELDS="ACM_CODE" MESSAGE="pctbi.const_code duplicate !"></UNIQ-CHECK>
+			<GRID-LIST DATAID="DS-PROJECT_BUDGET_ITEMS" EDIT="Y" DELETE="Y" CLASS="table-primary">
+				<KEYFIELDS>PROJ_ID,BGM_CODE</KEYFIELDS>
+				<TITLES>
+					<ROW>
+						<FIELD NAME="ACM_CODE" LABEL="pctbi.const_code" WIDTH="10em" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="ACM_NAME" LABEL="pctbi.const_name" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BUDGET_INFO" LABEL="pctbi.budget" ALIGN="center" COLS-SPAN="3"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_QTY" LABEL="pctbi.qty" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_COST" LABEL="pctbi.cost" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_TOTAL" LABEL="pctbi.total" WIDTH="8em" ALIGN="right"/>
+					</ROW>
+				</TITLES>
+
+				<FIELDS>
+					<FIELD NAME="PBDG_ID" LABEL="pctbi.const_code" WIDTH="15em" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="ACM_NAME" LABEL="pctbi.const_name" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+					<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					<COMMAND-BUTTONS>
+						<BUTTONS-FILTER>
+							<EDIT><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></EDIT>
+							<DELETE><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></DELETE>
+							<VIEW><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></VIEW>
+						</BUTTONS-FILTER>
+					</COMMAND-BUTTONS>
+				</FIELDS>
+				<FOOTER SHOW="Y"/>
+				<SCRIPT>
+					<INITIALIZE>
+						<![CDATA[
+						(ctx)=> {
+						    ctx.sum_of = {};
+							console.log("init grid-budget");
+							const fieldFormat = (field,value,row) => {
+								if (row["node_type"] === "D" || field === "pbgi_total") {
+									return formatNumber(value, 0);
+								} else {
+									return  "";
+								}
+							}
+
+							const summary = (field, data) => {
+								let total = 0;
+								for (const row of data) {
+									total += (+row[field])||0;
+								}
+								ctx.sum_of[field] = total;
+
+								if (ctx.$dataGrid && ctx.$dataGrid.load && !ctx.$dataGrid.reload) {
+									ctx.$dataGrid.reload = true;
+									for (let id=data.length-1; id>=0; id--) {
+										let row = data[id];
+										if (row["node_type"] === "C") {
+											let grpTotal = 0;
+											let mainNode = row["acm_code"];
+											let nodes = [];
+											let dataNode = $$("main_node="+mainNode,data);
+											if (dataNode) {
+												nodes.push(dataNode);
+												for (let node of nodes.flat()) {
+													grpTotal += +node[field];
+												}
+												data[id][field] = grpTotal;
+											}
+										}
+									}
+									ctx.$dataGrid.load(data);
+									ctx.$dataGrid.reload = false;
+								}
+
+								return formatNumber(total,0);
+							}
+
+							const fieldList = ["pbgi_qty","pbgi_cost","pbgi_total"];
+							for (let field of fieldList) {
+								let column = $$(`field=${field}`,ctx.gridColumn.flat());
+								column.formatter = (value,row) => {
+									return fieldFormat(field, value, row);
+								}
+								column.footerFormatter = (data)=>{
+									return summary(field,data);
+								}
+							}
+
+							ctx.option.rowStyle = function (row, index) {
+								if (row["node_type"] === "C") {
+									return {classes : `group-level-${row["node_level"]}`};
+								}
+								return {}; // Default style for other rows
+							}
+
+						}
+						]]>
+					</INITIALIZE>
+				</SCRIPT>
+			</GRID-LIST>
+
+			<GRID-EDITOR DATAID="DS-PROJECT_BUDGET_ITEMS">
+				<FIELDS>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="ACM_CODE" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="BGM_NAME" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="ACM_NAME" INPUTTYPE="HIDDEN"/>
+
+					<FIELD NAME="VACM_CODE" CAPTION="pctbi.const_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+					<FIELD NAME="ACM_CODE" CAPTION="pctbi.const_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-ACTIVITY-04" VALUE-FIELD="ACM_CODE" TEXT-FIELD="ACM_NAME" PARAMETERS="DV_YEAR=PROJ_YEAR,STM_CODE=STM_CODE">
+							<UPDATE-FIELDS>
+								<FIELD SRC="ACM_CODE" TARGET="VACM_CODE"/>
+								<FIELD SRC="ACM_CODE" TARGET="PBDG_ID"/>
+								<FIELD SRC="ACM_NAME" TARGET="ACM_NAME"/>
+								<FIELD SRC="ACM_UNIT" TARGET="PBGI_UNIT"/>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div class="d-flex flex-row gap-1"><label class="flex-column text-nowrap col-3">[${data.acm_code}]</label> : <label>${data.acm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-BUDGET-04" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div class="d-flex flex-row gap-1"><label class="flex-column text-nowrap col-3">[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="PBGI_UNIT" CAPTION="pctbi.unit" INPUTTYPE="TEXT" DATATYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="PBGI_QTY" CAPTION="pctbi.qty" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"  CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_COST" CAPTION="pctbi.cost" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="pctbi.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT CLASS="block-layout-form">
+					<ROW>
+						<FIELD NAME="VACM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="16"/>
+					</ROW>
+					<ROW ID="ROW-BUDGET-DATA">
+						<FIELD NAME="PBGI_QTY" LAYOUT_WIDTH="3" OFFSET="6"/>
+						<FIELD NAME="PBGI_UNIT" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_COST" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="4" OFFSET="6"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="12"/>
+					</ROW>
+					<ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 350px"></div>]]>
+					</ROW>
+				</LAYOUT>
+				<SCRIPT>
+					<INITIALIZE><![CDATA[
+						console.log("sum budget value");
+						let budgetField = $$("input.budget-data");
+						const sumBudget = ()=>{
+							$$("PBGI_TOTAL").setValue(budgetField.multiply());
+						}
+						budgetField.on("change",sumBudget);
+						]]></INITIALIZE>
+				</SCRIPT>
+			</GRID-EDITOR>
+		</DATA-GRID>
+	</DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/grids/grid-equipt-budget.frml b/DevResources/full-examples/bdgt04/view/frm/grids/grid-equipt-budget.frml
new file mode 100644
index 0000000..2d71eb9
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/grids/grid-equipt-budget.frml
@@ -0,0 +1,231 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-PROJECT_BUDGET_ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT BGTT.BGM_CODE
+							, BGTT.BGM_NAME
+							, BGTT.BGM_UNIT
+							, BGTT.BGM_UNIT_RATE
+							, BGTT.NODE_LEVEL
+							, BGTT.BGM_SEQ
+							, BGTT.EXP_TYPE
+							, BGTT.MAIN_NODE
+							, BGTT.NODE_TYPE
+							, PBGI.PBGI_QTY
+							, PBGI.PBGI_COST
+							, PBGI.PBGI_FREQ
+							, PBGI.PBGI_ASSET_TYPE
+							, PBGI.PBGI_REPLACE
+							, PBGI.PBGI_ADDITION
+							, PBGI.PBGI_ACQUIRE
+							, PBGI.PBGI_TOTAL
+							, PBGI.PBGI_REASON
+				</SELECT>
+				<FROM>
+					FROM BGT.V_BUDGET_TREE BGTT
+						INNER JOIN (SELECT DISTINCT BGDM.BGM_CODE
+									  FROM BUD.BUDGET_M BGDM
+									       INNER JOIN BUD.BUDGET_M BGDH ON BGDM.BGM_CODE = BGDH.BGM_CODE
+										   START WITH BGDM.BGM_CODE IN (SELECT PBGI.BGM_CODE FROM BGT.PROJECT_BUDGET_ITEMS PBGI WHERE PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID)
+									       CONNECT BY PRIOR BGDH.BGM_MAIN_NODE = BGDH.BGM_CODE) FLTR ON FLTR.BGM_CODE = BGTT.BGM_CODE
+						LEFT OUTER JOIN BGT.PROJECT_BUDGET_ITEMS PBGI ON PBGI.BGM_CODE = BGTT.BGM_CODE
+				</FROM>
+				<ORDER>ORDER BY BGTT.BGM_SEQ</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="รหัสหมวดงบประมาณ" WIDTH="20"/>
+				<FIELD NAME="PBGI_QT_01" TYPE="NUMBER" LABEL="จำนวนไตรมาส 1" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_02" TYPE="NUMBER" LABEL="จำนวนไตรมาส 2" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_03" TYPE="NUMBER" LABEL="จำนวนไตรมาส 3" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_04" TYPE="NUMBER" LABEL="จำนวนไตรมาส 4" WIDTH="15"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="จำนวน" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="ราคาต่อหน่วย" WIDTH="15"/>
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="ความถี่/จำนวนครั้ง" WIDTH="10"/>
+				<FIELD NAME="PBGI_ASSET_TYPE" TYPE="TEXT" LABEL="ประเภทสินทรัพย์" WIDTH="10"/>
+				<FIELD NAME="PBGI_REPLACE" TYPE="NUMBER" LABEL="ทดแทนของเดิม" WIDTH="10"/>
+				<FIELD NAME="PBGI_ADDITION" TYPE="NUMBER" LABEL="เพิ่มเติม" WIDTH="10"/>
+				<FIELD NAME="PBGI_ACQUIRE" TYPE="NUMBER" LABEL="จัดหาใหม่" WIDTH="10"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="รวมเป็นเงิน" WIDTH="15"/>
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="เหตุผลความจำเป็น" WIDTH="4000"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<DATA-GRIDS>
+		<DATA-GRID ID="GRID-EQUIPT-BUDGET">
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,PBDG_ID" DETAIL-FIELDS="PROJ_ID,PBDG_ID"/>
+			<UNIQ-CHECK CHECK-FIELDS="BGM_CODE" MESSAGE="pwbg.bgm_code duplicate !"></UNIQ-CHECK>
+			<GRID-LIST DATAID="DS-PROJECT_BUDGET_ITEMS" EDIT="Y" DELETE="Y" CLASS="table-primary">
+				<KEYFIELDS>PROJ_ID,BGM_CODE</KEYFIELDS>
+				<TITLES>
+					<ROW>
+						<FIELD NAME="BGM_CODE" LABEL="pbgz.bgm_code" WIDTH="10em" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_NAME" LABEL="pbgz.bgm_name" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_BUTGETS" LABEL="pbgz.budget" ALIGN="center" COLS-SPAN="5"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_FREQ" LABEL="pbgz.freq" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_ACQUIRE" LABEL="pbgz.acquire" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					</ROW>
+				</TITLES>
+
+				<FIELDS>
+					<FIELD NAME="BGM_CODE" LABEL="pwbg.bgm_code" WIDTH="15em" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="BGM_NAME" LABEL="pwbg.bgm_name" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="PBGI_FREQ" LABEL="pbgz.freq" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_ACQUIRE" LABEL="pbgz.acquire" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+					<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					<COMMAND-BUTTONS>
+						<BUTTONS-FILTER>
+							<EDIT><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></EDIT>
+							<DELETE><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></DELETE>
+							<VIEW><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></VIEW>
+						</BUTTONS-FILTER>
+					</COMMAND-BUTTONS>
+				</FIELDS>
+				<FOOTER SHOW="Y"/>
+				<SCRIPT>
+					<INITIALIZE>
+						<![CDATA[
+						(ctx)=> {
+						    ctx.sum_of = {};
+							console.log("init grid-budget");
+							const fieldFormat = (field,value,row) => {
+								if (row["node_type"] === "D" || field === "pbgi_total") {
+									return formatNumber(value, 0);
+								} else {
+									return  "";
+								}
+							}
+
+							const summary = (field, data) => {
+								let total = 0;
+								for (const row of data) {
+									total += (+row[field])||0;
+								}
+								ctx.sum_of[field] = total;
+
+								if (ctx.$dataGrid && ctx.$dataGrid.load && !ctx.$dataGrid.reload) {
+									ctx.$dataGrid.reload = true;
+									for (let id=data.length-1; id>=0; id--) {
+										let row = data[id];
+										if (row["node_type"] === "C") {
+											let grpTotal = 0;
+											let mainNode = row["bgm_code"];
+											let nodes = [];
+											nodes.push($$("main_node="+mainNode,data));
+											for (let node of nodes.flat()) {
+												grpTotal += +node[field];
+											}
+											data[id][field] = grpTotal;
+										}
+									}
+									ctx.$dataGrid.load(data);
+									ctx.$dataGrid.reload = false;
+								}
+
+								return formatNumber(total,0);
+							}
+
+							const fieldList = ["pbgi_freq","pbgi_qty","pbgi_acquire","pbgi_cost","pbgi_total"];
+							for (let field of fieldList) {
+								let column = $$(`field=${field}`,ctx.gridColumn.flat());
+								column.formatter = (value,row) => {
+									return fieldFormat(field, value, row);
+								}
+								column.footerFormatter = (data)=>{
+									return summary(field,data);
+								}
+							}
+
+							ctx.option.rowStyle = function (row, index) {
+								if (row["node_type"] === "C") {
+									return {classes : `group-level-${row["node_level"]}`};
+								}
+								return {}; // Default style for other rows
+							}
+
+						}
+						]]>
+					</INITIALIZE>
+				</SCRIPT>
+			</GRID-LIST>
+
+			<GRID-EDITOR DATAID="DS-PROJECT_BUDGET_ITEMS">
+				<FIELDS>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="BGM_NAME" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-BUDGET-03" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div><label class="offset-${data.node_level}">[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="PBGI_FREQ" CAPTION="pbgz.freq" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_QTY" CAPTION="pbgz.qty" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"  CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_ACQUIRE" CAPTION="pbgz.acquire" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_COST" CAPTION="pbgz.cost" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="pbgz.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT CLASS="block-layout-form">
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="16"/>
+					</ROW>
+					<ROW ID="ROW-BUDGET-DATA">
+						<FIELD NAME="PBGI_FREQ" LAYOUT_WIDTH="3" OFFSET="6"/>
+						<FIELD NAME="PBGI_QTY" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_ACQUIRE" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_COST" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 350px"></div>]]>
+					</ROW>
+				</LAYOUT>
+				<SCRIPT>
+					<INITIALIZE><![CDATA[
+						console.log("sum budget value");
+						let budgetField = $$("input.budget-data");
+						const sumBudget = ()=>{
+							$$("PBGI_TOTAL").setValue(budgetField.multiply());
+						}
+						budgetField.on("change",sumBudget);
+						]]></INITIALIZE>
+				</SCRIPT>
+			</GRID-EDITOR>
+		</DATA-GRID>
+	</DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/grids/grid-manage-budget.frml b/DevResources/full-examples/bdgt04/view/frm/grids/grid-manage-budget.frml
new file mode 100644
index 0000000..532e586
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/grids/grid-manage-budget.frml
@@ -0,0 +1,222 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-PROJECT_BUDGET_ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT BGTT.BGM_CODE
+					, BGTT.BGM_NAME
+					, BGTT.BGM_UNIT
+					, BGTT.BGM_UNIT_RATE
+					, BGTT.NODE_LEVEL
+					, BGTT.BGM_SEQ
+					, BGTT.EXP_TYPE
+					, BGTT.MAIN_NODE
+					, BGTT.NODE_TYPE
+					, PBGI.PBGI_QTY
+					, PBGI.PBGI_FREQ
+					, PBGI.PBGI_COST
+					, PBGI.PBGI_ACQUIRE
+					, PBGI.PBGI_TOTAL
+				</SELECT>
+				<FROM>
+					FROM BGT.V_BUDGET_TREE BGTT
+					INNER JOIN (SELECT DISTINCT BGDM.BGM_CODE
+					FROM BUD.BUDGET_M BGDM
+					INNER JOIN BUD.BUDGET_M BGDH ON BGDM.BGM_CODE = BGDH.BGM_CODE
+					START WITH BGDM.BGM_CODE IN (SELECT PBGI.BGM_CODE FROM BGT.PROJECT_BUDGET_ITEMS PBGI WHERE PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID)
+					CONNECT BY PRIOR BGDH.BGM_MAIN_NODE = BGDH.BGM_CODE) FLTR ON FLTR.BGM_CODE = BGTT.BGM_CODE
+					LEFT OUTER JOIN BGT.PROJECT_BUDGET_ITEMS PBGI ON PBGI.BGM_CODE = BGTT.BGM_CODE AND PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID
+				</FROM>
+				<ORDER>ORDER BY BGTT.BGM_SEQ</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="รหัสหมวดงบประมาณ" WIDTH="20"/>
+
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="จำนวนครั้ง" WIDTH="10"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="จำนวนคน" WIDTH="10"/>
+				<FIELD NAME="PBGI_ACQUIRE" TYPE="NUMBER" LABEL="จำนวนชั่วโมง" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="อัตรา" WIDTH="15"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="รวมเป็นเงิน" WIDTH="15"/>
+
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="เหตุผลความจำเป็น" WIDTH="4000"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<DATA-GRIDS>
+		<DATA-GRID ID="GRID-WORK-BUDGET">
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,PBDG_ID" DETAIL-FIELDS="PROJ_ID,PBDG_ID"/>
+			<UNIQ-CHECK CHECK-FIELDS="BGM_CODE" MESSAGE="pwbg.bgm_code duplicate !"></UNIQ-CHECK>
+			<GRID-LIST DATAID="DS-PROJECT_BUDGET_ITEMS" EDIT="Y" DELETE="Y" CLASS="table-primary">
+				<KEYFIELDS>PROJ_ID,BGM_CODE</KEYFIELDS>
+				<TITLES>
+					<ROW>
+						<FIELD NAME="BGM_CODE" LABEL="pbgz.bgm_code" WIDTH="10em" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_NAME" LABEL="pbgz.bgm_name" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_BUTGETS" LABEL="pbgz.budget" ALIGN="center" COLS-SPAN="5"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_FREQ" LABEL="pbgz.freq" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_ACQUIRE" LABEL="pbgz.acquire" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					</ROW>
+				</TITLES>
+
+				<FIELDS>
+					<FIELD NAME="BGM_CODE" LABEL="pwbg.bgm_code" WIDTH="15em" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="BGM_NAME" LABEL="pwbg.bgm_name" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="PBGI_FREQ" LABEL="pbgz.freq" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_ACQUIRE" LABEL="pbgz.acquire" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+					<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					<COMMAND-BUTTONS>
+						<BUTTONS-FILTER>
+							<EDIT><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></EDIT>
+							<DELETE><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></DELETE>
+							<VIEW><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></VIEW>
+						</BUTTONS-FILTER>
+					</COMMAND-BUTTONS>
+				</FIELDS>
+				<FOOTER SHOW="Y"/>
+				<SCRIPT>
+					<INITIALIZE>
+						<![CDATA[
+						(ctx)=> {
+							ctx.sum_of = {};
+							console.log("init grid-budget");
+							const fieldFormat = (field,value,row) => {
+								if (row["node_type"] === "D" || field === "pbgi_total") {
+									return formatNumber(value, 0);
+								} else {
+									return  "";
+								}
+							}
+
+							const summary = (field, data) => {
+								let total = 0;
+								for (const row of data) {
+									total += (+row[field])||0;
+								}
+								ctx.sum_of[field] = total;
+
+								if (ctx.$dataGrid && ctx.$dataGrid.load && !ctx.$dataGrid.reload) {
+									ctx.$dataGrid.reload = true;
+									for (let id=data.length-1; id>=0; id--) {
+										let row = data[id];
+										if (row["node_type"] === "C") {
+											let grpTotal = 0;
+											let mainNode = row["bgm_code"];
+											let nodes = [];
+											nodes.push($$("main_node="+mainNode,data));
+											for (let node of nodes.flat()) {
+												grpTotal += +node[field];
+											}
+											data[id][field] = grpTotal;
+										}
+									}
+									ctx.$dataGrid.load(data);
+									ctx.$dataGrid.reload = false;
+								}
+
+								return formatNumber(total,0);
+							}
+
+							const fieldList = ["pbgi_freq","pbgi_qty","pbgi_acquire","pbgi_cost","pbgi_total"];
+							for (let field of fieldList) {
+								let column = $$(`field=${field}`,ctx.gridColumn.flat());
+								column.formatter = (value,row) => {
+									return fieldFormat(field, value, row);
+								}
+								column.footerFormatter = (data)=>{
+									return summary(field,data);
+								}
+							}
+
+							ctx.option.rowStyle = function (row, index) {
+								if (row["node_type"] === "C") {
+									return {classes : `group-level-${row["node_level"]}`};
+								}
+								return {}; // Default style for other rows
+							}
+
+						}
+						]]>
+					</INITIALIZE>
+				</SCRIPT>
+			</GRID-LIST>
+
+			<GRID-EDITOR DATAID="DS-PROJECT_BUDGET_ITEMS">
+				<FIELDS>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="BGM_NAME" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-BUDGET-02" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div><label class="offset-${data.node_level}">[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="PBGI_FREQ" CAPTION="pbgz.freq" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_QTY" CAPTION="pbgz.qty" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"  CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_ACQUIRE" CAPTION="pbgz.acquire" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_COST" CAPTION="pbgz.cost" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="pbgz.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT CLASS="block-layout-form">
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="16"/>
+					</ROW>
+					<ROW ID="ROW-BUDGET-DATA">
+						<FIELD NAME="PBGI_FREQ" LAYOUT_WIDTH="3" OFFSET="6"/>
+						<FIELD NAME="PBGI_QTY" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_ACQUIRE" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_COST" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 350px"></div>]]>
+					</ROW>
+				</LAYOUT>
+				<SCRIPT>
+					<INITIALIZE><![CDATA[
+						console.log("sum budget value");
+						let budgetField = $$("input.budget-data");
+						const sumBudget = ()=>{
+							$$("PBGI_TOTAL").setValue(budgetField.multiply());
+						}
+						budgetField.on("change",sumBudget);
+						]]></INITIALIZE>
+				</SCRIPT>
+			</GRID-EDITOR>
+		</DATA-GRID>
+	</DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/grids/grid-proj-budget.frml b/DevResources/full-examples/bdgt04/view/frm/grids/grid-proj-budget.frml
new file mode 100644
index 0000000..ef495f2
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/grids/grid-proj-budget.frml
@@ -0,0 +1,272 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-PROJECT_BUDGET_ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT BGTT.BGM_CODE
+							, BGTT.BGM_NAME
+							, BGTT.BGM_UNIT
+							, BGTT.BGM_UNIT_RATE
+							, BGTT.NODE_LEVEL
+							, BGTT.BGM_SEQ
+							, BGTT.EXP_TYPE
+							, BGTT.MAIN_NODE
+							, BGTT.NODE_TYPE
+							, PBGI.PBGI_QTY
+							, PBGI.PBGI_FREQ
+							, PBGI.PBGI_COST
+							, PBGI.PBGI_TOTAL
+				</SELECT>
+				<FROM>
+					FROM BGT.V_BUDGET_TREE BGTT
+						INNER JOIN (SELECT DISTINCT BGDM.BGM_CODE
+									  FROM BUD.BUDGET_M BGDM
+									       INNER JOIN BUD.BUDGET_M BGDH ON BGDM.BGM_CODE = BGDH.BGM_CODE
+										   START WITH BGDM.BGM_CODE IN (SELECT PBGI.BGM_CODE FROM BGT.PROJECT_BUDGET_ITEMS PBGI WHERE PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID)
+									       CONNECT BY PRIOR BGDH.BGM_MAIN_NODE = BGDH.BGM_CODE) FLTR ON FLTR.BGM_CODE = BGTT.BGM_CODE
+						LEFT OUTER JOIN BGT.PROJECT_BUDGET_ITEMS PBGI ON PBGI.BGM_CODE = BGTT.BGM_CODE AND PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID
+				</FROM>
+				<ORDER>ORDER BY BGTT.BGM_SEQ</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="รหัสหมวดงบประมาณ" WIDTH="20"/>
+
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="จำนวนครั้ง" WIDTH="10"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="จำนวนคน" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="อัตรา" WIDTH="15"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="รวมเป็นเงิน" WIDTH="15"/>
+
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="เหตุผลความจำเป็น" WIDTH="4000"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<DATA-GRIDS>
+		<DATA-GRID ID="GRID-WORK-BUDGET">
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,PBDG_ID" DETAIL-FIELDS="PROJ_ID,PBDG_ID"/>
+			<UNIQ-CHECK CHECK-FIELDS="BGM_CODE" MESSAGE="pwbg.bgm_code duplicate !"></UNIQ-CHECK>
+			<GRID-LIST DATAID="DS-PROJECT_BUDGET_ITEMS" EDIT="Y" DELETE="Y" ADD="Y" CLASS="table-primary">
+				<KEYFIELDS>PROJ_ID,BGM_CODE</KEYFIELDS>
+				<TITLES>
+					<ROW>
+						<FIELD NAME="BGM_CODE" LABEL="plcbg.bgm_code" WIDTH="10em" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_NAME" LABEL="plcbg.bgm_name" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_BUTGETS" LABEL="plcbg.budget" ALIGN="center" COLS-SPAN="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_QTY" LABEL="plcbg.qty" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_FREQ" LABEL="plcbg.freq" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_COST" LABEL="plcbg.cost" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_TOTAL" LABEL="plcbg.total" WIDTH="8em" ALIGN="right"/>
+					</ROW>
+				</TITLES>
+
+				<FIELDS>
+					<FIELD NAME="BGM_CODE" LABEL="pwbg.bgm_code" WIDTH="15em" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="BGM_NAME" LABEL="pwbg.bgm_name" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="PBGI_QTY" LABEL="plcbg.qty" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_FREQ" LABEL="plcbg.freq" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_COST" LABEL="plcbg.cost" WIDTH="6em" ALIGN="right"/>
+					<FIELD NAME="PBGI_TOTAL" LABEL="plcbg.total" WIDTH="8em" ALIGN="right"/>
+					<COMMAND-BUTTONS>
+						<BUTTONS-FILTER>
+							<EDIT><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></EDIT>
+							<DELETE><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></DELETE>
+							<VIEW><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></VIEW>
+						</BUTTONS-FILTER>
+					</COMMAND-BUTTONS>
+				</FIELDS>
+				<FOOTER SHOW="Y"/>
+				<SCRIPT>
+					<INITIALIZE>
+						<![CDATA[
+						(ctx)=> {
+						    ctx.sum_of = {};
+							console.log("init grid-budget");
+							const fieldFormat = (field,value,row) => {
+								return (row["node_type"] === "D" || field === "pbgi_total") ? formatNumber(value, 0) : "";
+							}
+
+							const summary = (field, data) => {
+								let total = 0;
+								for (const row of data) {
+									if (row["node_type"] === "D") {
+										total += (strToFloat(row[field])) || 0;
+									}
+								}
+								ctx.sum_of[field] = total;
+
+								if (ctx.$dataGrid && ctx.$dataGrid.load && !ctx.$dataGrid.reload) {
+									ctx.$dataGrid.reload = true;
+									for (let id=data.length-1; id>=0; id--) {
+										let row = data[id];
+										if (row["node_type"] === "C") {
+											let grpTotal = 0;
+											let mainNode = row["bgm_code"];
+											let nodes = [];
+											nodes.push($$("main_node="+mainNode,data));
+											for (let node of nodes.flat()) {
+												grpTotal += +node[field];
+											}
+											data[id][field] = grpTotal;
+										}
+									}
+									ctx.$dataGrid.load(data);
+									ctx.$dataGrid.reload = false;
+								}
+
+								return formatNumber(total,0);
+							}
+
+							const fieldList = ["pbgi_freq","pbgi_qty","pbgi_cost","pbgi_total"];
+							for (let field of fieldList) {
+								let column = $$(`field=${field}`,ctx.gridColumn.flat());
+								column.formatter = (value,row) => {
+									return fieldFormat(field, value, row);
+								}
+								column.footerFormatter =function (data) {
+									return summary(field,data);
+								}
+							}
+
+							ctx.option.rowStyle = function (row, index) {
+								if (row["node_type"] === "C") {
+									return {classes : `group-level-${row["node_level"]}`};
+								}
+								return {}; // Default style for other rows
+							}
+						}
+						]]>
+					</INITIALIZE>
+				</SCRIPT>
+			</GRID-LIST>
+
+			<GRID-EDITOR DATAID="DS-PROJECT_BUDGET_ITEMS">
+				<FIELDS>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="BGM_NAME" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="NODE_TYPE" INPUTTYPE="HIDDEN" VALUE="D"/>
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-BUDGET-02-BDGT" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									return $(`<div><label class="offset-${data.node_level}">[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="PBGI_QTY" CAPTION="plcbg.qty" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"  CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_FREQ" CAPTION="plcbg.freq" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_COST" CAPTION="plcbg.cost" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="plcbg.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT CLASS="block-layout-form">
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="16"/>
+					</ROW>
+					<ROW ID="ROW-BUDGET-DATA">
+						<FIELD NAME="PBGI_QTY" LAYOUT_WIDTH="3" OFFSET="6"/>
+						<FIELD NAME="PBGI_FREQ" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_COST" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-24">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th style="text-align: center; vertical-align: middle; width: 3em; " rowspan="2" data-field="bgm_code">
+											<div class="th-inner ">No</div>
+										</th>
+										<th style="text-align: center; vertical-align: middle; " rowspan="2" data-field="bgm_name">
+											<div class="th-inner ">รายการกิจกรรม</div>
+										</th>
+										<th style="text-align: center; " colspan="4">
+											<div class="th-inner ">งบประมาณ</div>
+											<div class="fht-cell"></div>
+										</th>
+										<th class="operate-header" style="text-align: center; width: 90px; " rowspan="2" data-field="grid-operate">
+											<button type="button" id="add-btn-gridGRID_BUDGET" class="btn btn-primary btn-round white data-grid-add-btn w-75"><i class="fa fa-plus"></i></button>
+										</th>
+									</tr>
+									<tr>
+										<th style="text-align: center; width: 5em; " data-field="pbgi_freq" data-not-first-th="">
+											<div class="th-inner ">หน่วย/คน</div>
+										</th>
+										<th style="text-align: center; width: 5em; " data-field="pbgi_qty">
+											<div class="th-inner ">ครั้ง/คืน</div>
+										</th>
+										<th style="text-align: center; width: 6em; " data-field="pbgi_cost">
+											<div class="th-inner ">อัตรา</div>
+										</th>
+										<th style="text-align: center; width: 8em; " data-field="pbgi_total">
+											<div class="th-inner ">รวมเป็นเงิน</div>
+										</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr data-index="1">
+										<td class="" style="text-align: right; vertical-align: middle;">
+											<div class="col">1</div>
+										</td>
+										<td class="" style="text-align: left; vertical-align: middle;">
+											<div class="col">กิจกรรมย่อย 1</div>
+										</td>
+										<td class="" style="text-align: right; ">5</td>
+										<td class="" style="text-align: right; ">10</td>
+										<td class="" style="text-align: right; ">200</td>
+										<td class="" style="text-align: right; ">10,000</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+									<tr data-index="1">
+										<td class="" colspan="8"><div style="height: 200px"></div></td>
+									</tr>
+								</tbody>
+							</table>
+						]]>
+					</ROW>
+				</LAYOUT>
+				<SCRIPT>
+					<INITIALIZE><![CDATA[
+						console.log("sum budget value");
+						let budgetField = $$("input.budget-data");
+						const sumBudget = ()=>{
+							$$("PBGI_TOTAL").setValue(budgetField.multiply());
+						}
+						budgetField.on("change",sumBudget);
+						]]></INITIALIZE>
+				</SCRIPT>
+			</GRID-EDITOR>
+		</DATA-GRID>
+	</DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/grids/grid-routine-budget.frml b/DevResources/full-examples/bdgt04/view/frm/grids/grid-routine-budget.frml
new file mode 100644
index 0000000..08ed7d2
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/grids/grid-routine-budget.frml
@@ -0,0 +1,222 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-PROJECT_BUDGET_ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT BGTT.BGM_CODE
+							, BGTT.BGM_NAME
+							, BGTT.BGM_UNIT
+							, BGTT.BGM_UNIT_RATE
+							, BGTT.NODE_LEVEL
+							, BGTT.BGM_SEQ
+							, BGTT.EXP_TYPE
+							, BGTT.MAIN_NODE
+							, BGTT.NODE_TYPE
+							, PBGI.PBGI_QTY
+							, PBGI.PBGI_FREQ
+							, PBGI.PBGI_COST
+							, PBGI.PBGI_ACQUIRE
+							, PBGI.PBGI_TOTAL
+				</SELECT>
+				<FROM>
+					FROM BGT.V_BUDGET_TREE BGTT
+						INNER JOIN (SELECT DISTINCT BGDM.BGM_CODE
+									  FROM BUD.BUDGET_M BGDM
+									       INNER JOIN BUD.BUDGET_M BGDH ON BGDM.BGM_CODE = BGDH.BGM_CODE
+										   START WITH BGDM.BGM_CODE IN (SELECT PBGI.BGM_CODE FROM BGT.PROJECT_BUDGET_ITEMS PBGI WHERE PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID)
+									       CONNECT BY PRIOR BGDH.BGM_MAIN_NODE = BGDH.BGM_CODE) FLTR ON FLTR.BGM_CODE = BGTT.BGM_CODE
+						LEFT OUTER JOIN BGT.PROJECT_BUDGET_ITEMS PBGI ON PBGI.BGM_CODE = BGTT.BGM_CODE AND PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID
+				</FROM>
+				<ORDER>ORDER BY BGTT.BGM_SEQ</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="รหัสหมวดงบประมาณ" WIDTH="20"/>
+
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="จำนวนครั้ง" WIDTH="10"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="จำนวนคน" WIDTH="10"/>
+				<FIELD NAME="PBGI_ACQUIRE" TYPE="NUMBER" LABEL="จำนวนชั่วโมง" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="อัตรา" WIDTH="15"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="รวมเป็นเงิน" WIDTH="15"/>
+
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="เหตุผลความจำเป็น" WIDTH="4000"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<DATA-GRIDS>
+		<DATA-GRID ID="GRID-WORK-BUDGET">
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,PBDG_ID" DETAIL-FIELDS="PROJ_ID,PBDG_ID"/>
+			<UNIQ-CHECK CHECK-FIELDS="BGM_CODE" MESSAGE="pwbg.bgm_code duplicate !"></UNIQ-CHECK>
+			<GRID-LIST DATAID="DS-PROJECT_BUDGET_ITEMS" EDIT="N" DELETE="N" CLASS="table-primary">
+				<KEYFIELDS>PROJ_ID,BGM_CODE</KEYFIELDS>
+				<TITLES>
+					<ROW>
+						<FIELD NAME="BGM_CODE" LABEL="pbgz.bgm_code" WIDTH="10em" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_NAME" LABEL="pbgz.bgm_name" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_BUTGETS" LABEL="pbgz.budget" ALIGN="center" COLS-SPAN="5"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_FREQ" LABEL="pbgz.freq" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_ACQUIRE" LABEL="pbgz.acquire" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					</ROW>
+				</TITLES>
+
+				<FIELDS>
+					<FIELD NAME="BGM_CODE" LABEL="pwbg.bgm_code" WIDTH="15em" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="BGM_NAME" LABEL="pwbg.bgm_name" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="PBGI_FREQ" LABEL="pbgz.freq" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_ACQUIRE" LABEL="pbgz.acquire" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+					<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					<COMMAND-BUTTONS>
+						<BUTTONS-FILTER>
+							<EDIT><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></EDIT>
+							<DELETE><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></DELETE>
+							<VIEW><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></VIEW>
+						</BUTTONS-FILTER>
+					</COMMAND-BUTTONS>
+				</FIELDS>
+				<FOOTER SHOW="Y"/>
+				<SCRIPT>
+					<INITIALIZE>
+						<![CDATA[
+						(ctx)=> {
+						    ctx.sum_of = {};
+							console.log("init grid-budget");
+							const fieldFormat = (field,value,row) => {
+								if (row["node_type"] === "D" || field === "pbgi_total") {
+									return formatNumber(value, 0);
+								} else {
+									return  "";
+								}
+							}
+
+							const summary = (field, data) => {
+								let total = 0;
+								for (const row of data) {
+									total += (+row[field])||0;
+								}
+								ctx.sum_of[field] = total;
+
+								if (ctx.$dataGrid && ctx.$dataGrid.load && !ctx.$dataGrid.reload) {
+									ctx.$dataGrid.reload = true;
+									for (let id=data.length-1; id>=0; id--) {
+										let row = data[id];
+										if (row["node_type"] === "C") {
+											let grpTotal = 0;
+											let mainNode = row["bgm_code"];
+											let nodes = [];
+											nodes.push($$("main_node="+mainNode,data));
+											for (let node of nodes.flat()) {
+												grpTotal += +node[field];
+											}
+											data[id][field] = grpTotal;
+										}
+									}
+									ctx.$dataGrid.load(data);
+									ctx.$dataGrid.reload = false;
+								}
+
+								return formatNumber(total,0);
+							}
+
+							const fieldList = ["pbgi_freq","pbgi_qty","pbgi_acquire","pbgi_cost","pbgi_total"];
+							for (let field of fieldList) {
+								let column = $$(`field=${field}`,ctx.gridColumn.flat());
+								column.formatter = (value,row) => {
+									return fieldFormat(field, value, row);
+								}
+								column.footerFormatter = (data)=>{
+									return summary(field,data);
+								}
+							}
+
+							ctx.option.rowStyle = function (row, index) {
+								if (row["node_type"] === "C") {
+									return {classes : `group-level-${row["node_level"]}`};
+								}
+								return {}; // Default style for other rows
+							}
+
+						}
+						]]>
+					</INITIALIZE>
+				</SCRIPT>
+			</GRID-LIST>
+
+			<GRID-EDITOR DATAID="DS-PROJECT_BUDGET_ITEMS">
+				<FIELDS>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="BGM_NAME" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-BUDGET-02" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div><label class="offset-${data.node_level}">[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="PBGI_FREQ" CAPTION="pbgz.freq" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_QTY" CAPTION="pbgz.qty" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"  CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_ACQUIRE" CAPTION="pbgz.acquire" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_COST" CAPTION="pbgz.cost" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="pbgz.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT CLASS="block-layout-form">
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="16"/>
+					</ROW>
+					<ROW ID="ROW-BUDGET-DATA">
+						<FIELD NAME="PBGI_FREQ" LAYOUT_WIDTH="3" OFFSET="6"/>
+						<FIELD NAME="PBGI_QTY" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_ACQUIRE" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_COST" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 350px"></div>]]>
+					</ROW>
+				</LAYOUT>
+				<SCRIPT>
+					<INITIALIZE><![CDATA[
+						console.log("sum budget value");
+						let budgetField = $$("input.budget-data");
+						const sumBudget = ()=>{
+							$$("PBGI_TOTAL").setValue(budgetField.multiply());
+						}
+						budgetField.on("change",sumBudget);
+						]]></INITIALIZE>
+				</SCRIPT>
+			</GRID-EDITOR>
+		</DATA-GRID>
+	</DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/grids/grid-stratigy-item.frml b/DevResources/full-examples/bdgt04/view/frm/grids/grid-stratigy-item.frml
new file mode 100644
index 0000000..c581893
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/grids/grid-stratigy-item.frml
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+    <DATASETS>
+        <DATASET ID="DS-PROJECT-STTGYS-ITEMS">
+            <SCHEMA>APP</SCHEMA>
+            <TABLENAME>PROJECT_STTGYS_ITEMS</TABLENAME>
+            <KEYFIELDS>PROJ_ID,PSTG_CODE,PSTI_GROUP</KEYFIELDS>
+            <SQL>
+                <SELECT>
+                    SELECT PSTI.PROJ_ID
+                         , PSTI.PSTG_CODE
+                         , PSTI.PSTI_GROUP
+                         , RFGP.RFC_DESC GROUP_DESC
+                         , PSTI.PSTI_CODE
+                         , RFCI.RFC_DESC ITEM_DESC
+                         , PSTI_DETAIL
+                </SELECT>
+                <FROM>FROM PROJECT_STTGYS_ITEMS PSTI
+                        INNER JOIN BGT.REFER_CODE RFGP ON RFGP.RFG_GRP='STG-ITEMS' AND RFC.RFC_CODE=STTG.PSTI_CODE
+                        INNER JOIN BGT.REFER_CODE RFCI ON RFC.RFG_GRP=PSTI.PSTI_GROUP AND RFC.RFC_CODE=STTG.PSTI_CODE
+                </FROM>
+                <ORDER>ORDER BY PSTI_GROUP, PSTI_CODE</ORDER>
+            </SQL>
+            <FIELDS>
+                <FIELD NAME="PROJ_ID" TYPE="VARCHAR" WIDTH="50" LABEL="project.id" />
+                <FIELD NAME="PSTG_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="pstg.code" />
+                <FIELD NAME="PSTI_GROUP" TYPE="VARCHAR" WIDTH="15" LABEL="psti.group" />
+                <FIELD NAME="PSTI_CODE" TYPE="VARCHAR" WIDTH="15" LABEL="psti.code" />
+                <FIELD NAME="PSTI_DETAIL" TYPE="VARCHAR" WIDTH="250" LABEL="psti.detail" />
+                <FIELD NAME="CREATE_BY" TYPE="VARCHAR" WIDTH="50" LABEL="sys.create_by" />
+                <FIELD NAME="CREATE_TIME" TYPE="DATE" WIDTH="0" LABEL="sys.create_time" />
+                <FIELD NAME="UPDATE_BY" TYPE="VARCHAR" WIDTH="50" LABEL="sys.update_by" />
+                <FIELD NAME="UPDATE_TIME" TYPE="DATE" WIDTH="0" LABEL="sys.update_time" />
+            </FIELDS>
+        </DATASET>
+    </DATASETS>
+
+    <DATA-GRIDS>
+        <DATA-GRID ID="GRID-PROJECT-STTGYS-ITEMS">
+            <MASTER-DATA DATASET-ID="DS-PROJECT-STTGYS" MASTER-FIELDS="PROJ_ID,PSTG_CODE" DETAIL-FIELDS="PROJ_ID,PSTG_CODE"/>
+            <UNIQ-CHECK CHECK-FIELDS="PSTI_GROUP" MESSAGE="psti.group duplicate !"></UNIQ-CHECK>
+            <GRID-LIST DATAID="DS-PROJECT-STTGYS-ITEMS" EDIT="Y" DELETE="Y" ADD="Y">
+                <FIELDS>
+                    <FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+                    <FIELD NAME="GROUP_DESC" LABEL="psti.group" WIDTH="10em" ALIGN="left" />
+                    <FIELD NAME="ITEM_DESC" LABEL="psti.code" ALIGN="left" />
+                </FIELDS>
+            </GRID-LIST>
+            <GRID-EDITOR DATAID="DS-PROJECT-STTGYS-ITEMS">
+                <FIELDS>
+                    <FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN" />
+                    <FIELD NAME="PSTG_CODE" INPUTTYPE="HIDDEN" />
+                    <FIELD NAME="GROUP_DESC" INPUTTYPE="HIDDEN" />
+                    <FIELD NAME="ITEM_DESC" INPUTTYPE="HIDDEN" />
+                    <FIELD NAME="PSTI_GROUP" CAPTION="psti.group" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+                        <AJAX-OPTION URL="/api-data.jbx" DATASET="DS-STTGY-GROUP-02" VALUE-FIELD="RFC_CODE" TEXT-FIELD="RFC_DESC" PARAMETERS="RFG_GRP=PSTI_GROUP" CHILD-FIELD="PSTI_CODE" ON-EMPTY="LOAD-ALL">
+                            <UPDATE-FIELDS>
+                                <FIELD TARGET="GROUP_DESC" SRC="RFC_DESC"/>
+                            </UPDATE-FIELDS>
+                        </AJAX-OPTION>
+                    </FIELD>
+                    <FIELD NAME="PSTI_CODE" CAPTION="psti.code" INPUTTYPE="COMBOBOX" REQUIRE="Y">
+                        <AJAX-OPTION URL="/api-data.jbx" DATASET="DS-STTGY-ITEMS-02" VALUE-FIELD="RFC_CODE" TEXT-FIELD="RFC_DESC" PARAMETERS="RFG_GRP=PSTI_GROUP">
+                            <UPDATE-FIELDS>
+                                <FIELD TARGET="ITEM_DESC" SRC="RFC_DESC"/>
+                            </UPDATE-FIELDS>
+                        </AJAX-OPTION>
+                    </FIELD>
+                    <FIELD NAME="PSTI_DETAIL" CAPTION="psti.detail" INPUTTYPE="TEXTAREA" ROWS="3" />
+                </FIELDS>
+                <LAYOUT CLASS="block-layout-form">
+                    <ROW>
+                        <FIELD NAME="PSTI_GROUP" LAYOUT_WIDTH="6"/>
+                        <FIELD NAME="PSTI_CODE" LAYOUT_WIDTH="18"  />
+                    </ROW>
+                    <ROW>
+                        <FIELD NAME="PSTI_DETAIL" LAYOUT_WIDTH="18" OFFSET="6" />
+                    </ROW>
+                    <ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 200px"></div>]]>
+					</ROW>
+                </LAYOUT>
+            </GRID-EDITOR>
+        </DATA-GRID>
+    </DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/grids/grid-stratigy.frml b/DevResources/full-examples/bdgt04/view/frm/grids/grid-stratigy.frml
new file mode 100644
index 0000000..7fcc58e
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/grids/grid-stratigy.frml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+    <DATASETS>
+        <DATASET ID="DS-PROJECT-STTGYS">
+            <SCHEMA>APP</SCHEMA>
+            <TABLENAME>PROJECT_STTGYS</TABLENAME>
+            <KEYFIELDS>PROJ_ID,PSTG_CODE</KEYFIELDS>
+            <SQL>
+                <SELECT>
+                    SELECT STTG.PROJ_ID
+                         , STTG.PSTG_CODE
+                         , RFC.RFC_DESC PSTG_DESC
+                         , STTG.PSTG_CONCEPT
+
+                </SELECT>
+                <FROM>FROM PROJECT_STTGYS STTG
+                           INNER JOIN BGT.REFER_CODE RFC ON RFC.RFG_GRP='STG-MAIN' AND RFC.RFC_CODE=STTG.PSTG_CODE
+                    </FROM>
+                <ORDER>ORDER BY PSTG_CODE</ORDER>
+            </SQL>
+            <FIELDS>
+                <FIELD NAME="PROJ_ID" TYPE="VARCHAR" WIDTH="50" LABEL="project.id" />
+                <FIELD NAME="PSTG_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="pstg.code" />
+                <FIELD NAME="PSTG_CONCEPT" TYPE="VARCHAR" WIDTH="500" LABEL="pstg.concept" />
+                <FIELD NAME="CREATE_BY" TYPE="VARCHAR" WIDTH="50" LABEL="sys.create_by" />
+                <FIELD NAME="CREATE_TIME" TYPE="DATE" WIDTH="0" LABEL="sys.create_time" />
+                <FIELD NAME="UPDATE_BY" TYPE="VARCHAR" WIDTH="50" LABEL="sys.update_by" />
+                <FIELD NAME="UPDATE_TIME" TYPE="DATE" WIDTH="0" LABEL="sys.update_time" />
+            </FIELDS>
+        </DATASET>
+    </DATASETS>
+
+    <DATA-GRIDS>
+        <DATA-GRID ID="GRID-PROJECT-STTGYS">
+            <MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID" DETAIL-FIELDS="PROJ_ID"/>
+            <UNIQ-CHECK CHECK-FIELDS="PSTG_CODE" MESSAGE="pstg.code duplicate !"></UNIQ-CHECK>
+            <GRID-LIST DATAID="DS-PROJECT-STTGYS" EDIT="Y" DELETE="Y" ADD="Y">
+                <FIELDS>
+                    <FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+                    <FIELD NAME="PSTG_CODE" LABEL="pstg.code" WIDTH="12em" ALIGN="center" />
+                    <FIELD NAME="PSTG_DESC" LABEL="pstg.desc" ALIGN="left" />
+                </FIELDS>
+            </GRID-LIST>
+            <GRID-EDITOR DATAID="DS-PROJECT-STTGYS">
+                <FIELDS>
+                    <FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN" />
+                    <FIELD NAME="PSTG_CODE" CAPTION="pstg.desc" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+                        <LIST-OPTION TABLE="BGT.REFER_CODE" TEXT="#RFC_DESC" VALUE="RFC_CODE" FILTER="RFG_GRP='STG-MAIN'" FIRSTLIST="@{CAPTION}"/>
+                    </FIELD>
+                    <FIELD NAME="PSTG_CONCEPT" CAPTION="pstg.concept" INPUTTYPE="TEXTAREA" ROWS="2" />
+                    <FIELD NAME="GRID-STTGYS-ITEMS" INPUTTYPE="DATA-GRID" GRID-ID="GRID-PROJECT-STTGYS-ITEMS" CAPTION="psti.header"/>
+                </FIELDS>
+                <LAYOUT CLASS="block-layout-form">
+                    <ROW>
+                        <FIELD NAME="PSTG_CODE" LAYOUT_WIDTH="16" OFFSET="4" />
+                    </ROW>
+                    <SECTION>
+                        <HEADER CLASS="form-section-header col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{pstg.header}</h4>]]>
+					</HEADER>
+                        <ROW>
+                            <FIELD NAME="GRID-STTGYS-ITEMS" LAYOUT_WIDTH="20" OFFSET="4"/>
+                        </ROW>
+                    </SECTION>
+                    <ROW>
+                        <FIELD NAME="PSTG_CONCEPT" LAYOUT_WIDTH="16" OFFSET="4" />
+                    </ROW>
+                    <ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 200px"></div>]]>
+					</ROW>
+                </LAYOUT>
+            </GRID-EDITOR>
+        </DATA-GRID>
+    </DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt04/view/frm/grids/grid-work-budget.frml b/DevResources/full-examples/bdgt04/view/frm/grids/grid-work-budget.frml
new file mode 100644
index 0000000..26b37e8
--- /dev/null
+++ b/DevResources/full-examples/bdgt04/view/frm/grids/grid-work-budget.frml
@@ -0,0 +1,174 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-PROJECT_BUDGET_ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, PBDG_ID
+					, BGM_CODE
+				    , BUD.GET_BUDGET (BGM_CODE) BGM_NAME
+					, PBGI_QT_01
+					, PBGI_QT_02
+					, PBGI_QT_03
+					, PBGI_QT_04
+					, PBGI_QTY
+					, PBGI_COST
+					, PBGI_FREQ
+					, PBGI_ASSET_TYPE
+					, PBGI_REPLACE
+					, PBGI_ADDITION
+					, PBGI_ACQUIRE
+					, PBGI_TOTAL
+					, PBGI_REASON
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGET_ITEMS</FROM>
+				<ORDER>ORDER BY PROJ_ID,BGM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="รหัสหมวดงบประมาณ" WIDTH="20"/>
+				<FIELD NAME="PBGI_QT_01" TYPE="NUMBER" LABEL="จำนวนไตรมาส 1" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_02" TYPE="NUMBER" LABEL="จำนวนไตรมาส 2" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_03" TYPE="NUMBER" LABEL="จำนวนไตรมาส 3" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_04" TYPE="NUMBER" LABEL="จำนวนไตรมาส 4" WIDTH="15"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="จำนวน" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="ราคาต่อหน่วย" WIDTH="15"/>
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="ความถี่/จำนวนครั้ง" WIDTH="10"/>
+				<FIELD NAME="PBGI_ASSET_TYPE" TYPE="TEXT" LABEL="ประเภทสินทรัพย์" WIDTH="10"/>
+				<FIELD NAME="PBGI_REPLACE" TYPE="NUMBER" LABEL="ทดแทนของเดิม" WIDTH="10"/>
+				<FIELD NAME="PBGI_ADDITION" TYPE="NUMBER" LABEL="เพิ่มเติม" WIDTH="10"/>
+				<FIELD NAME="PBGI_ACQUIRE" TYPE="NUMBER" LABEL="จัดหาใหม่" WIDTH="10"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="รวมเป็นเงิน" WIDTH="15"/>
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="เหตุผลความจำเป็น" WIDTH="4000"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<DATA-GRIDS>
+		<DATA-GRID ID="GRID-WORK-BUDGET">
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,PBDG_ID" DETAIL-FIELDS="PROJ_ID,PBDG_ID"/>
+			<UNIQ-CHECK CHECK-FIELDS="BGM_CODE" MESSAGE="pwbg.bgm_code duplicate !"></UNIQ-CHECK>
+			<GRID-LIST DATAID="DS-PROJECT_BUDGET_ITEMS" EDIT="Y" DELETE="Y" CLASS="table-primary">
+				<KEYFIELDS>PROJ_ID,BGM_CODE</KEYFIELDS>
+				<TITLES>
+					<ROW>
+						<FIELD NAME="BGM_CODE" LABEL="pwbg.bgm_code" WIDTH="10em" ALIGN="center" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_NAME" LABEL="pwbg.bgm_name" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_QUOTERS" LABEL="pwbg.quoter" ALIGN="center" COLS-SPAN="4"/>
+						<FIELD NAME="PBGI_TOTAL" LABEL="pwbg.total" WIDTH="6em" ALIGN="right" ROWS-SPAN="2"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_QT_01" LABEL="1" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_QT_02" LABEL="2" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_QT_03" LABEL="3" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_QT_04" LABEL="4" WIDTH="6em" ALIGN="right"/>
+					</ROW>
+				</TITLES>
+				<FIELDS>
+					<FIELD NAME="BGM_CODE" LABEL="pwbg.bgm_code" WIDTH="15em" ALIGN="center"/>
+					<FIELD NAME="BGM_NAME" LABEL="pwbg.bgm_name" ALIGN="left"/>
+					<FIELD NAME="PBGI_QT_01" LABEL="pwbg.quotr_01" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_QT_02" LABEL="pwbg.quotr_02" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_QT_03" LABEL="pwbg.quotr_03" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_QT_04" LABEL="pwbg.quotr_04" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_TOTAL" LABEL="pwbg.total" WIDTH="10em" ALIGN="right"/>
+				</FIELDS>
+				<FOOTER SHOW="Y"/>
+				<SCRIPT>
+					<INITIALIZE>
+						<![CDATA[
+						(ctx)=> {
+						    ctx.sum_of = {};
+							console.log("init grid-budget");
+							const fieldFormat = (value) => {
+								return formatNumber(value, 0);
+							}
+							const summary = (field, data) => {
+								let total = 0;
+								for (const row of data) {
+									total += (+row[field])||0;
+								}
+								ctx.sum_of[field] = total;
+								return formatNumber(total,0);
+							}
+
+							const quoterFields = $$("field^pbgi_qt_",ctx.gridColumn.flat());
+							for (let field of quoterFields) {
+								field.formatter = fieldFormat;
+								let fieldName = field.field;
+								field.footerFormatter = (data)=>{
+									return summary(fieldName,data);
+								}
+							}
+
+							let fieldName = "pbgi_total";
+							$$("field=pbgi_total",ctx.gridColumn.flat()).formatter = fieldFormat;
+							$$("field=pbgi_total",ctx.gridColumn.flat()).footerFormatter = (data)=>{
+								return summary(fieldName,data);
+							};
+						}
+						]]>
+					</INITIALIZE>
+				</SCRIPT>
+			</GRID-LIST>
+
+			<GRID-EDITOR DATAID="DS-PROJECT_BUDGET_ITEMS">
+				<FIELDS>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="BGM_NAME" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-BUDGET-01" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div><label>[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+					<FIELD NAME="PBGI_QT_01" CAPTION="pwbg.quotr_01" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"/>
+					<FIELD NAME="PBGI_QT_02" CAPTION="pwbg.quotr_02" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"/>
+					<FIELD NAME="PBGI_QT_03" CAPTION="pwbg.quotr_03" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"/>
+					<FIELD NAME="PBGI_QT_04" CAPTION="pwbg.quotr_04" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="pwbg.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT CLASS="block-layout-form">
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="16"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_QT_01" LAYOUT_WIDTH="3" OFFSET="6"/>
+						<FIELD NAME="PBGI_QT_02" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_QT_03" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_QT_04" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 350px"></div>]]>
+					</ROW>
+				</LAYOUT>
+				<SCRIPT>
+					<INITIALIZE><![CDATA[
+						const quoterTotal = ()=>{
+							$$("PBGI_TOTAL").setValue($$("^PBGI_QT_").sum());
+						}
+						$$("^PBGI_QT_").on("change",quoterTotal);
+						]]></INITIALIZE>
+				</SCRIPT>
+			</GRID-EDITOR>
+		</DATA-GRID>
+	</DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt05/defs/ajax.xml b/DevResources/full-examples/bdgt05/defs/ajax.xml
new file mode 100644
index 0000000..25237df
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/defs/ajax.xml
@@ -0,0 +1,201 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<DATASETS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/ajax.xsd">
+	<DATASET ID="DS-PROJECT-02">
+		<SCHEMA>BUD</SCHEMA>
+		<TABLEDESC>Main Activity</TABLEDESC>
+		<MAXROWS>100</MAXROWS>
+		<SQL>
+			<SELECT>SELECT PJM.PJM_CODE
+				, PJM.PJM_NAME
+				, PJM.PJM_JOB_TYPE
+				, PJM.PJM_WORK_PLAN
+				, PJM.PJM_PRODUCT
+				, PJM.PJM_GROUP_PLAN
+				, PJM.PJM_JOB_PROJECT
+				, PJM.PJM_STRATEGY
+				, PJM.PJM_ACTIVE
+			</SELECT>
+			<FROM>FROM PROJECT_M PJM</FROM>
+			<WHERE>
+				WHERE (PJM.PJM_CODE LIKE '%'||:SEARCH||'%' OR PJM.PJM_NAME LIKE '%'||:SEARCH||'%')
+			</WHERE>
+			<GROUP/>
+			<ORDER/>
+		</SQL>
+	</DATASET>
+
+	<DATASET ID="DS-ACTIVITY-02">
+		<SCHEMA>BUD</SCHEMA>
+		<TABLEDESC>Main Activity</TABLEDESC>
+		<MAXROWS>100</MAXROWS>
+		<SQL>
+			<SELECT>
+				SELECT ACM_CODE
+				, ACM_NAME
+				, NODE_LEVEL
+				, MAIN_NODE
+				, ACM_UNIT
+				, ACM_START_YEAR
+				, ACM_END_YEAR
+				, STM_CODE
+				, JBT_CODE
+				, JBP_CODE
+				, EXP_CODE
+				, PJM_CODE
+				, STG_CODE
+				, NODE_TYPE
+				, DECODE(NODE_TYPE,'C','true','') disabled
+			</SELECT>
+			<FROM>FROM BGT.V_ACTIVITY_TREE ACM</FROM>
+			<WHERE>
+				WHERE 0=0
+				AND (:DV_YEAR BETWEEN ACM_START_YEAR AND ACM_END_YEAR)
+				-- AND (ACM.STM_CODE = '%' OR ACM.STM_CODE = :STM_CODE)
+				AND (ACM.ACM_CODE LIKE '%'||:SEARCH||'%' OR ACM.ACM_NAME LIKE '%'||:SEARCH||'%')
+			</WHERE>
+			<GROUP/>
+			<ORDER/>
+		</SQL>
+	</DATASET>
+
+	<DATASET ID="DS-BUDGET-02">
+		<SCHEMA>BUD</SCHEMA>
+		<TABLEDESC>Main Activity</TABLEDESC>
+		<MAXROWS>100</MAXROWS>
+		<SQL>
+			<SELECT>
+				SELECT BGD.BGM_CODE
+				, BGD.BGM_NAME
+				, BGD.BGM_EXPENSE_TYPE
+				, BGD.BGM_UNIT
+				, BGD.BGM_UNIT_RATE
+				, BGD.BGM_ACTIVE
+				, BGD.BGM_PREPARE
+			</SELECT>
+			<FROM>FROM BUDGET_M BGD</FROM>
+			<WHERE>
+				WHERE (BGD.BGM_CODE LIKE '%'||:SEARCH||'%' OR BGD.BGM_NAME LIKE '%'||:SEARCH||'%')
+			</WHERE>
+			<ORDER>ORDER BY BGM_CODE</ORDER>
+		</SQL>
+	</DATASET>
+
+	<DATASET ID="DS-STTGY-GROUP-02">
+		<SCHEMA>APP</SCHEMA>
+		<SQL>
+			<SELECT>SELECT RFG_GRP
+				, RFC_CODE
+				, RFC_DESC
+				, RFC_FLAG
+				, RFC_ORDER
+			</SELECT>
+			<FROM>FROM REFER_CODE</FROM>
+			<WHERE>WHERE (RFG_GRP = 'STG-ITEMS')
+					 AND (RFC_CODE LIKE '%'||:SEARCH||'%' OR RFC_DESC LIKE '%'||:SEARCH||'%')</WHERE>
+			<ORDER>ORDER BY RFC_CODE</ORDER>
+		</SQL>
+	</DATASET>
+
+	<DATASET ID="DS-STTGY-ITEMS-02">
+		<SCHEMA>APP</SCHEMA>
+		<SQL>
+			<SELECT>SELECT RFG_GRP
+				, RFC_CODE
+				, RFC_DESC
+				, RFC_FLAG
+				, RFC_ORDER
+			</SELECT>
+			<FROM>FROM REFER_CODE</FROM>
+			<WHERE>WHERE (RFG_GRP = :RFG_GRP)
+					 AND (RFC_CODE LIKE '%'||:SEARCH||'%' OR RFC_DESC LIKE '%'||:SEARCH||'%')</WHERE>
+			<ORDER>ORDER BY RFC_CODE</ORDER>
+		</SQL>
+	</DATASET>
+
+
+	<DATASET ID="DS-ACTIVITY-02-BDGT">
+		<SCHEMA>BUD</SCHEMA>
+		<TABLEDESC>Main Activity</TABLEDESC>
+		<MAXROWS>100</MAXROWS>
+		<SQL>
+			<SELECT>
+				SELECT ACM_CODE
+				, ACM_NAME
+				, NODE_LEVEL
+				, MAIN_NODE
+				, ACM_UNIT
+				, ACM_START_YEAR
+				, ACM_END_YEAR
+				, STM_CODE
+				, JBT_CODE
+				, JBP_CODE
+				, EXP_CODE
+				, PJM_CODE
+				, STG_CODE
+				, NODE_TYPE
+				, DECODE(NODE_TYPE,'C','true','') disabled
+			</SELECT>
+			<FROM>FROM BGT.V_ACTIVITY_TREE ACM</FROM>
+			<WHERE>
+				WHERE 0=0
+				AND (:DV_YEAR BETWEEN ACM_START_YEAR AND ACM_END_YEAR)
+				-- AND (ACM.STM_CODE = '%' OR ACM.STM_CODE = :STM_CODE)
+				AND (ACM.ACM_CODE LIKE '%'||:SEARCH||'%' OR ACM.ACM_NAME LIKE '%'||:SEARCH||'%')
+			</WHERE>
+			<GROUP/>
+			<ORDER/>
+		</SQL>
+	</DATASET>
+
+	<DATASET ID="DS-BUDGET-02-BDGT">
+		<SCHEMA>APP</SCHEMA>
+		<TABLEDESC>Main Activity</TABLEDESC>
+		<MAXROWS>100</MAXROWS>
+		<SQL>
+			<SELECT>
+				SELECT BGM.BGM_CODE
+				, BGM.BGM_NAME
+				, BGM.EXP_TYPE
+				, BGM.BGM_UNIT
+				, BGM.BGM_UNIT_RATE
+				, BGM.BGM_SEQ
+				, BGM.NODE_LEVEL
+				, BGM.MAIN_NODE
+				, DECODE(NODE_TYPE,'C','true','') disabled
+			</SELECT>
+			<FROM>FROM V_BUDGET_TREE BGM</FROM>
+			<WHERE>
+				WHERE (BGM.BGM_CODE LIKE '%'||:SEARCH||'%' OR BGM.BGM_NAME LIKE '%'||:SEARCH||'%')
+			</WHERE>
+			<ORDER>ORDER BY BGM_SEQ</ORDER>
+		</SQL>
+	</DATASET>
+
+
+
+	<DATASET ID="DS-EQUIPT-BUDGET">
+		<SCHEMA>APP</SCHEMA>
+		<TABLEDESC>Main Activity</TABLEDESC>
+		<MAXROWS>100</MAXROWS>
+		<SQL>
+			<SELECT>
+				SELECT BGM.BGM_CODE
+				, BGM.BGM_NAME
+				, BGM.EXP_TYPE
+				, BGM.BGM_UNIT
+				, BGM.BGM_UNIT_RATE
+				, BGM.BGM_SEQ
+				, BGM.NODE_LEVEL
+				, BGM.MAIN_NODE
+				, DECODE(NODE_TYPE,'C','true','') disabled
+			</SELECT>
+			<FROM>FROM V_BUDGET_TREE BGM</FROM>
+			<WHERE>
+				WHERE (BGM_CODE LIKE '3.1%')
+				AND (BGM.BGM_CODE LIKE '%'||:SEARCH||'%' OR BGM.BGM_NAME LIKE '%'||:SEARCH||'%')
+			</WHERE>
+			<ORDER>ORDER BY BGM_SEQ</ORDER>
+		</SQL>
+	</DATASET>
+
+</DATASETS>
\ No newline at end of file
diff --git a/DevResources/full-examples/bdgt05/view/bgt0501010-general.jsp b/DevResources/full-examples/bdgt05/view/bgt0501010-general.jsp
new file mode 100644
index 0000000..f447a75
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/bgt0501010-general.jsp
@@ -0,0 +1,51 @@
+<%@ page import="org.apache.commons.codec.*" %>
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=pageItemInfo.getProgTitle()%></h1>
+<%
+	String _formId = "bdgt-0501010/general";
+	try {
+		String data = factory.rqsCtx.getParameter("data","");
+		if (!data.isBlank()) {
+			data = JUtils.decBase64(data);
+			data = URLDecoder.decode(data, CharEncoding.UTF_8);
+
+			boolean isEditMode = factory.rqsCtx.isPostParam("add") || factory.rqsCtx.isPostParam("edit") || factory.rqsCtx.isPostParam("view");
+			JSONObject jsData = new JSONObject(data);
+			String type = jsData.getString("type");
+			String acmCode = jsData.getString("acm_code");
+			String projId = jsData.getString("proj_id");
+
+			if (isEditMode && type.equals("rutn")) {
+				_formId = "bdgt-0501010/routine";
+			} else if (isEditMode && type.equals("mngt")) {
+				_formId = "bdgt-0501010/manage";
+			} else if (isEditMode && type.equals("eqpt")) {
+				_formId = "bdgt-0501010/equipt";
+			} else if (isEditMode && type.equals("cnst")) {
+				_formId = "bdgt-0501010/construct";
+			}
+
+			dynForm = new DynForm(application, request, response,  "bdgt05", _formId);
+			dynForm.setFormOwner(request.getRequestURL().toString());
+			dynForm.setFormvar("ACM_CODE",acmCode);
+			dynForm.setFormvar("PROJ_ID",projId);
+		} else {
+			dynForm = new DynForm(application, request, response,  "bdgt05", _formId);
+		}
+
+		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+
+		if (dynForm.workIn(WorkMode.Editing)) {
+			factory.pageCtx.addWidget(DynConstants.PageWidget.FileBox);
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt05/view/bgt0501010.jsp b/DevResources/full-examples/bdgt05/view/bgt0501010.jsp
new file mode 100644
index 0000000..0f54641
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/bgt0501010.jsp
@@ -0,0 +1,20 @@
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=pageItemInfo.getProgTitle()%></h1>
+<%
+	try {
+		dynForm = new DynForm(application, request, response, "bdgt05", "bdgt-0501010");
+		dynForm.setFormOwner(request.getRequestURL().toString());
+//		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+		if (dynForm.workIn(WorkMode.Editing)) {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt05/view/bgt0501020-budget.jsp b/DevResources/full-examples/bdgt05/view/bgt0501020-budget.jsp
new file mode 100644
index 0000000..bb2a0a8
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/bgt0501020-budget.jsp
@@ -0,0 +1,20 @@
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=$M.get("pclp.budget_edit")%></h1>
+<%
+	try {
+		dynForm = new DynForm(application, request, response, "bdgt05", "bdgt-0501020-budget");
+		dynForm.setFormOwner(request.getRequestURL().toString());
+		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+		if (dynForm.workIn(WorkMode.Editing)) {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt05/view/bgt0501020.jsp b/DevResources/full-examples/bdgt05/view/bgt0501020.jsp
new file mode 100644
index 0000000..4045419
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/bgt0501020.jsp
@@ -0,0 +1,20 @@
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=pageItemInfo.getProgTitle()%></h1>
+<%
+	try {
+		dynForm = new DynForm(application, request, response, "bdgt05", "bdgt-0501020");
+		dynForm.setFormOwner(request.getRequestURL().toString());
+		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+		if (dynForm.workIn(WorkMode.Editing)) {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt05/view/bgt0501030-budget.jsp b/DevResources/full-examples/bdgt05/view/bgt0501030-budget.jsp
new file mode 100644
index 0000000..ccef64d
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/bgt0501030-budget.jsp
@@ -0,0 +1,20 @@
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=$M.get("pclp.budget_edit")%></h1>
+<%
+	try {
+		dynForm = new DynForm(application, request, response, "bdgt05", "bdgt-0501030-budget");
+		dynForm.setFormOwner(request.getRequestURL().toString());
+		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+		if (dynForm.workIn(WorkMode.Editing)) {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt05/view/bgt0501030.jsp b/DevResources/full-examples/bdgt05/view/bgt0501030.jsp
new file mode 100644
index 0000000..d2d8ca4
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/bgt0501030.jsp
@@ -0,0 +1,20 @@
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=pageItemInfo.getProgTitle()%></h1>
+<%
+	try {
+		dynForm = new DynForm(application, request, response,  "bdgt05", "bdgt-0501030");
+		dynForm.setFormOwner(request.getRequestURL().toString());
+		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+		if (dynForm.workIn(WorkMode.Editing)) {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt05/view/frm/bdgt-0501010.frml b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501010.frml
new file mode 100644
index 0000000..d51794c
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501010.frml
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT PROJ_YEAR
+					, STM_CODE
+					, STM_NAME
+					, FLOW_TYPE
+					, FLOW_TYPE_DESC
+					, PROJ_SEQ
+					, FLOW_STATE
+					, JDTOTT(SYSDATE - (DBMS_RANDOM.VALUE(3, 10))) STATE_DATE
+				</SELECT>
+				<FROM>
+					FROM (SELECT DISTINCT :PROJ_YEAR                     PROJ_YEAR
+								, PROJ.STM_CODE                  STM_CODE
+								, BUD.GET_SECTION(PROJ.STM_CODE) STM_NAME
+								, FTYP.RFC_CODE                  FLOW_TYPE
+								, FTYP.RFC_DESC                  FLOW_TYPE_DESC
+								, FTYP.RFC_ORDER                 PROJ_SEQ
+								, BGT.FLOW_STATE('STEP-02')      FLOW_STATE
+							FROM REFER_CODE            FTYP
+								INNER JOIN REFER_CODE PTYPE ON PTYPE.RFG_GRP = 'PROJ-TYPE' AND PTYPE.RFC_FLAG = FTYP.RFC_CODE
+								INNER JOIN PROJECTS   PROJ ON PROJ.PROJ_TYPE = PTYPE.RFC_CODE
+							WHERE FTYP.RFG_GRP = 'FLOW-TYPE' AND FTYP.RFC_CODE = 'GENERAL' AND PROJ.PROJ_YEAR = :PROJ_YEAR
+					ORDER BY STM_NAME) QR1
+				</FROM>
+				<ORDER>ORDER BY STM_NAME</ORDER>
+			</SQL>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-MASTER">
+			<HEADER NAVI="N" EDIT="N" ADD="N" DELETE="N" VIEW="N"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="STM_NAME" LABEL="props.stm_name" ALIGN="left" WIDTH="20em">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 text-nowrap"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="FLOW_TYPE_DESC" LABEL="props.type" ALIGN="left">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 row"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="FLOW_STATE" LABEL="props.state" ALIGN="center" WIDTH="15em"/>
+				<FIELD NAME="STATE_DATE" LABEL="props.state_date" ALIGN="center" WIDTH="15em"/>
+				<COMMAND-BUTTONS>
+					<BUTTON NAME="btnEditor" CLASS="btn btn-warning btn-editor" ICON-CLASS="fa fa-edit white">
+						<EVENT ON="click"><![CDATA[
+							({ev,row})=>{
+								console.log(row);
+								row.pageTitle = $$("h4.page-title").html();
+								$PageCtx.saveSessionData("general", row);
+								$PageCtx.saveStorageData("general#search", {proj_year: row.proj_year, stm_code : row.stm_code});
+								$WebNavi.goto("/bdgt05/bgt0501010-general");
+							}
+						]]></EVENT>
+					</BUTTON>
+					<BUTTON NAME="btnViewer" CLASS="btn btn-primary btn-viewer" ICON-CLASS="fa fa-file-alt white">
+						<EVENT ON="click"><![CDATA[({ev,row})=>{ console.log(row);}]]></EVENT>
+					</BUTTON>
+				</COMMAND-BUTTONS>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="Y" ALLOW-NO-FILTER="Y">
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="COMBOBOX" SEARCH-ORIGIN="PROJ_YEAR=${VALUE}">
+						<LIST-OPTION TABLE="VL_YEAR" TEXT="#DV_YEAR" VALUE="DV_YEAR" ORDER="DV_YEAR" FIRSTLIST="@{NONE}"/>
+					</FIELD>
+					<FIELD NAME="STM_CODE" CAPTION="props.stm_name" INPUTTYPE="COMBOBOX" SEARCH-ORIGIN="STM_CODE=${VALUE}">
+						<LIST-OPTION TABLE="BUD.SECTION_M" TEXT="#STM_NAME" VALUE="STM_CODE" ORDER="STM_NAME" FIRSTLIST=""/>
+					</FIELD>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" VAL_WIDTH="6" CAPT_WIDTH="12" LAYOUT_WIDTH="12"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="STM_CODE" VAL_WIDTH="12" CAPT_WIDTH="6" LAYOUT_WIDTH="24"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+		</FORM_BROWSE>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/construct.frml b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/construct.frml
new file mode 100644
index 0000000..2b8cceb
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/construct.frml
@@ -0,0 +1,338 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-construct-budget.frml"></INCLUDE>
+	</INCLUDES>
+
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, PROJ_TYPE
+					, PROJ_YEAR
+					, PJM_CODE
+					, STM_CODE
+					, BTM_CODE
+					, ACM_CODE
+					, BUD.GET_ACTIVITY(ACM_CODE) ACM_NAME
+					, PLAN_TYPE
+					, PROJ_DURATION
+					, PROJ_INST_COUNT
+					, PROJ_START_YEAR
+					, PROJ_END_YEAR
+					, PROJ_FOR_STAFF
+					, PROJ_FROM_YEAR
+					, CREATE_BY
+					, CREATE_TIME
+					, UPDATE_BY
+					, UPDATE_TIME
+				</SELECT>
+				<FROM>FROM PROJECTS</FROM>
+				<FILTER>WHERE PROJ_ID = :PROJ_ID</FILTER>
+				<ORDER>ORDER BY PROJ_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PROJ_TYPE" TYPE="TEXT" LABEL="ประเภทโครงการ" WIDTH="25"/>
+				<FIELD NAME="PROJ_YEAR" TYPE="NUMBER" LABEL="ปีงบประมาณ" WIDTH="15"/>
+				<FIELD NAME="PJM_CODE" TYPE="TEXT" LABEL="รหัสโครงการ (BUD)" WIDTH="20"/>
+				<FIELD NAME="STM_CODE" TYPE="TEXT" LABEL="รหัสหน่วยงาน" WIDTH="10"/>
+				<FIELD NAME="BTM_CODE" TYPE="TEXT" LABEL="รหัสประเภทงบประมาณ" WIDTH="10"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20"/>
+				<FIELD NAME="PLAN_TYPE" TYPE="TEXT" LABEL="ประเภทแผน" WIDTH="15"/>
+				<FIELD NAME="PROJ_DURATION" TYPE="NUMBER" LABEL="ระยะเวลาดำเนินการ (วัน)" WIDTH="15"/>
+				<FIELD NAME="PROJ_INST_COUNT" TYPE="NUMBER" LABEL="ระยะเวลาดำเนินการ (วัน)" WIDTH="15"/>
+				<FIELD NAME="PROJ_START_YEAR" TYPE="NUMBER" LABEL="ปีที่เริ่มโครงการ (ก่อสร้าง)" WIDTH="15"/>
+				<FIELD NAME="PROJ_END_YEAR" TYPE="NUMBER" LABEL="ปีที่สิ้นสุดโครงการ (ก่อสร้าง)" WIDTH="15"/>
+				<FIELD NAME="PROJ_FOR_STAFF" TYPE="NUMBER" LABEL="จำนวนบุคลากรที่รองรับ" WIDTH="15"/>
+				<FIELD NAME="PROJ_FROM_YEAR" TYPE="NUMBER" LABEL="ต่อเนื่องจากปี" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-CONST">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_CONST_INFO</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT PROJ_ID
+					, ACM_CODE
+					, PCTI_ADDRESS
+					, PCTI_TUMBON
+					, PCTI_AMPUR
+					, PCTI_PROVINCE
+					, PCTI_ADDR_NOTE
+					, PCTI_AREA
+					, PCTI_EMP_COUNT
+					, PCTI_CHK_LOCATION
+					, PCTI_CHK_DOCUMENT
+					, PCTI_REMARK
+					, CREATE_BY
+					, JDTOE(CREATE_TIME) CREATE_TIME, CREATE_TIME DT_CREATE_TIME
+					, UPDATE_BY
+					, JDTOE(UPDATE_TIME) UPDATE_TIME, UPDATE_TIME DT_UPDATE_TIME
+				</SELECT>
+				<FROM>FROM PROJECT_CONST_INFO</FROM>
+				<ORDER>ORDER BY PROJ_ID, ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="project.id" WIDTH="50"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="project.acm_code" WIDTH="20"/>
+				<FIELD NAME="PCTI_ADDRESS" TYPE="TEXT" LABEL="pcti.address" WIDTH="200"/>
+				<FIELD NAME="PCTI_TUMBON" TYPE="TEXT" LABEL="pcti.tumbon" WIDTH="200"/>
+				<FIELD NAME="PCTI_AMPUR" TYPE="TEXT" LABEL="pcti.ampur" WIDTH="200"/>
+				<FIELD NAME="PCTI_PROVINCE" TYPE="TEXT" LABEL="pcti.province" WIDTH="200"/>
+				<FIELD NAME="PCTI_ADDR_NOTE" TYPE="TEXT" LABEL="pcti.addr_note" WIDTH="1000"/>
+				<FIELD NAME="PCTI_AREA" TYPE="NUMBER" LABEL="pcti.area" WIDTH="15"/>
+				<FIELD NAME="PCTI_EMP_COUNT" TYPE="NUMBER" LABEL="pcti.emp_count" WIDTH="15"/>
+				<FIELD NAME="PCTI_CHK_LOCATION" TYPE="TEXT" LABEL="pcti.chk_location" WIDTH="500"/>
+				<FIELD NAME="PCTI_CHK_DOCUMENT" TYPE="TEXT" LABEL="pcti.chk_document" WIDTH="500"/>
+				<FIELD NAME="PCTI_REMARK" TYPE="TEXT" LABEL="pcti.remark" WIDTH="2000"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="sys.create_by" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="sys.create_time" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="sys.update_by" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="sys.update_time" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RESET="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PJM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="STM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="BTM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PLAN_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_DURATION" INPUTTYPE="HIDDEN"/>
+
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.const_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_NAME" CAPTION="project.const_name" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PROJ_START_YEAR" CAPTION="project.start_year" INPUTTYPE="TEXT" DATATYPE="NUMTEXT" ALIGN="center"/>
+				<FIELD NAME="PROJ_END_YEAR" CAPTION="project.end_year" INPUTTYPE="TEXT" DATATYPE="NUMTEXT" ALIGN="center"/>
+				<FIELD NAME="PROJ_DURATION" CAPTION="project.duration" INPUTTYPE="TEXT" DATATYPE="NUMBER" ALIGN="center" DECIMAL="0" SUFFIX="day"/>
+				<FIELD NAME="PROJ_INST_COUNT" CAPTION="project.inst_count" INPUTTYPE="TEXT" DATATYPE="NUMTEXT" ALIGN="center"/>
+
+				<FIELD NAME="BUDGET_YEAR_01" CAPTION="2567" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="BUDGET_YEAR_02" CAPTION="2568" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="BUDGET_YEAR_03" CAPTION="2569" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="BUDGET_YEAR_04" CAPTION="2570" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="BUDGET_YEAR_05" CAPTION="2571" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+				<SECTION ID="SECT-PROJECT-CONST">
+					<FIELD NAME="PCTI_ADDRESS" CAPTION="pcti.address" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_TUMBON" CAPTION="pcti.tumbon" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_AMPUR" CAPTION="pcti.ampur" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_PROVINCE" CAPTION="pcti.province" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_ADDR_NOTE" CAPTION="pcti.addr_note" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_AREA" CAPTION="pcti.area" INPUTTYPE="TEXT" DATATYPE="NUMBER" SUFFIX="segtor"/>
+					<FIELD NAME="PCTI_EMP_COUNT" CAPTION="pcti.emp_count" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+					<FIELD NAME="PCTI_CHK_LOCATION" CAPTION="pcti.chk_location" INPUTTYPE="CHECKBOXGROUP">
+						<LIST-OPTION TABLE="REFER_CODE" VALUE="RFC_CODE" TEXT="RFC_DESC" FILTER="RFG_GRP='CNT-PAREA'" COLUMN="4" ORDER="RFC_ORDER"/>
+					</FIELD>
+					<FIELD NAME="PCTI_CHK_DOCUMENT" CAPTION="pcti.chk_document" INPUTTYPE="CHECKBOXGROUP">
+						<LIST-OPTION TABLE="REFER_CODE" VALUE="RFC_CODE" TEXT="RFC_DESC" FILTER="RFG_GRP='CNT-PDOC'" COLUMN="4" ORDER="RFC_ORDER"/>
+					</FIELD>
+					<FIELD NAME="PCTI_REMARK" CAPTION="pcti.remark" INPUTTYPE="TEXTAREA" ROWS="3"/>
+				</SECTION>
+
+				<FIELD NAME="GRID-BUDGET" INPUTTYPE="DATA-GRID" GRID-ID="GRID-CONST-BUDGET" ROWS="5" CAPTION="project.budget"/>
+				<SECTION ID="SEC-ATTATCH-FILE">
+					<FIELD NAME="FILE_BOX_01" CAPTION="แบบ/ประมาณการราคาอาคารสำนักงาน" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_02" CAPTION="หนังสืออนุญาตให้ใช้ที่ดิน ได้มาซึ่งกรรมสิทธิ์ในที่ดิน" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_03" CAPTION="ผังบริเวณ ประมาณราคาผังบริเวณ สิ่งก่อสร้างประกอบ" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_04" CAPTION="ประมาณการถมดิน/รื้อถอนอาคาร/กำแพงกันดิน ฯลฯ (ถ้ามี)" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_05" CAPTION="ประมาณการขยายเขตไฟฟ้า ขยายเขตประปา" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+				</SECTION>
+
+			</FIELDS>
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_NAME" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_EMP_COUNT" LAYOUT_WIDTH="4" OFFSET="4"/>
+						<FIELD NAME="PROJ_DURATION" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PROJ_INST_COUNT" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PROJ_START_YEAR" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PROJ_END_YEAR" LAYOUT_WIDTH="4"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-CONST" DATASET="DS-PROJECT-CONST" AUTO-INSERT="Y" TYPE="DATA-SECTION">
+					<HEADER CLASS="col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{project.year_budgets}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="BUDGET_YEAR_01" LAYOUT_WIDTH="4" OFFSET="4"/>
+						<FIELD NAME="BUDGET_YEAR_02" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="BUDGET_YEAR_03" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="BUDGET_YEAR_04" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="BUDGET_YEAR_05" LAYOUT_WIDTH="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-PROJECT-CONST" DATASET="DS-PROJECT-CONST" AUTO-INSERT="Y" TYPE="DATA-SECTION">
+					<HEADER CLASS="col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[
+						<h4 class="ml-3 col-24">@M{pcti.location_info}</h4>
+						]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PCTI_ADDRESS" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_TUMBON" LAYOUT_WIDTH="4" OFFSET="4"/>
+						<FIELD NAME="PCTI_AMPUR" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PCTI_PROVINCE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PCTI_AREA" LAYOUT_WIDTH="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_ADDR_NOTE" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_CHK_LOCATION" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_CHK_DOCUMENT" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_REMARK" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.budget}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="GRID-BUDGET" LAYOUT_WIDTH="24" OFFSET=""/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-ATTATCH-FILE">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.constructor_attatchment}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="10" OFFSET="4"/>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="10"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="10" OFFSET="4"/>
+						<FIELD NAME="FILE_BOX_04" LAYOUT_WIDTH="10"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_05" LAYOUT_WIDTH="10" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-REVISE-COMMENT">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">การส่งกลับแก้ไข</h4>]]></HEADER>
+					<ROW TYPE="CONTENT">
+					<![CDATA[
+						<div class="mg-b-16">
+							<div id="FIELD-REVISE_COMMENT" class="form-group col-24 offset-0">
+								<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">รายการแก้ไข</label>
+								<div class="form-col col-24 col-sm-14" data-field="REVISE_COMMENT">
+									<input type="text" name="REVISE_COMMENT" id="REVISE_COMMENT" value=""  input-type="TEXT"  charcase="NORMAL" class="form-control dyn-form-control text">
+								</div>
+							</div>
+						</div>
+						<div>
+							<div>ประวัติการแก้ไข</div>
+							<ul>
+								<li>แก้ครั้งที่ 1 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 2 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 3 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 4 วันที่ xx/xx/xxxx : ...................................</li>
+							</ul>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-FILE-UPLOAD">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">เอกสารประกอบการพิจารณา</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+			</LAYOUT>
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE>
+						<![CDATA[
+						({form, data}) => {
+							console.log("before save data ...");
+							if ($PageCtx.$action === "add") {
+								let projYear = $$("PROJ_YEAR").val();
+								let projType = "CNST";
+								let stmCode = $user.deptCode;
+								let pjmCode = "B.2.01";
+								let btmCode = "01";
+								let acmCode = $$("ACM_CODE").val();
+
+								let projId = `${projYear}x${projType}x${stmCode}x${pjmCode}x${btmCode}x${acmCode}`;
+
+								$$("PROJ_ID").val(projId);
+								$$("PROJ_TYPE").val("CONST");
+								$$("STM_CODE").val(stmCode);
+								$$("PJM_CODE").val(pjmCode);
+								$$("BTM_CODE").val(btmCode);
+								$$("AC_CODE").val(acmCode);
+							}
+							//update data to save
+							Object.assign(data, $PageCtx.$form.jsonData());
+						}
+						]]>
+					</BEFORE-SAVE>
+				</EVENTS>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/equipt.frml b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/equipt.frml
new file mode 100644
index 0000000..53915ed
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/equipt.frml
@@ -0,0 +1,356 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PBDG.PROJ_ID
+							, PBDG.PBDG_ID
+							, PBDG.ACM_CODE
+							, BUD.GET_ACTIVITY(PBDG.ACM_CODE) ACM_NAME
+							, PBDG.PBDG_TOTAL
+							, PBDG.PBDG_COUNT
+							, PBDG.PBDG_ASSET_TYPE
+							, PBDG.PBDG_REASON
+							, PMAS.PROJ_YEAR
+							, PMAS.STM_CODE
+							, PMAS.PROJ_YEAR||'/'||PMAS.STM_CODE||'/'||PBDG.PROJ_ID FILEPATH
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS PBDG
+						  INNER JOIN PROJECTS PMAS ON PMAS.PROJ_ID = PBDG.PROJ_ID
+				</FROM>
+				<ORDER>ORDER BY PROJ_ID,PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32" ORIGIN="PBDG.PROJ_ID"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32" ORIGIN="PBDG.PROJ_ID"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20" ORIGIN="PBDG.ACM_CODE"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+				<FIELD NAME="PBDG_ASSET_TYPE" TYPE="TEXT" LABEL="ประเภทครุภัณฑ์" WIDTH="25"/>
+				<FIELD NAME="PBDG_REASON" TYPE="TEXT" LABEL="เหตุผลในการจัดหา" WIDTH="2000"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+
+		<DATASET ID="DS-BUDGET-ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, PBDG_ID
+					, BGM_CODE
+					, PBGI_QT_01
+					, PBGI_QT_02
+					, PBGI_QT_03
+					, PBGI_QT_04
+					, PBGI_QTY
+					, PBGI_COST
+					, PBGI_FREQ
+					, PBGI_ASSET_TYPE
+					, PBGI_REPLACE
+					, PBGI_ADDITION
+					, PBGI_ACQUIRE
+					, PBGI_TOTAL
+					, PBGI_REASON
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGET_ITEMS</FROM>
+				<ORDER>ORDER BY PROJ_ID,BGM_CODE,PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="pbgi.id" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="pbgi.pbdg_id" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="pbgi.bgm_code" WIDTH="20"/>
+				<FIELD NAME="PBGI_QT_01" TYPE="NUMBER" LABEL="pwbg.quotr_01" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_02" TYPE="NUMBER" LABEL="pwbg.quotr_02" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_03" TYPE="NUMBER" LABEL="pwbg.quotr_03" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_04" TYPE="NUMBER" LABEL="pwbg.quotr_04" WIDTH="15"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="pbgi.qty" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="pbgi.cost" WIDTH="15"/>
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="pbgi.freq" WIDTH="10"/>
+				<FIELD NAME="PBGI_ASSET_TYPE" TYPE="TEXT" LABEL="pbgi.asset_type" WIDTH="10"/>
+				<FIELD NAME="PBGI_REPLACE" TYPE="NUMBER" LABEL="pbgi.replace" WIDTH="10"/>
+				<FIELD NAME="PBGI_ADDITION" TYPE="NUMBER" LABEL="pbgi.addition" WIDTH="10"/>
+				<FIELD NAME="PBGI_ACQUIRE" TYPE="NUMBER" LABEL="pbgi.acquire" WIDTH="10"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="pbgi.total" WIDTH="15"/>
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="pbgi.reason" WIDTH="4000"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="sys.create_by" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="sys.create_time" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="sys.update_by" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="sys.update_time" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,PBDG_ID" DETAIL-FIELDS="PROJ_ID,PBDG_ID"/>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.equipt_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_NAME" CAPTION="project.equipt_name" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PBDG_ASSET_TYPE" CAPTION="pbge.asset_type" INPUTTYPE="COMBOBOX" REQUIRE="Y">
+					<LIST-OPTION TABLE="REFER_CODE" TEXT="RFC_DESC" VALUE="RFC_CODE" ORDER="RFC_ORDER" FILTER="RFG_GRP='ASSET-TYPE'" FIRSTLIST="@{CAPTION}"/>
+				</FIELD>
+				<FIELD NAME="PBDG_REASON" CAPTION="pbge.reason" INPUTTYPE="TEXT" />
+
+				<FIELD NAME="FILE_BOX_01" CAPTION="pbge.quotaion_file 1" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+					<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+						UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+						DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+				</FIELD>
+				<FIELD NAME="FILE_BOX_02" CAPTION="pbge.quotaion_file 2" INPUTTYPE="FILE-BOX">
+					<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+						UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+						DEFAULT-NAME="@{filepath}/@{acm_code}/file-02"/>
+				</FIELD>
+				<FIELD NAME="FILE_BOX_03" CAPTION="pbge.quotaion_file 3" INPUTTYPE="FILE-BOX">
+					<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+						UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+						DEFAULT-NAME="@{filepath}/@{acm_code}/file-03"/>
+				</FIELD>
+
+				<SECTION ID="SECT-PROJECT-TARGET">
+					<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_COUNT" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PWMT_UNIT" CAPTION="project.unit" INPUTTYPE="TEXT" READONLY="Y"></FIELD>
+					<FIELD NAME="PTGT_QT_0101" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.quoter 1"/>
+					<FIELD NAME="PTGT_QT_0201" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.quoter 2"/>
+					<FIELD NAME="PTGT_QT_0301" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.quoter 3"/>
+					<FIELD NAME="PTGT_QT_0401" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.quoter 4"/>
+					<FIELD NAME="QT_TOTAL_01" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.total" READONLY="Y"/>
+				</SECTION>
+
+				<SECTION ID="SECT-BUDGET-ITEMS">
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-EQUIPT-BUDGET" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div><label class="offset-${data.node_level}">[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="PBGI_QT_01" CAPTION="pbge.origin" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+					<FIELD NAME="PBGI_REPLACE" CAPTION="pbge.replace" INPUTTYPE="TEXT" DATATYPE="NUMBER" CLASS-NAME="equipt-qty equipt-item"/>
+					<FIELD NAME="PBGI_ADDITION" CAPTION="pbge.addition" INPUTTYPE="TEXT" DATATYPE="NUMBER" CLASS-NAME="equipt-qty equipt-item"/>
+					<FIELD NAME="PBGI_ACQUIRE" CAPTION="pbge.acquire" INPUTTYPE="TEXT" DATATYPE="NUMBER" CLASS-NAME="equipt-qty equipt-item"/>
+					<FIELD NAME="PBGI_QTY" CAPTION="pbge.qty" INPUTTYPE="TEXT" DATATYPE="NUMBER" READONLY="Y" CLASS-NAME="equipt-item"/>
+
+					<FIELD NAME="PBGI_COST" CAPTION="pbge.cost" INPUTTYPE="TEXT" DATATYPE="NUMBER" CLASS-NAME=" equipt-item"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="pbge.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" READONLY="Y"/>
+				</SECTION>
+
+
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_NAME" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBDG_ASSET_TYPE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PBDG_REASON" LAYOUT_WIDTH="18"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-PROJECT-BUTGET" TYPE="DATA-SECTION" DATASET="DS-BUDGET-ITEMS">
+					<ROW ID="ROW-BUDGET-DATA">
+						<FIELD NAME="PBGI_QT_01" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PBGI_REPLACE" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_ADDITION" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_ACQUIRE" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_QTY" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_COST" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="4" OFFSET="4"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="14"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-PROJECT-TARGET" TYPE="DATA-SECTION" DATASET="DS-PROJECT-TARGETS">
+					<HEADER CLASS="col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{project.target}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PTGT_QT_0101" LAYOUT_WIDTH="3" OFFSET="4"/>
+						<FIELD NAME="PTGT_QT_0201" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PTGT_QT_0301" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PTGT_QT_0401" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QT_TOTAL_01" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PWMT_UNIT" LAYOUT_WIDTH="3"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-QUOTATION-FILE">
+					<HEADER CLASS="col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{pbge.quotaion_file}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="12" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="12" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="12" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-REVISE-COMMENT">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">การส่งกลับแก้ไข</h4>]]></HEADER>
+					<ROW TYPE="CONTENT">
+					<![CDATA[
+						<div class="mg-b-16">
+							<div id="FIELD-REVISE_COMMENT" class="form-group col-24 offset-0">
+								<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">รายการแก้ไข</label>
+								<div class="form-col col-24 col-sm-14" data-field="REVISE_COMMENT">
+									<input type="text" name="REVISE_COMMENT" id="REVISE_COMMENT" value=""  input-type="TEXT"  charcase="NORMAL" class="form-control dyn-form-control text">
+								</div>
+							</div>
+						</div>
+						<div>
+							<div>ประวัติการแก้ไข</div>
+							<ul>
+								<li>แก้ครั้งที่ 1 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 2 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 3 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 4 วันที่ xx/xx/xxxx : ...................................</li>
+							</ul>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-FILE-UPLOAD">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">เอกสารประกอบการพิจารณา</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+			</LAYOUT>
+
+			<SCRIPT>
+				<DECLARATION>
+					const equiptQty = $$(".equipt-qty");
+					const equiptItem = $$(".equipt-item");
+					const txtEquiptQty = $$("PBGI_QTY");
+					const txtEquiptCost = $$("PBGI_COST");
+					const txtEquiptTotal = $$("PBGI_TOTAL");
+				</DECLARATION>
+
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							$$("PBDG_COUNT").val(txtEquiptQty.number());
+							$$("PBDG_TOTAL").val(txtEquiptTotal.number());
+
+							Object.assign(data, form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+
+				<INITIALIZE>
+					<![CDATA[
+					const quoterSum = () => {
+						let summary = 0;
+						for (let qt = 1; qt <= 4; qt++) {
+							summary += $$(`PTGT_QT_0${qt}01`).number();
+						}
+						$$(`QT_TOTAL_01`).val(formatNumber(summary));
+					}
+
+					$$("^PTGT_QT_").on("change", quoterSum);
+
+					const equiptSum = ()=>{
+						let sumEquipt = equiptQty.sum();
+						txtEquiptQty.val(formatNumber(sumEquipt));
+						let equiptCost = txtEquiptCost.number();
+						txtEquiptTotal.val(formatNumber(sumEquipt*equiptCost));
+					}
+					equiptItem.on("change",equiptSum);
+
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/general.frml b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/general.frml
new file mode 100644
index 0000000..07a4c13
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/general.frml
@@ -0,0 +1,259 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-construct-budget.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ.PROJ_ID
+					, PROJ.PROJ_TYPE
+					, PROJ.PROJ_YEAR
+					, PROJ.PJM_CODE
+					, PROJ.STM_CODE
+					, PROJ.BTM_CODE
+					, PROJ.ACM_CODE
+					, BUD.GET_ACTIVITY(PROJ.ACM_CODE) ACM_NAME
+					, PROJ.PLAN_TYPE
+					, PROJ.PROJ_DURATION
+					, PROJ.PROJ_START_YEAR
+					, PROJ.PROJ_END_YEAR
+					, PROJ.PROJ_FOR_STAFF
+
+					, PROJ.PROJ_FROM_YEAR
+					, 0 BDGT_TOTAL
+				</SELECT>
+				<FROM>FROM PROJECTS PROJ
+						   INNER JOIN REFER_CODE RFC ON RFC.RFG_GRP='PROJ-TYPE' AND RFC.RFC_CODE=PROJ.PROJ_TYPE AND RFC.RFC_FLAG = 'GENERAL'
+				</FROM>
+				<FILTER>WHERE STM_CODE = :STM_CODE AND PROJ.PROJ_YEAR = :PROJ_YEAR</FILTER>
+				<ORDER>ORDER BY RFC.RFC_ORDER, PROJ.PROJ_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PROJ_TYPE" TYPE="TEXT" LABEL="ประเภทโครงการ" WIDTH="25"/>
+				<FIELD NAME="PROJ_YEAR" TYPE="NUMBER" LABEL="ปีงบประมาณ" WIDTH="15"/>
+				<FIELD NAME="PJM_CODE" TYPE="TEXT" LABEL="รหัสโครงการ (BUD)" WIDTH="20"/>
+				<FIELD NAME="STM_CODE" TYPE="TEXT" LABEL="รหัสหน่วยงาน" WIDTH="10"/>
+				<FIELD NAME="BTM_CODE" TYPE="TEXT" LABEL="รหัสประเภทงบประมาณ" WIDTH="10"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20"/>
+				<FIELD NAME="PLAN_TYPE" TYPE="TEXT" LABEL="ประเภทแผน" WIDTH="15"/>
+				<FIELD NAME="PROJ_DURATION" TYPE="NUMBER" LABEL="ระยะเวลาดำเนินการ (วัน)" WIDTH="15"/>
+				<FIELD NAME="PROJ_START_YEAR" TYPE="NUMBER" LABEL="ปีที่เริ่มโครงการ (ก่อสร้าง)" WIDTH="15"/>
+				<FIELD NAME="PROJ_END_YEAR" TYPE="NUMBER" LABEL="ปีที่สิ้นสุดโครงการ (ก่อสร้าง)" WIDTH="15"/>
+				<FIELD NAME="PROJ_FOR_STAFF" TYPE="NUMBER" LABEL="จำนวนบุคลากรที่รองรับ" WIDTH="15"/>
+
+				<FIELD NAME="PROJ_FROM_YEAR" TYPE="NUMBER" LABEL="ต่อเนื่องจากปี" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<SUBDATASETS>
+				<SUBDATASET NAME="ACTIVITIES" DATASET-ID="DS-ACTIVITY-TREE" LINK-FIELDS="PROJ_ID"/>
+			</SUBDATASETS>
+		</DATASET>
+		<DATASET ID="DS-ACTIVITY-TREE">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>V_ACTIVITY_TREE</TABLENAME>
+			<SQL>
+				<SELECT>
+					SELECT PACT.PROJ_ID
+					, PACT.PROJ_YEAR
+					, PACT.PROJ_TYPE
+					, PACT.PROJ_GROUP
+					, ACTT.ACM_CODE
+					, ACTT.ACM_NAME
+					, ACTT.ACM_SEQ
+					, ACTT.NODE_LEVEL+1 NODE_LEVEL
+					, ACTT.MAIN_NODE
+					, ACTT.ACM_UNIT
+					, ACTT.ACM_START_YEAR
+					, ACTT.ACM_END_YEAR
+					, ACTT.NODE_TYPE
+					, PACT.BDGT_COUNT
+					, PACT.BDGT_TOTAL
+				</SELECT>
+				<FROM>
+					FROM BGT.V_ACTIVITY_TREE ACTT
+						 INNER JOIN (SELECT DISTINCT ACM.ACM_CODE
+									   FROM BUD.ACTIVITY_M ACM
+									        INNER JOIN BUD.ACTIVITY_CTRL_H ACH ON ACM.ACM_CODE = ACH.ACH_CODE
+											START WITH ACM.ACM_CODE IN (SELECT ACM_CODE FROM V_PROJECT_ACTIVITY PACT WHERE PACT.PROJ_ID = :PROJ_ID)
+											CONNECT BY PRIOR ACH.ACH_CTRL_CODE = ACH.ACH_CODE) FLTR ON FLTR.ACM_CODE = ACTT.ACM_CODE
+						LEFT OUTER JOIN V_PROJECT_ACTIVITY PACT ON PACT.ACM_CODE = ACTT.ACM_CODE AND PACT.PROJ_ID = :PROJ_ID
+				</FROM>
+				<ORDER>
+					ORDER BY ACTT.ACM_SEQ
+				</ORDER>
+			</SQL>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-MASTER">
+			<HEADER NAVI="N" EDIT="N" ADD="N" DELETE="N" VIEW="N"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="ACM_CODE" LABEL="project.const_code" ALIGN="left">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 row text-nowrap"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="ACM_NAME" LABEL="project.const_name" ALIGN="left">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 row text-nowrap"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="BDGT_COUNT" LABEL="pbdg.acm_count" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[(value, row, idx) => {
+							if (row["node_type"] === "D") {
+								return `<div class="col-24 text-nowrap">${formatNumber(value)} ${row["acm_unit"]}</div>`;
+								// return  formatNumber(value)+" "+row["acm_unit"];
+							} else {
+								return ""
+							}
+						}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="BDGT_TOTAL" LABEL="project.bgt_amount" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[(value, row, idx) => {return formatNumber(value);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<COMMAND-BUTTONS>
+					<BUTTON NAME="btnEditor" CLASS="btn btn-warning btn-editor" ICON-CLASS="fa fa-edit white">
+						<FILTER><![CDATA[({$ctx,row})=>{return ["D","P"].includes(row["node_type"]);}]]></FILTER>
+						<EVENT ON="click"><![CDATA[
+							({ev, row}) => {
+								console.log(row);
+								if (row.node_type === "D") {
+									row.pageTitle = $("h4.page-title").html();
+									$PageCtx.saveSessionData("edit",row);
+									let proj = {proj_id: row.proj_id, acm_code: row.acm_code, type: row.proj_type.toLowerCase()};
+									let data = base64(JSON.stringify(proj));
+									let editUrl = `/bdgt05/bgt0501010-general?edit&data=${data}`;
+									$WebNavi.goto(editUrl);
+								}
+							}
+							]]></EVENT>
+					</BUTTON>
+					<BUTTON NAME="btnViewer" CLASS="btn btn-primary btn-viewer" ICON-CLASS="fa fa-file-alt white">
+						<FILTER><![CDATA[({$ctx,row})=>{return ["D","P"].includes(row["node_type"]);}]]></FILTER>
+						<EVENT ON="click"><![CDATA[({ev,row})=>{ console.log(row);}]]></EVENT>
+					</BUTTON>
+				</COMMAND-BUTTONS>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="N" ALLOW-NO-FILTER="Y">
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="12" VAL_WIDTH="5" CAPT_WIDTH="14"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+			<FOOTER SHOW="Y"/>
+			<BUTTONS>
+				<BUTTON NAME="btnButton1" CAPTION="ส่งกลับแก้ไข" CLASS="btn btn-outline-warning" SECTION="RIGHT"/>
+				<BUTTON NAME="btnButton2" CAPTION="ส่ง ..... พิจารณา ต่อไป" CLASS="btn btn-warning" SECTION="RIGHT"/>
+			</BUTTONS>
+			<SCRIPT>
+				<EVENTS>
+					<AFTER-LOAD>
+						<![CDATA[
+							($ctx,data)=>{
+								let src = [...data]; // clone data to src
+									data.splice(0); // clear data element
+
+								let id = 1;
+								for (let item of src) {
+									item["node_type"] = "P";
+									item["node_level"] = "0";
+									item["$itemno"] = id++;
+									data.push(item);
+									if (isArray(item.activities)) {
+										for (let sitem of item.activities) {
+											sitem["$itemno"] = id++;
+											data.push(sitem);
+										}
+									}
+								}
+								// console.log(data);
+							}
+					]]>
+					</AFTER-LOAD>
+				</EVENTS>
+
+				<INITIALIZE>
+					<![CDATA[
+					{
+						// console.log("init activity grid");
+						const fieldFormat = (value,row) => {
+							if (row["node_type"] === "P") {
+								return "";
+							}
+							return formatNumber(value, 0);
+						}
+						const summary = (field, data) => {
+							let total = 0;
+							for (let id=0; id < data.length; id++) {
+								let row = data[id];
+								if (row["node_type"] === "D") {
+									total += (+row[field]) || 0;
+								}
+							}
+							if ($PageCtx.$dataGrid.load && !$PageCtx.$dataGrid.reload) {
+								$PageCtx.$dataGrid.reload = true;
+								for (let id=data.length-1; id>=0; id--) {
+									let row = data[id];
+									if (row["node_type"] === "C") {
+										let grpTotal = 0;
+										let mainNode = row["acm_code"];
+										let nodes = [];
+										nodes.push($$("main_node="+mainNode,data));
+										for (let node of nodes.flat()) {
+											grpTotal += +node[field];
+										}
+										data[id][field] = grpTotal;
+									}
+								}
+								$PageCtx.$dataGrid.load(data);
+								$PageCtx.$dataGrid.reload = false;
+							}
+							return formatNumber(total, 0);
+						}
+
+						const $ctx = $PageCtx;
+						const gridFields = [$$("field=bdgt_total", $ctx.gridColumn.flat())].flat();
+						for (let field of gridFields) {
+							field.formatter = fieldFormat;
+							field.footerFormatter = function (data) {
+								return summary(this.field, data);
+							}
+						}
+
+						$ctx.rowStyle = function (row, index) {
+							if (row["node_type"] === "C") {
+								return {classes : `group-level-${row["node_level"]}`};
+							}
+							if (row["node_type"] === "P") {
+								return {classes : `group-level-0`};
+							}
+							return {}; // Default style for other rows
+						}
+					}
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+
+
+		</FORM_BROWSE>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/manage.frml b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/manage.frml
new file mode 100644
index 0000000..1b72e4e
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/manage.frml
@@ -0,0 +1,268 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-manage-budget.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PBDG.PROJ_ID
+					, PROJ.PROJ_YEAR
+					, PBDG.PBDG_ID
+					, PBDG.ACM_CODE
+					, BUD.GET_ACTIVITY(PBDG.ACM_CODE) ACM_NAME
+					, PBDG.PBDG_TOTAL
+					, PBDG.PBDG_COUNT
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS PBDG
+					INNER JOIN PROJECTS PROJ ON PROJ.PROJ_ID=PBDG.PROJ_ID
+				</FROM>
+				<ORDER>ORDER BY PBDG.PROJ_ID,PBDG.PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32" ORIGIN="PBDG.PROJ_ID"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20" ORIGIN="PBDG.ACM_CODE"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+			</FIELDS>
+		</DATASET>
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+	</DATASETS>
+	<FORM>
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.acm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PROJ_PRINCIPLES" CAPTION="project.remak" INPUTTYPE="TEXT" ROWS="3"/>
+				<FIELD NAME="ACM_NAME" CAPTION="project.acm_name" INPUTTYPE="TEXT" EDIT-READONLY="Y"/>
+
+				<SECTION ID="SECT-PROJECT-TARGET">
+					<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_COUNT" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PWMT_UNIT" CAPTION="project.target" INPUTTYPE="TEXT" READONLY="Y"></FIELD>
+					<FIELD NAME="QUOTER_1" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 1" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0101" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0102" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_2" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 2" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0201" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0202" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_3" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 3" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0301" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0302" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_4" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 4" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0401" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0402" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="TOTAL_QT" INPUTTYPE="MULTI-FIELD" CAPTION="project.total" FIELD-SEPARATOR="/" READONLY="Y">
+						<FIELD-LIST>
+							<FIELD NAME="QT_TOTAL_01" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="QT_TOTAL_02" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+				</SECTION>
+
+				<FIELD NAME="GRID-BUDGET" INPUTTYPE="DATA-GRID" GRID-ID="GRID-WORK-BUDGET" ROWS="5" CAPTION="project.budget"/>
+
+				<SECTION ID="SEC-ATTATCH-FILE">
+					<FIELD NAME="FILE_BOX_01" CAPTION="file.upload 1" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_02" CAPTION="file.upload 2" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_03" CAPTION="file.upload 3" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+				</SECTION>
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="6"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="ACM_NAME" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_PRINCIPLES" LAYOUT_WIDTH="18" OFFSET="6"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-TARGET" TYPE="DATA-SECTION" DATASET="DS-PROJECT-TARGETS">
+					<ROW>
+						<FIELD NAME="PWMT_UNIT" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="QUOTER_1" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_2" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_3" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_4" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="TOTAL_QT" LAYOUT_WIDTH="4"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[
+						<h4 class="ml-3 border-bottom-1 col-24">@M{project.budget}</h4>
+						]]></HEADER>
+					<ROW>
+						<FIELD NAME="GRID-BUDGET" LAYOUT_WIDTH="24" OFFSET=""/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-FILE-UPLOAD">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.constructor_attatchment}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-REVISE-COMMENT">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">การส่งกลับแก้ไข</h4>]]></HEADER>
+					<ROW TYPE="CONTENT">
+					<![CDATA[
+						<div class="mg-b-16">
+							<div id="FIELD-REVISE_COMMENT" class="form-group col-24 offset-0">
+								<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">รายการแก้ไข</label>
+								<div class="form-col col-24 col-sm-14" data-field="REVISE_COMMENT">
+									<input type="text" name="REVISE_COMMENT" id="REVISE_COMMENT" value=""  input-type="TEXT"  charcase="NORMAL" class="form-control dyn-form-control text">
+								</div>
+							</div>
+						</div>
+						<div>
+							<div>ประวัติการแก้ไข</div>
+							<ul>
+								<li>แก้ครั้งที่ 1 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 2 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 3 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 4 วันที่ xx/xx/xxxx : ...................................</li>
+							</ul>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-FILE-UPLOAD">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">เอกสารประกอบการพิจารณา</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+			</LAYOUT>
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							let acmCount = $$("^QT_TOTAL_0").sum();
+							$$("PBDG_COUNT").val(acmCount);
+							let gridCtx = ($PageCtx.widgets["GRID-BUDGET"]||{})["$GridCtx"];
+							if (gridCtx) {
+								 let bdgTotal = gridCtx.sum_of["pbgi_total"];
+								$$("PBDG_TOTAL").val(bdgTotal);
+							}
+							Object.assign(data,form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+				<INITIALIZE>
+					<![CDATA[
+					     const quoterSum = ()=>{
+						     for (let sect=1; sect <=2; sect++) {
+							     let summary = 0;
+							     for (let qt = 1; qt <= 4; qt++) {
+								     summary += $$(`PTGT_QT_0${qt}0${sect}`).number();
+							     }
+							     $$(`QT_TOTAL_0${sect}`).val(formatNumber(summary));
+						     }
+					     }
+						 $$("^PTGT_QT_").on("change",quoterSum);
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/routine.frml b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/routine.frml
new file mode 100644
index 0000000..0b552ec
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501010/routine.frml
@@ -0,0 +1,271 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-routine-budget.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PBDG.PROJ_ID
+					, PROJ.PROJ_YEAR
+					, PBDG.PBDG_ID
+					, PBDG.ACM_CODE
+					, BUD.GET_ACTIVITY(PBDG.ACM_CODE) ACM_NAME
+					, PBDG.PBDG_TOTAL
+					, PBDG.PBDG_COUNT
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS PBDG
+						  INNER JOIN PROJECTS PROJ ON PROJ.PROJ_ID=PBDG.PROJ_ID
+				</FROM>
+				<ORDER>ORDER BY PBDG.PROJ_ID,PBDG.PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32" ORIGIN="PBDG.PROJ_ID"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20" ORIGIN="PBDG.ACM_CODE"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.acm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PROJ_PRINCIPLES" CAPTION="project.remak" INPUTTYPE="TEXT" ROWS="3"/>
+				<FIELD NAME="ACM_NAME" CAPTION="project.acm_name" INPUTTYPE="TEXT" EDIT-READONLY="Y"/>
+
+				<SECTION ID="SECT-PROJECT-TARGET">
+					<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_COUNT" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PWMT_UNIT" CAPTION="project.target" INPUTTYPE="TEXT" READONLY="Y"></FIELD>
+					<FIELD NAME="QUOTER_1" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 1" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0101" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0102" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_2" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 2" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0201" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0202" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_3" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 3" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0301" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0302" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_4" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 4" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0401" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0402" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="TOTAL_QT" INPUTTYPE="MULTI-FIELD" CAPTION="project.total" FIELD-SEPARATOR="/" READONLY="Y">
+						<FIELD-LIST>
+							<FIELD NAME="QT_TOTAL_01" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="QT_TOTAL_02" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+				</SECTION>
+
+				<FIELD NAME="GRID-BUDGET" INPUTTYPE="DATA-GRID" GRID-ID="GRID-WORK-BUDGET" ROWS="5" CAPTION="project.budget"/>
+
+				<SECTION ID="SEC-ATTATCH-FILE">
+					<FIELD NAME="FILE_BOX_01" CAPTION="file.upload 1" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_02" CAPTION="file.upload 2" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_03" CAPTION="file.upload 3" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+				</SECTION>
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="6"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="ACM_NAME" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_PRINCIPLES" LAYOUT_WIDTH="18" OFFSET="6"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-TARGET" TYPE="DATA-SECTION" DATASET="DS-PROJECT-TARGETS">
+					<ROW>
+						<FIELD NAME="PWMT_UNIT" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="QUOTER_1" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_2" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_3" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_4" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="TOTAL_QT" LAYOUT_WIDTH="4"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[
+						<h4 class="ml-3 border-bottom-1 col-24">@M{project.budget}</h4>
+						]]></HEADER>
+					<ROW>
+						<FIELD NAME="GRID-BUDGET" LAYOUT_WIDTH="24" OFFSET=""/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-ATTATCH-FILES">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.constructor_attatchment}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-REVISE-COMMENT">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">การส่งกลับแก้ไข</h4>]]></HEADER>
+					<ROW TYPE="CONTENT">
+					<![CDATA[
+							<div class="mg-b-16">
+								<div id="FIELD-REVISE_COMMENT" class="form-group col-24 offset-0">
+									<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">รายการแก้ไข</label>
+									<div class="form-col col-24 col-sm-14" data-field="REVISE_COMMENT">
+										<input type="text" name="REVISE_COMMENT" id="REVISE_COMMENT" value=""  input-type="TEXT"  charcase="NORMAL" class="form-control dyn-form-control text">
+									</div>
+								</div>
+							</div>
+							<div>
+								<div>ประวัติการแก้ไข</div>
+								<ul>
+									<li>แก้ครั้งที่ 1 วันที่ xx/xx/xxxx : ...................................</li>
+									<li>แก้ครั้งที่ 2 วันที่ xx/xx/xxxx : ...................................</li>
+									<li>แก้ครั้งที่ 3 วันที่ xx/xx/xxxx : ...................................</li>
+									<li>แก้ครั้งที่ 4 วันที่ xx/xx/xxxx : ...................................</li>
+								</ul>
+							</div>
+						]]>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-FILE-UPLOAD">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">เอกสารประกอบการพิจารณา</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							let acmCount = $$("^QT_TOTAL_0").sum();
+							$$("PBDG_COUNT").val(acmCount);
+							let gridCtx = ($PageCtx.widgets["GRID-BUDGET"]||{})["$GridCtx"];
+							if (gridCtx) {
+								 let bdgTotal = gridCtx.sum_of["pbgi_total"];
+								$$("PBDG_TOTAL").val(bdgTotal);
+							}
+							Object.assign(data,form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+				<INITIALIZE>
+					<![CDATA[
+					     const quoterSum = ()=>{
+						     for (let sect=1; sect <=2; sect++) {
+							     let summary = 0;
+							     for (let qt = 1; qt <= 4; qt++) {
+								     summary += $$(`PTGT_QT_0${qt}0${sect}`).number();
+							     }
+							     $$(`QT_TOTAL_0${sect}`).val(formatNumber(summary));
+						     }
+					     }
+						 $$("^PTGT_QT_").on("change",quoterSum);
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt05/view/frm/bdgt-0501020-budget.frml b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501020-budget.frml
new file mode 100644
index 0000000..9f2e5a8
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501020-budget.frml
@@ -0,0 +1,346 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-proj-budget.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-BROWSER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>V_ACTIVITY_TREE</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT :PROJ_ID PROJ_ID
+					, ACTT.ACM_CODE
+					, ACTT.ACM_NAME
+					, ACTT.ACM_SEQ
+					, ACTT.NODE_LEVEL
+					, ACTT.MAIN_NODE
+					, ACTT.ACM_UNIT
+					, ACTT.ACM_START_YEAR
+					, ACTT.ACM_END_YEAR
+					, ACTT.NODE_TYPE
+					, PJBG.PBDG_TOTAL PBDG_TOTAL
+					, PJBG.PBDG_COUNT  PBDG_COUNT
+				</SELECT>
+				<FROM>
+					FROM BGT.V_ACTIVITY_TREE ACTT
+						 INNER JOIN ( SELECT DISTINCT ACM.ACM_CODE
+										FROM BUD.ACTIVITY_M ACM
+											 INNER JOIN BUD.ACTIVITY_CTRL_H ACH ON ACM.ACM_CODE = ACH.ACH_CODE
+										START WITH ACM.ACM_CODE IN (SELECT ACM_CODE FROM PROJECT_BUDGETS PJBD WHERE PROJ_ID = :PROJ_ID)
+									  CONNECT BY PRIOR ACH.ACH_CTRL_CODE = ACH.ACH_CODE) FLTR ON FLTR.ACM_CODE = ACTT.ACM_CODE
+						 LEFT OUTER JOIN PROJECT_BUDGETS PJBG ON PJBG.PROJ_ID=:PROJ_ID AND PJBG.ACM_CODE = ACTT.ACM_CODE
+				</FROM>
+				<ORDER>ORDER BY ACTT.ACM_SEQ</ORDER>
+			</SQL>
+		</DATASET>
+
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, PBDG_ID
+					, ACM_CODE
+					, PBDG_TOTAL
+					, PBDG_COUNT
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-BROWSER">
+			<HEADER NAVI="N" ADD="N" EDIT="Y" DELETE="N"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="ACM_CODE" LABEL="project.acm_code" ALIGN="left" WIDTH="15em">
+					<DATA-FORMATTER><![CDATA[
+						(value,row,idx)=>{
+							return $(`<div class="col-24 row"><div class="col offset-${row.node_level}">${value}</div></div>`);
+						}
+						]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="ACM_NAME" LABEL="project.acm_name" ALIGN="left">
+					<DATA-FORMATTER><![CDATA[
+						(value,row,idx)=>{
+							return $(`<div class="col-24 row"><div class="col offset-${row.node_level}">${value}</div></div>`);
+						}
+						]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="PBDG_TOTAL" LABEL="project.bgt_amount" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return (row["node_type"]==="D")? value : "";}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<COMMAND-BUTTONS>
+					<BUTTONS-FILTER>
+						<EDIT><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></EDIT>
+						<DELETE><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></DELETE>
+						<VIEW><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></VIEW>
+					</BUTTONS-FILTER>
+				</COMMAND-BUTTONS>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="Y" ALLOW-NO-FILTER="Y" >
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" DATATYPE="TEXT" ALIGN="center"/>
+					<FIELD NAME="PROJ_NAME" CAPTION="project.name" INPUTTYPE="TEXT" DATATYPE="TEXT" ALIGN="left"/>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"></FIELD>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" CAPT_WIDTH="10" VAL_WIDTH="6" LAYOUT_WIDTH="12"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_NAME" CAPT_WIDTH="5" VAL_WIDTH="18" LAYOUT_WIDTH="24"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+			<BUTTONS>
+				<BUTTON NAME="btnButton1" CAPTION="ส่งกลับไปแก้ไข" CLASS="btn btn-outline-warning pd-x-10" SECTION="RIGHT"/>
+				<BUTTON NAME="btnButton2" CAPTION="ส่ง .... พิจารณา ต่อไป" CLASS="btn btn-warning pd-x-10" SECTION="RIGHT"/>
+			</BUTTONS>
+
+			<FOOTER SHOW="Y"/>
+			<SCRIPT>
+				<INITIALIZE>
+					<![CDATA[
+					{
+						console.log("init activity grid");
+
+						const fieldFormat = (value) => {
+							return formatNumber(value, 0);
+						}
+
+						$PageCtx.sum_of = {};
+						const summary = (field, data) => {
+							console.log("budget summary process.")
+							let total = 0;
+							for (let id=0; id < data.length; id++) {
+								let row = data[id];
+								if (row["node_type"] === "D") {
+									total += (+row[field]) || 0;
+								}
+							}
+
+							$PageCtx.sum_of[field] = total;
+
+							if ($PageCtx.$dataGrid.load && !$PageCtx.$dataGrid.reload) {
+								$PageCtx.$dataGrid.reload = true;
+								for (let id=data.length-1; id>=0; id--) {
+									let row = data[id];
+									if (row["node_type"] === "C") {
+										let grpTotal = 0;
+										let mainNode = row["acm_code"];
+										let nodes = [];
+										nodes.push($$("main_node="+mainNode,data));
+										for (let node of nodes.flat()) {
+											grpTotal += +node[field];
+										}
+										data[id][field] = grpTotal;
+									}
+								}
+								$PageCtx.$dataGrid.load(data);
+								$PageCtx.$dataGrid.reload = false;
+							}
+
+							return formatNumber(total, 0);
+						}
+
+						const $ctx = $PageCtx;
+						const gridFields = [$$("field^pbdg_", $ctx.gridColumn.flat())].flat();
+						for (let field of gridFields) {
+							field.formatter = fieldFormat;
+							field.footerFormatter = function (data) {
+								return summary(this.field, data);
+							}
+						}
+
+						$ctx.rowStyle = function (row, index) {
+							if (row["node_type"] === "C") {
+								return {
+									classes : `group-level-${row["node_level"]}`
+								};
+							}
+							return {}; // Default style for other rows
+						}
+					}
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_BROWSE>
+
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PROJ_NAME" CAPTION="project.name" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="VACM_CODE" CAPTION="project.acm_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.acm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-ACTIVITY-02-BDGT" VALUE-FIELD="ACM_CODE" TEXT-FIELD="ACM_NAME" PARAMETERS="DV_YEAR=PROJ_YEAR,STM_CODE=STM_CODE">
+						<UPDATE-FIELDS>
+							<FIELD SRC="ACM_CODE" TARGET="VACM_CODE"></FIELD>
+							<FIELD SRC="ACM_UNIT" TARGET="TARGET_UNIT"></FIELD>
+							<FIELD SRC="ACM_UNIT" TARGET="PWMT_UNIT"></FIELD>
+							<FIELD SRC="PJM_CODE" TARGET="PJM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								if (data.node_type === "C") {
+									data.disabled = true;
+								}
+								return $(`<div><label>[${data.acm_code}]</label> : <label>${data.acm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+				<FIELD NAME="GRID-BUDGET" INPUTTYPE="DATA-GRID" GRID-ID="GRID-WORK-BUDGET" ROWS="5" CAPTION="project.budget"/>
+
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_NAME" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.budget}</h4>]]></HEADER>
+					<ROW>
+						<FIELD NAME="GRID-BUDGET" LAYOUT_WIDTH="24" OFFSET=""/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-REVISE-COMMENT">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">การส่งกลับแก้ไข</h4>]]></HEADER>
+					<ROW TYPE="CONTENT">
+					<![CDATA[
+						<div class="mg-b-16">
+							<div id="FIELD-REVISE_COMMENT" class="form-group col-24 offset-0">
+								<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">รายการแก้ไข</label>
+								<div class="form-col col-24 col-sm-14" data-field="REVISE_COMMENT">
+									<input type="text" name="REVISE_COMMENT" id="REVISE_COMMENT" value=""  input-type="TEXT"  charcase="NORMAL" class="form-control dyn-form-control text">
+								</div>
+							</div>
+						</div>
+						<div>
+							<div>ประวัติการแก้ไข</div>
+							<ul>
+								<li>แก้ครั้งที่ 1 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 2 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 3 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 4 วันที่ xx/xx/xxxx : ...................................</li>
+							</ul>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							let acmCount = $$("^QT_TOTAL_0").sum();
+							$$("PBDG_COUNT").val(acmCount);
+							let gridCtx = ($PageCtx.widgets["GRID-BUDGET"]||{})["$GridCtx"];
+							if (gridCtx) {
+								 let bdgTotal = gridCtx.sum_of["pbgi_total"];
+								$$("PBDG_TOTAL").val(bdgTotal);
+							}
+							Object.assign(data,form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+				<INITIALIZE>
+					<![CDATA[
+					     const quoterSum = ()=>{
+						     for (let sect=1; sect <=2; sect++) {
+							     let summary = 0;
+							     for (let qt = 1; qt <= 4; qt++) {
+								     summary += $$(`PTGT_QT_0${qt}0${sect}`).number();
+							     }
+							     $$(`QT_TOTAL_0${sect}`).val(formatNumber(summary));
+						     }
+					     }
+						 $$("^PTGT_QT_").on("change",quoterSum);
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt05/view/frm/bdgt-0501020.frml b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501020.frml
new file mode 100644
index 0000000..29e2565
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501020.frml
@@ -0,0 +1,766 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="ิ/bdgt04/grids/grid-stratigy.frml"></INCLUDE>
+		<INCLUDE FILE="ิ/bdgt04/grids/grid-stratigy-item.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-BROWSER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT PROJ_YEAR
+					, PROJ_ID
+					, STM_CODE
+					, STM_NAME
+					, PJM_CODE
+					, PJM_NAME
+					, FLOW_TYPE
+					, FLOW_TYPE_DESC
+					, PROJ_SEQ
+					, FLOW_STATE
+					, JDTOTT(SYSDATE - (DBMS_RANDOM.VALUE(3, 10))) STATE_DATE
+				</SELECT>
+				<FROM>
+					FROM (SELECT DISTINCT :PROJ_YEAR PROJ_YEAR
+					, PROJ.PROJ_ID
+					, PROJ.STM_CODE STM_CODE
+					, BUD.GET_SECTION(PROJ.STM_CODE) STM_NAME
+					, PROJ.PJM_CODE PJM_CODE
+					, BUD.GET_PROJECT(PROJ.PJM_CODE) PJM_NAME
+					, FTYP.RFC_CODE FLOW_TYPE
+					, FTYP.RFC_DESC FLOW_TYPE_DESC
+					, FTYP.RFC_ORDER PROJ_SEQ
+					, BGT.FLOW_STATE('STEP-02') FLOW_STATE
+					FROM REFER_CODE FTYP
+					INNER JOIN REFER_CODE PTYPE ON PTYPE.RFG_GRP = 'PROJ-TYPE' AND PTYPE.RFC_FLAG = FTYP.RFC_CODE
+					INNER JOIN PROJECTS PROJ ON PROJ.PROJ_TYPE = PTYPE.RFC_CODE
+					WHERE FTYP.RFG_GRP = 'FLOW-TYPE' AND FTYP.RFC_CODE = 'POLICY' AND PROJ.PROJ_YEAR = :PROJ_YEAR
+					ORDER BY STM_NAME) QR1
+				</FROM>
+				<ORDER>ORDER BY STM_NAME</ORDER>
+			</SQL>
+		</DATASET>
+
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT PROJ.PROJ_ID
+					, PROJ.PROJ_TYPE
+					, PROJ.PROJ_YEAR
+					, PROJ.PJM_CODE
+					, BUD.GET_PROJECT(PROJ.PJM_CODE) PROJ_NAME
+					, PROJ.STM_CODE
+					, BUD.GET_SECTION(PROJ.STM_CODE) STM_NAME
+					, PROJ.BTM_CODE
+					, PROJ.ACM_CODE
+					, BUD.GET_ACTIVITY(PROJ.ACM_CODE) ACM_NAME
+					, PROJ.PLAN_TYPE
+					, PROJ.PROJ_DURATION
+					, PROJ.PROJ_START_YEAR
+					, PROJ.PROJ_END_YEAR
+					, PROJ.PROJ_FOR_STAFF
+
+					, PROJ.PROJ_CATE
+					, PROJ.PROJ_KIND
+					, PROJ.PROJ_FROM_YEAR
+
+				</SELECT>
+				<FROM>FROM PROJECTS PROJ</FROM>
+				<FILTER>WHERE PROJ_ID = :PROJ_ID</FILTER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="VARCHAR" WIDTH="50" LABEL="plcp.id"/>
+				<FIELD NAME="PROJ_TYPE" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.type"/>
+				<FIELD NAME="PROJ_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.year"/>
+				<FIELD NAME="PJM_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="plcp.pjm_code"/>
+				<FIELD NAME="STM_CODE" TYPE="VARCHAR" WIDTH="10" LABEL="plcp.stm_code"/>
+				<FIELD NAME="BTM_CODE" TYPE="VARCHAR" WIDTH="10" LABEL="plcp.btm_code"/>
+				<FIELD NAME="ACM_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="plcp.acm_code"/>
+				<FIELD NAME="ACM_NAME" TYPE="VARCHAR" WIDTH="200" LABEL="plcp.acm_name"/>
+				<FIELD NAME="PLAN_TYPE" TYPE="VARCHAR" WIDTH="15" LABEL="plcp.plan_type"/>
+				<FIELD NAME="PROJ_DURATION" TYPE="NUMBER" WIDTH="10" LABEL="plcp.duration"/>
+				<FIELD NAME="PROJ_START_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.start_year"/>
+				<FIELD NAME="PROJ_END_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.end_year"/>
+				<FIELD NAME="PROJ_FOR_STAFF" TYPE="NUMBER" WIDTH="10" LABEL="plcp.for_staff"/>
+
+				<FIELD NAME="PROJ_CATE" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.catagory"/>
+				<FIELD NAME="PROJ_KIND" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.kine"/>
+				<FIELD NAME="PROJ_FROM_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.from_year"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-BROWSER">
+			<HEADER NAVI="N" EDIT="Y" ADD="N" DELETE="N" VIEW="Y"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="STM_NAME" LABEL="props.stm_name" ALIGN="left" WIDTH="20em">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 text-nowrap"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="PJM_NAME" LABEL="project.name" ALIGN="left">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 row"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="FLOW_STATE" LABEL="props.state" ALIGN="center" WIDTH="15em"/>
+				<FIELD NAME="STATE_DATE" LABEL="props.state_date" ALIGN="center" WIDTH="15em"/>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="Y" ALLOW-NO-FILTER="Y">
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="COMBOBOX" SEARCH-ORIGIN="PROJ_YEAR=${VALUE}">
+						<LIST-OPTION TABLE="VL_YEAR" TEXT="#DV_YEAR" VALUE="DV_YEAR" ORDER="DV_YEAR" FIRSTLIST="@{NONE}"/>
+					</FIELD>
+					<FIELD NAME="STM_CODE" CAPTION="props.stm_name" INPUTTYPE="COMBOBOX" SEARCH-ORIGIN="STM_CODE=${VALUE}">
+						<LIST-OPTION TABLE="BUD.SECTION_M" TEXT="#STM_NAME" VALUE="STM_CODE" ORDER="STM_NAME" FIRSTLIST=""/>
+					</FIELD>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" VAL_WIDTH="6" CAPT_WIDTH="12" LAYOUT_WIDTH="12"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="STM_CODE" VAL_WIDTH="12" CAPT_WIDTH="6" LAYOUT_WIDTH="24"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+		</FORM_BROWSE>
+
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="STM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="BTM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PLAN_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_DURATION" INPUTTYPE="HIDDEN"/>
+
+				<FIELD NAME="PROJ_YEAR" CAPTION="plcp.year" INPUTTYPE="TEXT" READONLY="Y" DATATYPE="TEXT"/>
+				<FIELD NAME="VPJM_CODE" CAPTION="plcp.pjm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PJM_CODE" CAPTION="plcp.pjm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-PROJECT-02" VALUE-FIELD="PJM_CODE" TEXT-FIELD="PJM_NAME">
+						<UPDATE-FIELDS>
+							<FIELD SRC="PJM_CODE" TARGET="VPJM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								// data.disabled = data["node_type"] === "C";
+								return $(`<div class="d-flex flex-row gap-1 dyn-list-item"><label class="flex-column text-nowrap col-3">[${data.pjm_code}]</label> : <label>${data.pjm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+
+				<FIELD NAME="VACM_CODE" CAPTION="plcp.acm_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_CODE" CAPTION="plcp.acm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-ACTIVITY-02" VALUE-FIELD="ACM_CODE" TEXT-FIELD="ACM_NAME" PARAMETERS="DV_YEAR=PROJ_YEAR,STM_CODE=STM_CODE">
+						<UPDATE-FIELDS>
+							<FIELD SRC="ACM_CODE" TARGET="VACM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								// data.disabled = data["node_type"] === "C";
+								return $(`<div class="d-flex flex-row gap-1 dyn-list-item"><label class="flex-column text-nowrap col-3">[${data.acm_code}]</label> : <label>${data.acm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+
+				<FIELD NAME="STM_CODE" CAPTION="plcp.stm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="BTM_CODE" CAPTION="plcp.btm_code" INPUTTYPE="TEXT"/>
+				<FIELD NAME="PLAN_TYPE" CAPTION="plcp.plan_type" INPUTTYPE="TEXT"/>
+				<FIELD NAME="PROJ_DURATION" CAPTION="plcp.duration" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_START_YEAR" CAPTION="plcp.start_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_END_YEAR" CAPTION="plcp.end_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_FOR_STAFF" CAPTION="plcp.for_staff" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+
+				<FIELD NAME="PROJ_CATE" CAPTION="plcp.catagory" INPUTTYPE="RADIOGROUP" DATATYPE="TEXT" CLASS-NAME="flex-option">
+					<LIST-OPTION TABLE="BGT.REFER_CODE" TEXT="#RFC_DESC" VALUE="RFC_CODE" FILTER="RFG_GRP='PROJ-CATE'" ORDER="RFC_CODE"/>
+				</FIELD>
+
+				<FIELD NAME="PROJ_KIND" CAPTION="plcp.kind" INPUTTYPE="SWITCH" DATATYPE="TEXT"
+					   VALUE="NEW" UNCHECK_VALUE="OLD" SUFFIX="#plcp.new|plcp.continue"></FIELD>
+
+
+				<FIELD NAME="PROJ_PHASE" CAPTION="#--" SHOWCAPT="Y" INPUTTYPE="CHECKBOXGROUP" DATATYPE="TEXT">
+					<LIST-OPTION TABLE="BGT.REFER_CODE" TEXT="#RFC_DESC" VALUE="RFC_CODE" FILTER="RFG_GRP='PROJ-PHASE'" ORDER="RFC_CODE" COLUMN="4"/>
+				</FIELD>
+				<FIELD NAME="PROJ_BUDGET" CAPTION="plcp.budget" INPUTTYPE="TEXT" DATATYPE="NUMBER" SUFFIX="บาท"/>
+
+
+				<FIELD NAME="PROJ_FROM_YEAR" CAPTION="plcp.from_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+				<FIELD NAME="GRID-STRATEGY" INPUTTYPE="DATA-GRID" GRID-ID="GRID-PROJECT-STTGYS" CAPTION="pstg.header"/>
+
+				<FIELD NAME="PROJ_INVOLVERS" INPUTTYPE="TEXTAREA" CAPTION="plcp.involvers" ROWS="4"/>
+				<FIELD NAME="PROJ_INVOLVISSE" INPUTTYPE="TEXTAREA" CAPTION="plcp.involv_issue" ROWS="4"/>
+
+				<SECTION ID="SEC-ATTATCH-FILE">
+					<FIELD NAME="FILE_BOX_01" CAPTION="file.upload 1" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_02" CAPTION="file.upload 2" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_03" CAPTION="file.upload 3" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+				</SECTION>
+			</FIELDS>
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VPJM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PJM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+				</SECTION>
+				<SECTION>
+					<HEADER CLASS="form-section-header col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{pstg.header}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="GRID-STRATEGY" LAYOUT_WIDTH="20" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+				<SECTION>
+					<ROW>
+						<FIELD NAME="PROJ_CATE" OFFSET="4" LAYOUT_WIDTH="20"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_KIND" OFFSET="4" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="PROJ_FROM_YEAR" LAYOUT_WIDTH="6"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-STRATEGY">
+					<HEADER CLASS="form-section-header col-24 mg-t-30 border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">ความเชื่อมโยงของโครงการกับประเด็นการยกระดับคะแนนดัชนีการรับรู้การทุจริต(CPI)และแหล่งข้อมูล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-4">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center">ประเด็น/แหล่งข้อมูล</th>
+										<th class="center" style="width: 5em">BF(TI)<br>(1)</th>
+										<th class="center" style="width: 5em">EIU<br>(2)</th>
+										<th class="center" style="width: 5em">GI<br>(3)</th>
+										<th class="center" style="width: 5em">IMD<br>(4)</th>
+										<th class="center" style="width: 5em">PERC<br>(5)</th>
+										<th class="center" style="width: 5em">PRS<br>(6)</th>
+										<th class="center" style="width: 5em">WEF<br>(7)</th>
+										<th class="center" style="width: 5em">WJP<br>(8)</th>
+										<th class="center" style="width: 5em">VDEM<br>(9)</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">1.สินบน</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+									</tr>
+									<tr>
+										<td class="left">2.การขัดกันแห่งผลประโยชน์</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+									</tr>
+									<tr>
+										<td class="left">3.นโยบายของรัฐบาลในการแก้ไขปัญหาการทุจริต</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+									<tr>
+										<td class="left">4.การตรวจสอบเจ้าหน้าที่รัฐ</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+									<tr>
+										<td class="left">5.ความโปร่งใสในระบบงบประมาณและการจัดซื้อจัดจ้าง</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-1">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">1.หลักการและเหตุผล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-2">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">2.วัตถุประสงค์</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-3">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">3.ประโยชน์ที่คาดว่าจะได้รับ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-4">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">4.เป้าหมาย</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-5">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">5.กลุ่มเป้าหมาย</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-6">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">6.พื้นที่ดำเนินการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-7">
+				<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">7.กิจกรรมที่จะดำเนินการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">ขั้นตอนการดำเนินงาน</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 1</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 2</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 3</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 4</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2">
+											<button type="button" id="add-btn" class="btn btn-primary btn-round data-grid-add-btn mg-y-5 w-100 white"><i class="fa fa-plus"></i></button>
+										</th>
+									</tr>
+									<tr>
+										<th class="center" style="width: 3em">ต.ค.</th>
+										<th class="center" style="width: 3em">พ.ย.</th>
+										<th class="center" style="width: 3em">ธ.ค.</th>
+										<th class="center" style="width: 3em">ม.ค.</th>
+										<th class="center" style="width: 3em">ก.พ.</th>
+										<th class="center" style="width: 3em">มี.ค.</th>
+										<th class="center" style="width: 3em">เม.ย.</th>
+										<th class="center" style="width: 3em">พ.ค.</th>
+										<th class="center" style="width: 3em">มิ.ย.</th>
+										<th class="center" style="width: 3em">ก.ค.</th>
+										<th class="center" style="width: 3em">ส.ค.</th>
+										<th class="center" style="width: 3em">ก.ย.</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">กิจกรรมที่ ๑ การระดมความคิดเห็นเพื่อ
+											กำหนดประเด็นจัดทำแผนงานและ
+											แนวทางในการขับเคลื่อนเพื่อป้องปราม
+											หรือเฝ้าระวังปัญหาการทุจริตในพื้นที่</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+									<tr>
+										<td class="left">กิจกรรมที่ ๒ การลงพื้นที่เพื่อเฝ้าระวังและ
+											ป้องปรามการทุจริตในพื้นที่ตามนโยบาย
+											ของสำนักงานป.ป.ช.หรือตามประเด็นที่
+											ได้รับแจ้งข้อมูลจากศูนย์ป้องปราม
+											การทุจริตแห่งชาติสำนักงานป.ป.ช.</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-8">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">8.ตัวชี้วัดของผลผลิต/ผลลัพธ์การดำเนินโครงการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">ผลผลิต(Output)/ผลลัพธ์(Outcome)</th>
+										<th class="center" style="width: 12em">ตัวชี้วัด</th>
+										<th class="center" style="width: 12em">ค่าเป้าหมาย</th>
+										<th class="center" style="width: 12em">ระยะเวลา</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2">
+											<button type="button" id="add-btn" class="btn btn-primary btn-round data-grid-add-btn mg-y-5 w-100 white"><i class="fa fa-plus"></i></button>
+										</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left"><b>ผลผลิต(Output)</b><br>
+											รายงานสรุปผลโครงการแก้ไขปัญหา
+											การทุจริตในพื้นที่
+										</td>
+										<td class="center">แนวทางการแก้ไขปัญหา
+											การทุจริตในพื้นที่</td>
+										<td class="center">รายงาน ๑ ฉบับ</td>
+										<td class="center">ไตรมาสที่ ๔</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+
+									<tr>
+										<td class="left"><b>ผลลัพธ์(Outcome)</b><br>
+											หน่วยงานที่เกี่ยวข้องนำแนวทางการแก้ไข
+											ปัญหาการทุจริตไปใช้ในการป้องกัน
+											การทุจริตในพื้นที่เพื่อทำให้คดีทุจริต
+											ในพื้นที่ลดลง
+										</td>
+										<td class="center">จำนวนหน่วยงานที่นำแนวทาง
+											การแก้ไขปัญหาการทุจริตในพื้นที่
+											ไปใช้ในการป้องกันการทุจริต
+											ในพื้นที่่</td>
+										<td class="center">อย่างน้อย ๑ หน่วยงาน</td>
+										<td class="center">ไตรมาสที่ ๔</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-9">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">9.งบประมาณ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_BUDGET" OFFSET="4" LAYOUT_WIDTH="6"/>
+					</ROW>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">งบรายจ่าย</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 1</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 2</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 3</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 4</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2"></th>
+									</tr>
+									<tr>
+										<th class="center" style="width: 3em">ต.ค.</th>
+										<th class="center" style="width: 3em">พ.ย.</th>
+										<th class="center" style="width: 3em">ธ.ค.</th>
+										<th class="center" style="width: 3em">ม.ค.</th>
+										<th class="center" style="width: 3em">ก.พ.</th>
+										<th class="center" style="width: 3em">มี.ค.</th>
+										<th class="center" style="width: 3em">เม.ย.</th>
+										<th class="center" style="width: 3em">พ.ค.</th>
+										<th class="center" style="width: 3em">มิ.ย.</th>
+										<th class="center" style="width: 3em">ก.ค.</th>
+										<th class="center" style="width: 3em">ส.ค.</th>
+										<th class="center" style="width: 3em">ก.ย.</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">งบบริหารจัดการรายเดือน</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+								<tfoot>
+									<tr>
+										<td class="left">รวมงบประมาณรายไตรมาส</td>
+										<td class="right" colspan="3">0</td>
+										<td class="right" colspan="3">0</td>
+										<td class="right" colspan="3">0</td>
+										<td class="right" colspan="3">0</td>
+										<td class="operate-header" style="text-align: center; width: 90px;"></td>
+									</tr>
+								</tfoot>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-10">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">10.ผู้รับผิดชอบโครงการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-11">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">11.ผู้ที่เกี่ยวข้องที่อาจจะได้รับผลกระทบ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_INVOLVERS" LAYOUT_WIDTH="10" OFFSET="4"/>
+						<FIELD NAME="PROJ_INVOLVISSE" LAYOUT_WIDTH="10"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-NOTE-12">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">12.ลักษณะโครงการ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_PHASE" OFFSET="4" LAYOUT_WIDTH="16"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-13">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">13.การติดตามประเมินผล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-ATTACH-FILES">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.constructor_attatchment}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-REVISE-COMMENT">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">การส่งกลับแก้ไข</h4>]]></HEADER>
+					<ROW TYPE="CONTENT">
+					<![CDATA[
+						<div class="mg-b-16">
+							<div id="FIELD-REVISE_COMMENT" class="form-group col-24 offset-0">
+								<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">รายการแก้ไข</label>
+								<div class="form-col col-24 col-sm-14" data-field="REVISE_COMMENT">
+									<input type="text" name="REVISE_COMMENT" id="REVISE_COMMENT" value=""  input-type="TEXT"  charcase="NORMAL" class="form-control dyn-form-control text">
+								</div>
+							</div>
+						</div>
+						<div>
+							<div>ประวัติการแก้ไข</div>
+							<ul>
+								<li>แก้ครั้งที่ 1 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 2 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 3 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 4 วันที่ xx/xx/xxxx : ...................................</li>
+							</ul>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+
+
+				<SECTION ID="SECT-FILE-UPLOAD">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">เอกสารประกอบการพิจารณา</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+
+			</LAYOUT>
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							if ($PageCtx.$action === "add") {
+								let projYear = $$("PROJ_YEAR").val();
+								let projType = "PLCY";
+								let btmCode = "01";
+								let stmCode = $user.deptCode;
+								let acmCode = $$("ACM_CODE").val();
+								let projId = `${projYear}x${projType}x${stmCode}x${acmCode}`;
+
+								$$("PROJ_ID").val(projId);
+								$$("PROJ_TYPE").val(projType);
+								$$("STM_CODE").val(stmCode);
+								$$("BTM_CODE").val(btmCode);
+							}
+							Object.assign(data, form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+			</SCRIPT>
+			<BUTTONS>
+<!--				<BUTTON NAME="btnButton1" CAPTION="ส่งกลับไปแก้ไข" CLASS="btn btn-outline-warning pd-x-10" SECTION="RIGHT"/>-->
+<!--				<BUTTON NAME="btnButton2" CAPTION="ส่ง .... พิจารณา ต่อไป" CLASS="btn btn-warning pd-x-10" SECTION="RIGHT"/>-->
+				<BUTTON NAME="btnButton3" CAPTION="รายละเอียดงบประมาณ" CLASS="btn btn-outline-success" SECTION="LEFT">
+					<EVENT ON="click"><![CDATA[
+						(ev) => {
+							ev.preventDefault();
+							let data = $PageCtx.$data;
+							let projId = data.proj_id;
+							let targetUrl = url("/bdgt05/bgt0501020-budget?proj_id=" + projId);
+							data.page_title = $("h4.page-title").html();
+							data.postData = $PageCtx.$Params.get("data");
+							$PageCtx.saveSessionData("budget", data);
+							$PageCtx.saveStorageData("budget#search", {PROJ_ID: projId});
+							$WebNavi.goto(targetUrl);
+						}
+						]]></EVENT>
+				</BUTTON>
+			</BUTTONS>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt05/view/frm/bdgt-0501030-budget.frml b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501030-budget.frml
new file mode 100644
index 0000000..71d809f
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501030-budget.frml
@@ -0,0 +1,346 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-proj-budget.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-BROWSER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>V_ACTIVITY_TREE</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT :PROJ_ID PROJ_ID
+					, ACTT.ACM_CODE
+					, ACTT.ACM_NAME
+					, ACTT.ACM_SEQ
+					, ACTT.NODE_LEVEL
+					, ACTT.MAIN_NODE
+					, ACTT.ACM_UNIT
+					, ACTT.ACM_START_YEAR
+					, ACTT.ACM_END_YEAR
+					, ACTT.NODE_TYPE
+					, PJBG.PBDG_TOTAL PBDG_TOTAL
+					, PJBG.PBDG_COUNT  PBDG_COUNT
+				</SELECT>
+				<FROM>
+					FROM BGT.V_ACTIVITY_TREE ACTT
+					INNER JOIN ( SELECT DISTINCT ACM.ACM_CODE
+					FROM BUD.ACTIVITY_M ACM
+					INNER JOIN BUD.ACTIVITY_CTRL_H ACH ON ACM.ACM_CODE = ACH.ACH_CODE
+					START WITH ACM.ACM_CODE IN (SELECT ACM_CODE FROM PROJECT_BUDGETS PJBD WHERE PROJ_ID = :PROJ_ID)
+					CONNECT BY PRIOR ACH.ACH_CTRL_CODE = ACH.ACH_CODE) FLTR ON FLTR.ACM_CODE = ACTT.ACM_CODE
+					LEFT OUTER JOIN PROJECT_BUDGETS PJBG ON PJBG.PROJ_ID=:PROJ_ID AND PJBG.ACM_CODE = ACTT.ACM_CODE
+				</FROM>
+				<ORDER>ORDER BY ACTT.ACM_SEQ</ORDER>
+			</SQL>
+		</DATASET>
+
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, PBDG_ID
+					, ACM_CODE
+					, PBDG_TOTAL
+					, PBDG_COUNT
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-BROWSER">
+			<HEADER NAVI="N" ADD="N" EDIT="Y" DELETE="N"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="ACM_CODE" LABEL="project.acm_code" ALIGN="left" WIDTH="15em">
+					<DATA-FORMATTER><![CDATA[
+						(value,row,idx)=>{
+							return $(`<div class="col-24 row"><div class="col offset-${row.node_level}">${value}</div></div>`);
+						}
+						]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="ACM_NAME" LABEL="project.acm_name" ALIGN="left">
+					<DATA-FORMATTER><![CDATA[
+						(value,row,idx)=>{
+							return $(`<div class="col-24 row"><div class="col offset-${row.node_level}">${value}</div></div>`);
+						}
+						]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="PBDG_TOTAL" LABEL="project.bgt_amount" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return (row["node_type"]==="D")? value : "";}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<COMMAND-BUTTONS>
+					<BUTTONS-FILTER>
+						<EDIT><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></EDIT>
+						<DELETE><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></DELETE>
+						<VIEW><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></VIEW>
+					</BUTTONS-FILTER>
+				</COMMAND-BUTTONS>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="Y" ALLOW-NO-FILTER="Y" >
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" DATATYPE="TEXT" ALIGN="center"/>
+					<FIELD NAME="PROJ_NAME" CAPTION="project.name" INPUTTYPE="TEXT" DATATYPE="TEXT" ALIGN="left"/>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"></FIELD>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" CAPT_WIDTH="10" VAL_WIDTH="6" LAYOUT_WIDTH="12"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_NAME" CAPT_WIDTH="5" VAL_WIDTH="18" LAYOUT_WIDTH="24"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+			<BUTTONS>
+				<BUTTON NAME="btnButton1" CAPTION="ส่งกลับไปแก้ไข" CLASS="btn btn-outline-warning pd-x-10" SECTION="RIGHT"/>
+				<BUTTON NAME="btnButton2" CAPTION="ส่ง .... พิจารณา ต่อไป" CLASS="btn btn-warning pd-x-10" SECTION="RIGHT"/>
+			</BUTTONS>
+
+			<FOOTER SHOW="Y"/>
+			<SCRIPT>
+				<INITIALIZE>
+					<![CDATA[
+					{
+						console.log("init activity grid");
+
+						const fieldFormat = (value) => {
+							return formatNumber(value, 0);
+						}
+
+						$PageCtx.sum_of = {};
+						const summary = (field, data) => {
+							console.log("budget summary process.")
+							let total = 0;
+							for (let id=0; id < data.length; id++) {
+								let row = data[id];
+								if (row["node_type"] === "D") {
+									total += (+row[field]) || 0;
+								}
+							}
+
+							$PageCtx.sum_of[field] = total;
+
+							if ($PageCtx.$dataGrid.load && !$PageCtx.$dataGrid.reload) {
+								$PageCtx.$dataGrid.reload = true;
+								for (let id=data.length-1; id>=0; id--) {
+									let row = data[id];
+									if (row["node_type"] === "C") {
+										let grpTotal = 0;
+										let mainNode = row["acm_code"];
+										let nodes = [];
+										nodes.push($$("main_node="+mainNode,data));
+										for (let node of nodes.flat()) {
+											grpTotal += +node[field];
+										}
+										data[id][field] = grpTotal;
+									}
+								}
+								$PageCtx.$dataGrid.load(data);
+								$PageCtx.$dataGrid.reload = false;
+							}
+
+							return formatNumber(total, 0);
+						}
+
+						const $ctx = $PageCtx;
+						const gridFields = [$$("field^pbdg_", $ctx.gridColumn.flat())].flat();
+						for (let field of gridFields) {
+							field.formatter = fieldFormat;
+							field.footerFormatter = function (data) {
+								return summary(this.field, data);
+							}
+						}
+
+						$ctx.rowStyle = function (row, index) {
+							if (row["node_type"] === "C") {
+								return {
+									classes : `group-level-${row["node_level"]}`
+								};
+							}
+							return {}; // Default style for other rows
+						}
+					}
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_BROWSE>
+
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PROJ_NAME" CAPTION="project.name" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="VACM_CODE" CAPTION="project.acm_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.acm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-ACTIVITY-02-BDGT" VALUE-FIELD="ACM_CODE" TEXT-FIELD="ACM_NAME" PARAMETERS="DV_YEAR=PROJ_YEAR,STM_CODE=STM_CODE">
+						<UPDATE-FIELDS>
+							<FIELD SRC="ACM_CODE" TARGET="VACM_CODE"></FIELD>
+							<FIELD SRC="ACM_UNIT" TARGET="TARGET_UNIT"></FIELD>
+							<FIELD SRC="ACM_UNIT" TARGET="PWMT_UNIT"></FIELD>
+							<FIELD SRC="PJM_CODE" TARGET="PJM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								if (data.node_type === "C") {
+									data.disabled = true;
+								}
+								return $(`<div><label>[${data.acm_code}]</label> : <label>${data.acm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+				<FIELD NAME="GRID-BUDGET" INPUTTYPE="DATA-GRID" GRID-ID="GRID-WORK-BUDGET" ROWS="5" CAPTION="project.budget"/>
+
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_NAME" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.budget}</h4>]]></HEADER>
+					<ROW>
+						<FIELD NAME="GRID-BUDGET" LAYOUT_WIDTH="24" OFFSET=""/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-REVISE-COMMENT">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">การส่งกลับแก้ไข</h4>]]></HEADER>
+					<ROW TYPE="CONTENT">
+					<![CDATA[
+						<div class="mg-b-16">
+							<div id="FIELD-REVISE_COMMENT" class="form-group col-24 offset-0">
+								<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">รายการแก้ไข</label>
+								<div class="form-col col-24 col-sm-14" data-field="REVISE_COMMENT">
+									<input type="text" name="REVISE_COMMENT" id="REVISE_COMMENT" value=""  input-type="TEXT"  charcase="NORMAL" class="form-control dyn-form-control text">
+								</div>
+							</div>
+						</div>
+						<div>
+							<div>ประวัติการแก้ไข</div>
+							<ul>
+								<li>แก้ครั้งที่ 1 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 2 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 3 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 4 วันที่ xx/xx/xxxx : ...................................</li>
+							</ul>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							let acmCount = $$("^QT_TOTAL_0").sum();
+							$$("PBDG_COUNT").val(acmCount);
+							let gridCtx = ($PageCtx.widgets["GRID-BUDGET"]||{})["$GridCtx"];
+							if (gridCtx) {
+								let bdgTotal = gridCtx.sum_of["pbgi_total"];
+								$$("PBDG_TOTAL").val(bdgTotal);
+							}
+							Object.assign(data,form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+				<INITIALIZE>
+					<![CDATA[
+					const quoterSum = ()=>{
+						for (let sect=1; sect <=2; sect++) {
+							let summary = 0;
+							for (let qt = 1; qt <= 4; qt++) {
+								summary += $$(`PTGT_QT_0${qt}0${sect}`).number();
+							}
+							$$(`QT_TOTAL_0${sect}`).val(formatNumber(summary));
+						}
+					}
+					$$("^PTGT_QT_").on("change",quoterSum);
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt05/view/frm/bdgt-0501030.frml b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501030.frml
new file mode 100644
index 0000000..f814623
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/frm/bdgt-0501030.frml
@@ -0,0 +1,766 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-stratigy.frml"></INCLUDE>
+		<INCLUDE FILE="#grids/grid-stratigy-item.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-BROWSER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT PROJ_YEAR
+					, PROJ_ID
+					, STM_CODE
+					, STM_NAME
+					, PJM_CODE
+					, PJM_NAME
+					, FLOW_TYPE
+					, FLOW_TYPE_DESC
+					, PROJ_SEQ
+					, FLOW_STATE
+					, JDTOTT(SYSDATE - (DBMS_RANDOM.VALUE(3, 10))) STATE_DATE
+				</SELECT>
+				<FROM>
+					FROM (SELECT DISTINCT :PROJ_YEAR PROJ_YEAR
+					, PROJ.PROJ_ID
+					, PROJ.STM_CODE STM_CODE
+					, BUD.GET_SECTION(PROJ.STM_CODE) STM_NAME
+					, PROJ.PJM_CODE PJM_CODE
+					, BUD.GET_PROJECT(PROJ.PJM_CODE) PJM_NAME
+					, FTYP.RFC_CODE FLOW_TYPE
+					, FTYP.RFC_DESC FLOW_TYPE_DESC
+					, FTYP.RFC_ORDER PROJ_SEQ
+					, BGT.FLOW_STATE('STEP-02') FLOW_STATE
+					FROM REFER_CODE FTYP
+					INNER JOIN REFER_CODE PTYPE ON PTYPE.RFG_GRP = 'PROJ-TYPE' AND PTYPE.RFC_FLAG = FTYP.RFC_CODE
+					INNER JOIN PROJECTS PROJ ON PROJ.PROJ_TYPE = PTYPE.RFC_CODE
+					WHERE FTYP.RFG_GRP = 'FLOW-TYPE' AND FTYP.RFC_CODE = 'IN-YEAR' AND PROJ.PROJ_YEAR = :PROJ_YEAR
+					ORDER BY STM_NAME) QR1
+				</FROM>
+				<ORDER>ORDER BY STM_NAME</ORDER>
+			</SQL>
+		</DATASET>
+
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT PROJ.PROJ_ID
+					, PROJ.PROJ_TYPE
+					, PROJ.PROJ_YEAR
+					, PROJ.PJM_CODE
+					, BUD.GET_PROJECT(PROJ.PJM_CODE) PROJ_NAME
+					, PROJ.STM_CODE
+					, BUD.GET_SECTION(PROJ.STM_CODE) STM_NAME
+					, PROJ.BTM_CODE
+					, PROJ.ACM_CODE
+					, BUD.GET_ACTIVITY(PROJ.ACM_CODE) ACM_NAME
+					, PROJ.PLAN_TYPE
+					, PROJ.PROJ_DURATION
+					, PROJ.PROJ_START_YEAR
+					, PROJ.PROJ_END_YEAR
+					, PROJ.PROJ_FOR_STAFF
+
+					, PROJ.PROJ_CATE
+					, PROJ.PROJ_KIND
+					, PROJ.PROJ_FROM_YEAR
+
+				</SELECT>
+				<FROM>FROM PROJECTS PROJ</FROM>
+				<FILTER>WHERE PROJ_ID = :PROJ_ID</FILTER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="VARCHAR" WIDTH="50" LABEL="plcp.id"/>
+				<FIELD NAME="PROJ_TYPE" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.type"/>
+				<FIELD NAME="PROJ_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.year"/>
+				<FIELD NAME="PJM_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="plcp.pjm_code"/>
+				<FIELD NAME="STM_CODE" TYPE="VARCHAR" WIDTH="10" LABEL="plcp.stm_code"/>
+				<FIELD NAME="BTM_CODE" TYPE="VARCHAR" WIDTH="10" LABEL="plcp.btm_code"/>
+				<FIELD NAME="ACM_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="plcp.acm_code"/>
+				<FIELD NAME="ACM_NAME" TYPE="VARCHAR" WIDTH="200" LABEL="plcp.acm_name"/>
+				<FIELD NAME="PLAN_TYPE" TYPE="VARCHAR" WIDTH="15" LABEL="plcp.plan_type"/>
+				<FIELD NAME="PROJ_DURATION" TYPE="NUMBER" WIDTH="10" LABEL="plcp.duration"/>
+				<FIELD NAME="PROJ_START_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.start_year"/>
+				<FIELD NAME="PROJ_END_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.end_year"/>
+				<FIELD NAME="PROJ_FOR_STAFF" TYPE="NUMBER" WIDTH="10" LABEL="plcp.for_staff"/>
+
+				<FIELD NAME="PROJ_CATE" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.catagory"/>
+				<FIELD NAME="PROJ_KIND" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.kine"/>
+				<FIELD NAME="PROJ_FROM_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.from_year"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-BROWSER">
+			<HEADER NAVI="N" EDIT="Y" ADD="N" DELETE="N" VIEW="Y"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="STM_NAME" LABEL="props.stm_name" ALIGN="left" WIDTH="20em">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 text-nowrap"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="PJM_NAME" LABEL="project.name" ALIGN="left">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 row"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="FLOW_STATE" LABEL="props.state" ALIGN="center" WIDTH="15em"/>
+				<FIELD NAME="STATE_DATE" LABEL="props.state_date" ALIGN="center" WIDTH="15em"/>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="Y" ALLOW-NO-FILTER="Y">
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="COMBOBOX" SEARCH-ORIGIN="PROJ_YEAR=${VALUE}">
+						<LIST-OPTION TABLE="VL_YEAR" TEXT="#DV_YEAR" VALUE="DV_YEAR" ORDER="DV_YEAR" FIRSTLIST="@{NONE}"/>
+					</FIELD>
+					<FIELD NAME="STM_CODE" CAPTION="props.stm_name" INPUTTYPE="COMBOBOX" SEARCH-ORIGIN="STM_CODE=${VALUE}">
+						<LIST-OPTION TABLE="BUD.SECTION_M" TEXT="#STM_NAME" VALUE="STM_CODE" ORDER="STM_NAME" FIRSTLIST=""/>
+					</FIELD>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" VAL_WIDTH="6" CAPT_WIDTH="12" LAYOUT_WIDTH="12"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="STM_CODE" VAL_WIDTH="12" CAPT_WIDTH="6" LAYOUT_WIDTH="24"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+		</FORM_BROWSE>
+
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="STM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="BTM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PLAN_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_DURATION" INPUTTYPE="HIDDEN"/>
+
+				<FIELD NAME="PROJ_YEAR" CAPTION="plcp.year" INPUTTYPE="TEXT" READONLY="Y" DATATYPE="TEXT"/>
+				<FIELD NAME="VPJM_CODE" CAPTION="plcp.pjm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PJM_CODE" CAPTION="plcp.pjm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-PROJECT-02" VALUE-FIELD="PJM_CODE" TEXT-FIELD="PJM_NAME">
+						<UPDATE-FIELDS>
+							<FIELD SRC="PJM_CODE" TARGET="VPJM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								// data.disabled = data["node_type"] === "C";
+								return $(`<div class="d-flex flex-row gap-1 dyn-list-item"><label class="flex-column text-nowrap col-3">[${data.pjm_code}]</label> : <label>${data.pjm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+
+				<FIELD NAME="VACM_CODE" CAPTION="plcp.acm_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_CODE" CAPTION="plcp.acm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-ACTIVITY-02" VALUE-FIELD="ACM_CODE" TEXT-FIELD="ACM_NAME" PARAMETERS="DV_YEAR=PROJ_YEAR,STM_CODE=STM_CODE">
+						<UPDATE-FIELDS>
+							<FIELD SRC="ACM_CODE" TARGET="VACM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								// data.disabled = data["node_type"] === "C";
+								return $(`<div class="d-flex flex-row gap-1 dyn-list-item"><label class="flex-column text-nowrap col-3">[${data.acm_code}]</label> : <label>${data.acm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+
+				<FIELD NAME="STM_CODE" CAPTION="plcp.stm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="BTM_CODE" CAPTION="plcp.btm_code" INPUTTYPE="TEXT"/>
+				<FIELD NAME="PLAN_TYPE" CAPTION="plcp.plan_type" INPUTTYPE="TEXT"/>
+				<FIELD NAME="PROJ_DURATION" CAPTION="plcp.duration" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_START_YEAR" CAPTION="plcp.start_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_END_YEAR" CAPTION="plcp.end_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_FOR_STAFF" CAPTION="plcp.for_staff" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+
+				<FIELD NAME="PROJ_CATE" CAPTION="plcp.catagory" INPUTTYPE="RADIOGROUP" DATATYPE="TEXT" CLASS-NAME="flex-option">
+					<LIST-OPTION TABLE="BGT.REFER_CODE" TEXT="#RFC_DESC" VALUE="RFC_CODE" FILTER="RFG_GRP='PROJ-CATE'" ORDER="RFC_CODE"/>
+				</FIELD>
+
+				<FIELD NAME="PROJ_KIND" CAPTION="plcp.kind" INPUTTYPE="SWITCH" DATATYPE="TEXT"
+					VALUE="NEW" UNCHECK_VALUE="OLD" SUFFIX="#plcp.new|plcp.continue"></FIELD>
+
+
+				<FIELD NAME="PROJ_PHASE" CAPTION="#--" SHOWCAPT="Y" INPUTTYPE="CHECKBOXGROUP" DATATYPE="TEXT">
+					<LIST-OPTION TABLE="BGT.REFER_CODE" TEXT="#RFC_DESC" VALUE="RFC_CODE" FILTER="RFG_GRP='PROJ-PHASE'" ORDER="RFC_CODE" COLUMN="4"/>
+				</FIELD>
+				<FIELD NAME="PROJ_BUDGET" CAPTION="plcp.budget" INPUTTYPE="TEXT" DATATYPE="NUMBER" SUFFIX="บาท"/>
+
+
+				<FIELD NAME="PROJ_FROM_YEAR" CAPTION="plcp.from_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+				<FIELD NAME="GRID-STRATEGY" INPUTTYPE="DATA-GRID" GRID-ID="GRID-PROJECT-STTGYS" CAPTION="pstg.header"/>
+
+				<FIELD NAME="PROJ_INVOLVERS" INPUTTYPE="TEXTAREA" CAPTION="plcp.involvers" ROWS="4"/>
+				<FIELD NAME="PROJ_INVOLVISSE" INPUTTYPE="TEXTAREA" CAPTION="plcp.involv_issue" ROWS="4"/>
+
+				<SECTION ID="SEC-ATTATCH-FILE">
+					<FIELD NAME="FILE_BOX_01" CAPTION="file.upload 1" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_02" CAPTION="file.upload 2" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_03" CAPTION="file.upload 3" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+				</SECTION>
+			</FIELDS>
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VPJM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PJM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+				</SECTION>
+				<SECTION>
+					<HEADER CLASS="form-section-header col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{pstg.header}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="GRID-STRATEGY" LAYOUT_WIDTH="20" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+				<SECTION>
+					<ROW>
+						<FIELD NAME="PROJ_CATE" OFFSET="4" LAYOUT_WIDTH="20"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_KIND" OFFSET="4" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="PROJ_FROM_YEAR" LAYOUT_WIDTH="6"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-STRATEGY">
+					<HEADER CLASS="form-section-header col-24 mg-t-30 border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">ความเชื่อมโยงของโครงการกับประเด็นการยกระดับคะแนนดัชนีการรับรู้การทุจริต(CPI)และแหล่งข้อมูล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-4">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center">ประเด็น/แหล่งข้อมูล</th>
+										<th class="center" style="width: 5em">BF(TI)<br>(1)</th>
+										<th class="center" style="width: 5em">EIU<br>(2)</th>
+										<th class="center" style="width: 5em">GI<br>(3)</th>
+										<th class="center" style="width: 5em">IMD<br>(4)</th>
+										<th class="center" style="width: 5em">PERC<br>(5)</th>
+										<th class="center" style="width: 5em">PRS<br>(6)</th>
+										<th class="center" style="width: 5em">WEF<br>(7)</th>
+										<th class="center" style="width: 5em">WJP<br>(8)</th>
+										<th class="center" style="width: 5em">VDEM<br>(9)</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">1.สินบน</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+									</tr>
+									<tr>
+										<td class="left">2.การขัดกันแห่งผลประโยชน์</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+									</tr>
+									<tr>
+										<td class="left">3.นโยบายของรัฐบาลในการแก้ไขปัญหาการทุจริต</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+									<tr>
+										<td class="left">4.การตรวจสอบเจ้าหน้าที่รัฐ</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+									<tr>
+										<td class="left">5.ความโปร่งใสในระบบงบประมาณและการจัดซื้อจัดจ้าง</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-1">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">1.หลักการและเหตุผล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-2">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">2.วัตถุประสงค์</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-3">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">3.ประโยชน์ที่คาดว่าจะได้รับ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-4">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">4.เป้าหมาย</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-5">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">5.กลุ่มเป้าหมาย</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-6">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">6.พื้นที่ดำเนินการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-7">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">7.กิจกรรมที่จะดำเนินการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">ขั้นตอนการดำเนินงาน</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 1</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 2</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 3</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 4</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2">
+											<button type="button" id="add-btn" class="btn btn-primary btn-round data-grid-add-btn mg-y-5 w-100 white"><i class="fa fa-plus"></i></button>
+										</th>
+									</tr>
+									<tr>
+										<th class="center" style="width: 3em">ต.ค.</th>
+										<th class="center" style="width: 3em">พ.ย.</th>
+										<th class="center" style="width: 3em">ธ.ค.</th>
+										<th class="center" style="width: 3em">ม.ค.</th>
+										<th class="center" style="width: 3em">ก.พ.</th>
+										<th class="center" style="width: 3em">มี.ค.</th>
+										<th class="center" style="width: 3em">เม.ย.</th>
+										<th class="center" style="width: 3em">พ.ค.</th>
+										<th class="center" style="width: 3em">มิ.ย.</th>
+										<th class="center" style="width: 3em">ก.ค.</th>
+										<th class="center" style="width: 3em">ส.ค.</th>
+										<th class="center" style="width: 3em">ก.ย.</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">กิจกรรมที่ ๑ การระดมความคิดเห็นเพื่อ
+											กำหนดประเด็นจัดทำแผนงานและ
+											แนวทางในการขับเคลื่อนเพื่อป้องปราม
+											หรือเฝ้าระวังปัญหาการทุจริตในพื้นที่</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+									<tr>
+										<td class="left">กิจกรรมที่ ๒ การลงพื้นที่เพื่อเฝ้าระวังและ
+											ป้องปรามการทุจริตในพื้นที่ตามนโยบาย
+											ของสำนักงานป.ป.ช.หรือตามประเด็นที่
+											ได้รับแจ้งข้อมูลจากศูนย์ป้องปราม
+											การทุจริตแห่งชาติสำนักงานป.ป.ช.</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-8">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">8.ตัวชี้วัดของผลผลิต/ผลลัพธ์การดำเนินโครงการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">ผลผลิต(Output)/ผลลัพธ์(Outcome)</th>
+										<th class="center" style="width: 12em">ตัวชี้วัด</th>
+										<th class="center" style="width: 12em">ค่าเป้าหมาย</th>
+										<th class="center" style="width: 12em">ระยะเวลา</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2">
+											<button type="button" id="add-btn" class="btn btn-primary btn-round data-grid-add-btn mg-y-5 w-100 white"><i class="fa fa-plus"></i></button>
+										</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left"><b>ผลผลิต(Output)</b><br>
+											รายงานสรุปผลโครงการแก้ไขปัญหา
+											การทุจริตในพื้นที่
+										</td>
+										<td class="center">แนวทางการแก้ไขปัญหา
+											การทุจริตในพื้นที่</td>
+										<td class="center">รายงาน ๑ ฉบับ</td>
+										<td class="center">ไตรมาสที่ ๔</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+
+									<tr>
+										<td class="left"><b>ผลลัพธ์(Outcome)</b><br>
+											หน่วยงานที่เกี่ยวข้องนำแนวทางการแก้ไข
+											ปัญหาการทุจริตไปใช้ในการป้องกัน
+											การทุจริตในพื้นที่เพื่อทำให้คดีทุจริต
+											ในพื้นที่ลดลง
+										</td>
+										<td class="center">จำนวนหน่วยงานที่นำแนวทาง
+											การแก้ไขปัญหาการทุจริตในพื้นที่
+											ไปใช้ในการป้องกันการทุจริต
+											ในพื้นที่่</td>
+										<td class="center">อย่างน้อย ๑ หน่วยงาน</td>
+										<td class="center">ไตรมาสที่ ๔</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-9">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">9.งบประมาณ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_BUDGET" OFFSET="4" LAYOUT_WIDTH="6"/>
+					</ROW>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">งบรายจ่าย</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 1</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 2</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 3</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 4</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2"></th>
+									</tr>
+									<tr>
+										<th class="center" style="width: 3em">ต.ค.</th>
+										<th class="center" style="width: 3em">พ.ย.</th>
+										<th class="center" style="width: 3em">ธ.ค.</th>
+										<th class="center" style="width: 3em">ม.ค.</th>
+										<th class="center" style="width: 3em">ก.พ.</th>
+										<th class="center" style="width: 3em">มี.ค.</th>
+										<th class="center" style="width: 3em">เม.ย.</th>
+										<th class="center" style="width: 3em">พ.ค.</th>
+										<th class="center" style="width: 3em">มิ.ย.</th>
+										<th class="center" style="width: 3em">ก.ค.</th>
+										<th class="center" style="width: 3em">ส.ค.</th>
+										<th class="center" style="width: 3em">ก.ย.</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">งบบริหารจัดการรายเดือน</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+								<tfoot>
+									<tr>
+										<td class="left">รวมงบประมาณรายไตรมาส</td>
+										<td class="right" colspan="3">0</td>
+										<td class="right" colspan="3">0</td>
+										<td class="right" colspan="3">0</td>
+										<td class="right" colspan="3">0</td>
+										<td class="operate-header" style="text-align: center; width: 90px;"></td>
+									</tr>
+								</tfoot>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-10">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">10.ผู้รับผิดชอบโครงการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-11">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">11.ผู้ที่เกี่ยวข้องที่อาจจะได้รับผลกระทบ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_INVOLVERS" LAYOUT_WIDTH="10" OFFSET="4"/>
+						<FIELD NAME="PROJ_INVOLVISSE" LAYOUT_WIDTH="10"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-NOTE-12">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">12.ลักษณะโครงการ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_PHASE" OFFSET="4" LAYOUT_WIDTH="16"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-13">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">13.การติดตามประเมินผล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-ATTACH-FILES">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.constructor_attatchment}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-REVISE-COMMENT">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">การส่งกลับแก้ไข</h4>]]></HEADER>
+					<ROW TYPE="CONTENT">
+					<![CDATA[
+						<div class="mg-b-16">
+							<div id="FIELD-REVISE_COMMENT" class="form-group col-24 offset-0">
+								<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">รายการแก้ไข</label>
+								<div class="form-col col-24 col-sm-14" data-field="REVISE_COMMENT">
+									<input type="text" name="REVISE_COMMENT" id="REVISE_COMMENT" value=""  input-type="TEXT"  charcase="NORMAL" class="form-control dyn-form-control text">
+								</div>
+							</div>
+						</div>
+						<div>
+							<div>ประวัติการแก้ไข</div>
+							<ul>
+								<li>แก้ครั้งที่ 1 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 2 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 3 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 4 วันที่ xx/xx/xxxx : ...................................</li>
+							</ul>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+
+
+				<SECTION ID="SECT-FILE-UPLOAD">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">เอกสารประกอบการพิจารณา</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+
+			</LAYOUT>
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							if ($PageCtx.$action === "add") {
+								let projYear = $$("PROJ_YEAR").val();
+								let projType = "PLCY";
+								let btmCode = "01";
+								let stmCode = $user.deptCode;
+								let acmCode = $$("ACM_CODE").val();
+								let projId = `${projYear}x${projType}x${stmCode}x${acmCode}`;
+
+								$$("PROJ_ID").val(projId);
+								$$("PROJ_TYPE").val(projType);
+								$$("STM_CODE").val(stmCode);
+								$$("BTM_CODE").val(btmCode);
+							}
+							Object.assign(data, form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+			</SCRIPT>
+			<BUTTONS>
+<!--				<BUTTON NAME="btnButton1" CAPTION="ส่งกลับไปแก้ไข" CLASS="btn btn-outline-warning pd-x-10" SECTION="RIGHT"/>-->
+<!--				<BUTTON NAME="btnButton2" CAPTION="ส่ง .... พิจารณา ต่อไป" CLASS="btn btn-warning pd-x-10" SECTION="RIGHT"/>-->
+				<BUTTON NAME="btnButton3" CAPTION="รายละเอียดงบประมาณ" CLASS="btn btn-outline-success" SECTION="LEFT">
+					<EVENT ON="click"><![CDATA[
+						(ev) => {
+							ev.preventDefault();
+							let data = $PageCtx.$data;
+							let projId = data.proj_id;
+							let targetUrl = url("/bdgt05/bgt0501030-budget?proj_id=" + projId);
+							data.page_title = $("h4.page-title").html();
+							data.postData = $PageCtx.$Params.get("data");
+							$PageCtx.saveSessionData("budget", data);
+							$PageCtx.saveStorageData("budget#search", {PROJ_ID: projId});
+							$WebNavi.goto(targetUrl);
+						}
+						]]></EVENT>
+				</BUTTON>
+			</BUTTONS>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt05/view/frm/grids/grid-construct-budget.frml b/DevResources/full-examples/bdgt05/view/frm/grids/grid-construct-budget.frml
new file mode 100644
index 0000000..5f3dc68
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/frm/grids/grid-construct-budget.frml
@@ -0,0 +1,260 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-PROJECT_BUDGET_ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT :PROJ_ID PROJ_ID
+					, ACTT.ACM_CODE
+					, ACTT.ACM_NAME
+					, ACTT.ACM_SEQ
+					, ACTT.NODE_LEVEL
+					, ACTT.MAIN_NODE
+					, ACTT.ACM_UNIT
+					, ACTT.ACM_START_YEAR
+					, ACTT.ACM_END_YEAR
+					, ACTT.NODE_TYPE
+					, PBGI.PBDG_ID
+					, PBGI.BGM_CODE
+					, PBGI.PBGI_QTY
+					, PBGI.PBGI_COST
+					, PBGI.PBGI_FREQ
+					, PBGI.PBGI_ASSET_TYPE
+					, PBGI.PBGI_REPLACE
+					, PBGI.PBGI_ADDITION
+					, PBGI.PBGI_ACQUIRE
+					, PBGI.PBGI_TOTAL
+					, PBGI.PBGI_REASON
+					</SELECT>
+				<FROM>
+					FROM BGT.V_ACTIVITY_TREE ACTT
+						INNER JOIN ( SELECT DISTINCT ACM.ACM_CODE
+									   FROM BUD.ACTIVITY_M ACM
+										     INNER JOIN BUD.ACTIVITY_CTRL_H ACH ON ACM.ACM_CODE = ACH.ACH_CODE
+											 START WITH ACM.ACM_CODE IN (SELECT PBGI.PBDG_ID ACM_CODE FROM PROJECT_BUDGET_ITEMS PBGI WHERE PROJ_ID = :PROJ_ID)
+											 CONNECT BY PRIOR ACH.ACH_CTRL_CODE = ACH.ACH_CODE) FLTR ON FLTR.ACM_CODE = ACTT.ACM_CODE
+						LEFT OUTER JOIN BGT.PROJECT_BUDGET_ITEMS PBGI ON PBGI.PBDG_ID = ACTT.ACM_CODE
+				</FROM>
+				<ORDER>ORDER BY ACTT.ACM_SEQ</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="รหัสหมวดงบประมาณ" WIDTH="20"/>
+				<FIELD NAME="PBGI_QT_01" TYPE="NUMBER" LABEL="จำนวนไตรมาส 1" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_02" TYPE="NUMBER" LABEL="จำนวนไตรมาส 2" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_03" TYPE="NUMBER" LABEL="จำนวนไตรมาส 3" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_04" TYPE="NUMBER" LABEL="จำนวนไตรมาส 4" WIDTH="15"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="จำนวน" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="ราคาต่อหน่วย" WIDTH="15"/>
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="ความถี่/จำนวนครั้ง" WIDTH="10"/>
+				<FIELD NAME="PBGI_ASSET_TYPE" TYPE="TEXT" LABEL="ประเภทสินทรัพย์" WIDTH="10"/>
+				<FIELD NAME="PBGI_REPLACE" TYPE="NUMBER" LABEL="ทดแทนของเดิม" WIDTH="10"/>
+				<FIELD NAME="PBGI_ADDITION" TYPE="NUMBER" LABEL="เพิ่มเติม" WIDTH="10"/>
+				<FIELD NAME="PBGI_ACQUIRE" TYPE="NUMBER" LABEL="จัดหาใหม่" WIDTH="10"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="รวมเป็นเงิน" WIDTH="15"/>
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="เหตุผลความจำเป็น" WIDTH="4000"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<DATA-GRIDS>
+		<DATA-GRID ID="GRID-CONST-BUDGET">
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID" DETAIL-FIELDS="PROJ_ID"/>
+			<UNIQ-CHECK CHECK-FIELDS="ACM_CODE" MESSAGE="pctbi.const_code duplicate !"></UNIQ-CHECK>
+			<GRID-LIST DATAID="DS-PROJECT_BUDGET_ITEMS" EDIT="Y" DELETE="Y" CLASS="table-primary">
+				<KEYFIELDS>PROJ_ID,BGM_CODE</KEYFIELDS>
+				<TITLES>
+					<ROW>
+						<FIELD NAME="ACM_CODE" LABEL="pctbi.const_code" WIDTH="10em" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="ACM_NAME" LABEL="pctbi.const_name" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BUDGET_INFO" LABEL="pctbi.budget" ALIGN="center" COLS-SPAN="3"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_QTY" LABEL="pctbi.qty" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_COST" LABEL="pctbi.cost" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_TOTAL" LABEL="pctbi.total" WIDTH="8em" ALIGN="right"/>
+					</ROW>
+				</TITLES>
+
+				<FIELDS>
+					<FIELD NAME="PBDG_ID" LABEL="pctbi.const_code" WIDTH="15em" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="ACM_NAME" LABEL="pctbi.const_name" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+					<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					<COMMAND-BUTTONS>
+						<BUTTONS-FILTER>
+							<EDIT><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></EDIT>
+							<DELETE><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></DELETE>
+							<VIEW><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></VIEW>
+						</BUTTONS-FILTER>
+					</COMMAND-BUTTONS>
+				</FIELDS>
+				<FOOTER SHOW="Y"/>
+				<SCRIPT>
+					<INITIALIZE>
+						<![CDATA[
+						(ctx)=> {
+						    ctx.sum_of = {};
+							console.log("init grid-budget");
+							const fieldFormat = (field,value,row) => {
+								if (row["node_type"] === "D" || field === "pbgi_total") {
+									return formatNumber(value, 0);
+								} else {
+									return  "";
+								}
+							}
+
+							const summary = (field, data) => {
+								let total = 0;
+								for (const row of data) {
+									total += (+row[field])||0;
+								}
+								ctx.sum_of[field] = total;
+
+								if (ctx.$dataGrid && ctx.$dataGrid.load && !ctx.$dataGrid.reload) {
+									ctx.$dataGrid.reload = true;
+									for (let id=data.length-1; id>=0; id--) {
+										let row = data[id];
+										if (row["node_type"] === "C") {
+											let grpTotal = 0;
+											let mainNode = row["acm_code"];
+											let nodes = [];
+											let dataNode = $$("main_node="+mainNode,data);
+											if (dataNode) {
+												nodes.push(dataNode);
+												for (let node of nodes.flat()) {
+													grpTotal += +node[field];
+												}
+												data[id][field] = grpTotal;
+											}
+										}
+									}
+									ctx.$dataGrid.load(data);
+									ctx.$dataGrid.reload = false;
+								}
+
+								return formatNumber(total,0);
+							}
+
+							const fieldList = ["pbgi_qty","pbgi_cost","pbgi_total"];
+							for (let field of fieldList) {
+								let column = $$(`field=${field}`,ctx.gridColumn.flat());
+								column.formatter = (value,row) => {
+									return fieldFormat(field, value, row);
+								}
+								column.footerFormatter = (data)=>{
+									return summary(field,data);
+								}
+							}
+
+							ctx.option.rowStyle = function (row, index) {
+								if (row["node_type"] === "C") {
+									return {classes : `group-level-${row["node_level"]}`};
+								}
+								return {}; // Default style for other rows
+							}
+
+						}
+						]]>
+					</INITIALIZE>
+				</SCRIPT>
+			</GRID-LIST>
+
+			<GRID-EDITOR DATAID="DS-PROJECT_BUDGET_ITEMS">
+				<FIELDS>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="ACM_CODE" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="BGM_NAME" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="ACM_NAME" INPUTTYPE="HIDDEN"/>
+
+					<FIELD NAME="VACM_CODE" CAPTION="pctbi.const_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+					<FIELD NAME="ACM_CODE" CAPTION="pctbi.const_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-ACTIVITY-04" VALUE-FIELD="ACM_CODE" TEXT-FIELD="ACM_NAME" PARAMETERS="DV_YEAR=PROJ_YEAR,STM_CODE=STM_CODE">
+							<UPDATE-FIELDS>
+								<FIELD SRC="ACM_CODE" TARGET="VACM_CODE"/>
+								<FIELD SRC="ACM_CODE" TARGET="PBDG_ID"/>
+								<FIELD SRC="ACM_NAME" TARGET="ACM_NAME"/>
+								<FIELD SRC="ACM_UNIT" TARGET="PBGI_UNIT"/>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div class="d-flex flex-row gap-1"><label class="flex-column text-nowrap col-3">[${data.acm_code}]</label> : <label>${data.acm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-BUDGET-04" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div class="d-flex flex-row gap-1"><label class="flex-column text-nowrap col-3">[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="PBGI_UNIT" CAPTION="pctbi.unit" INPUTTYPE="TEXT" DATATYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="PBGI_QTY" CAPTION="pctbi.qty" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"  CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_COST" CAPTION="pctbi.cost" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="pctbi.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT CLASS="block-layout-form">
+					<ROW>
+						<FIELD NAME="VACM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="16"/>
+					</ROW>
+					<ROW ID="ROW-BUDGET-DATA">
+						<FIELD NAME="PBGI_QTY" LAYOUT_WIDTH="3" OFFSET="6"/>
+						<FIELD NAME="PBGI_UNIT" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_COST" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="4" OFFSET="6"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="12"/>
+					</ROW>
+					<ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 350px"></div>]]>
+					</ROW>
+				</LAYOUT>
+				<SCRIPT>
+					<INITIALIZE><![CDATA[
+						console.log("sum budget value");
+						let budgetField = $$("input.budget-data");
+						const sumBudget = ()=>{
+							$$("PBGI_TOTAL").setValue(budgetField.multiply());
+						}
+						budgetField.on("change",sumBudget);
+						]]></INITIALIZE>
+				</SCRIPT>
+			</GRID-EDITOR>
+		</DATA-GRID>
+	</DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt05/view/frm/grids/grid-equipt-budget.frml b/DevResources/full-examples/bdgt05/view/frm/grids/grid-equipt-budget.frml
new file mode 100644
index 0000000..2d71eb9
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/frm/grids/grid-equipt-budget.frml
@@ -0,0 +1,231 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-PROJECT_BUDGET_ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT BGTT.BGM_CODE
+							, BGTT.BGM_NAME
+							, BGTT.BGM_UNIT
+							, BGTT.BGM_UNIT_RATE
+							, BGTT.NODE_LEVEL
+							, BGTT.BGM_SEQ
+							, BGTT.EXP_TYPE
+							, BGTT.MAIN_NODE
+							, BGTT.NODE_TYPE
+							, PBGI.PBGI_QTY
+							, PBGI.PBGI_COST
+							, PBGI.PBGI_FREQ
+							, PBGI.PBGI_ASSET_TYPE
+							, PBGI.PBGI_REPLACE
+							, PBGI.PBGI_ADDITION
+							, PBGI.PBGI_ACQUIRE
+							, PBGI.PBGI_TOTAL
+							, PBGI.PBGI_REASON
+				</SELECT>
+				<FROM>
+					FROM BGT.V_BUDGET_TREE BGTT
+						INNER JOIN (SELECT DISTINCT BGDM.BGM_CODE
+									  FROM BUD.BUDGET_M BGDM
+									       INNER JOIN BUD.BUDGET_M BGDH ON BGDM.BGM_CODE = BGDH.BGM_CODE
+										   START WITH BGDM.BGM_CODE IN (SELECT PBGI.BGM_CODE FROM BGT.PROJECT_BUDGET_ITEMS PBGI WHERE PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID)
+									       CONNECT BY PRIOR BGDH.BGM_MAIN_NODE = BGDH.BGM_CODE) FLTR ON FLTR.BGM_CODE = BGTT.BGM_CODE
+						LEFT OUTER JOIN BGT.PROJECT_BUDGET_ITEMS PBGI ON PBGI.BGM_CODE = BGTT.BGM_CODE
+				</FROM>
+				<ORDER>ORDER BY BGTT.BGM_SEQ</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="รหัสหมวดงบประมาณ" WIDTH="20"/>
+				<FIELD NAME="PBGI_QT_01" TYPE="NUMBER" LABEL="จำนวนไตรมาส 1" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_02" TYPE="NUMBER" LABEL="จำนวนไตรมาส 2" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_03" TYPE="NUMBER" LABEL="จำนวนไตรมาส 3" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_04" TYPE="NUMBER" LABEL="จำนวนไตรมาส 4" WIDTH="15"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="จำนวน" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="ราคาต่อหน่วย" WIDTH="15"/>
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="ความถี่/จำนวนครั้ง" WIDTH="10"/>
+				<FIELD NAME="PBGI_ASSET_TYPE" TYPE="TEXT" LABEL="ประเภทสินทรัพย์" WIDTH="10"/>
+				<FIELD NAME="PBGI_REPLACE" TYPE="NUMBER" LABEL="ทดแทนของเดิม" WIDTH="10"/>
+				<FIELD NAME="PBGI_ADDITION" TYPE="NUMBER" LABEL="เพิ่มเติม" WIDTH="10"/>
+				<FIELD NAME="PBGI_ACQUIRE" TYPE="NUMBER" LABEL="จัดหาใหม่" WIDTH="10"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="รวมเป็นเงิน" WIDTH="15"/>
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="เหตุผลความจำเป็น" WIDTH="4000"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<DATA-GRIDS>
+		<DATA-GRID ID="GRID-EQUIPT-BUDGET">
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,PBDG_ID" DETAIL-FIELDS="PROJ_ID,PBDG_ID"/>
+			<UNIQ-CHECK CHECK-FIELDS="BGM_CODE" MESSAGE="pwbg.bgm_code duplicate !"></UNIQ-CHECK>
+			<GRID-LIST DATAID="DS-PROJECT_BUDGET_ITEMS" EDIT="Y" DELETE="Y" CLASS="table-primary">
+				<KEYFIELDS>PROJ_ID,BGM_CODE</KEYFIELDS>
+				<TITLES>
+					<ROW>
+						<FIELD NAME="BGM_CODE" LABEL="pbgz.bgm_code" WIDTH="10em" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_NAME" LABEL="pbgz.bgm_name" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_BUTGETS" LABEL="pbgz.budget" ALIGN="center" COLS-SPAN="5"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_FREQ" LABEL="pbgz.freq" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_ACQUIRE" LABEL="pbgz.acquire" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					</ROW>
+				</TITLES>
+
+				<FIELDS>
+					<FIELD NAME="BGM_CODE" LABEL="pwbg.bgm_code" WIDTH="15em" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="BGM_NAME" LABEL="pwbg.bgm_name" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="PBGI_FREQ" LABEL="pbgz.freq" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_ACQUIRE" LABEL="pbgz.acquire" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+					<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					<COMMAND-BUTTONS>
+						<BUTTONS-FILTER>
+							<EDIT><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></EDIT>
+							<DELETE><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></DELETE>
+							<VIEW><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></VIEW>
+						</BUTTONS-FILTER>
+					</COMMAND-BUTTONS>
+				</FIELDS>
+				<FOOTER SHOW="Y"/>
+				<SCRIPT>
+					<INITIALIZE>
+						<![CDATA[
+						(ctx)=> {
+						    ctx.sum_of = {};
+							console.log("init grid-budget");
+							const fieldFormat = (field,value,row) => {
+								if (row["node_type"] === "D" || field === "pbgi_total") {
+									return formatNumber(value, 0);
+								} else {
+									return  "";
+								}
+							}
+
+							const summary = (field, data) => {
+								let total = 0;
+								for (const row of data) {
+									total += (+row[field])||0;
+								}
+								ctx.sum_of[field] = total;
+
+								if (ctx.$dataGrid && ctx.$dataGrid.load && !ctx.$dataGrid.reload) {
+									ctx.$dataGrid.reload = true;
+									for (let id=data.length-1; id>=0; id--) {
+										let row = data[id];
+										if (row["node_type"] === "C") {
+											let grpTotal = 0;
+											let mainNode = row["bgm_code"];
+											let nodes = [];
+											nodes.push($$("main_node="+mainNode,data));
+											for (let node of nodes.flat()) {
+												grpTotal += +node[field];
+											}
+											data[id][field] = grpTotal;
+										}
+									}
+									ctx.$dataGrid.load(data);
+									ctx.$dataGrid.reload = false;
+								}
+
+								return formatNumber(total,0);
+							}
+
+							const fieldList = ["pbgi_freq","pbgi_qty","pbgi_acquire","pbgi_cost","pbgi_total"];
+							for (let field of fieldList) {
+								let column = $$(`field=${field}`,ctx.gridColumn.flat());
+								column.formatter = (value,row) => {
+									return fieldFormat(field, value, row);
+								}
+								column.footerFormatter = (data)=>{
+									return summary(field,data);
+								}
+							}
+
+							ctx.option.rowStyle = function (row, index) {
+								if (row["node_type"] === "C") {
+									return {classes : `group-level-${row["node_level"]}`};
+								}
+								return {}; // Default style for other rows
+							}
+
+						}
+						]]>
+					</INITIALIZE>
+				</SCRIPT>
+			</GRID-LIST>
+
+			<GRID-EDITOR DATAID="DS-PROJECT_BUDGET_ITEMS">
+				<FIELDS>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="BGM_NAME" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-BUDGET-03" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div><label class="offset-${data.node_level}">[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="PBGI_FREQ" CAPTION="pbgz.freq" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_QTY" CAPTION="pbgz.qty" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"  CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_ACQUIRE" CAPTION="pbgz.acquire" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_COST" CAPTION="pbgz.cost" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="pbgz.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT CLASS="block-layout-form">
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="16"/>
+					</ROW>
+					<ROW ID="ROW-BUDGET-DATA">
+						<FIELD NAME="PBGI_FREQ" LAYOUT_WIDTH="3" OFFSET="6"/>
+						<FIELD NAME="PBGI_QTY" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_ACQUIRE" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_COST" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 350px"></div>]]>
+					</ROW>
+				</LAYOUT>
+				<SCRIPT>
+					<INITIALIZE><![CDATA[
+						console.log("sum budget value");
+						let budgetField = $$("input.budget-data");
+						const sumBudget = ()=>{
+							$$("PBGI_TOTAL").setValue(budgetField.multiply());
+						}
+						budgetField.on("change",sumBudget);
+						]]></INITIALIZE>
+				</SCRIPT>
+			</GRID-EDITOR>
+		</DATA-GRID>
+	</DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt05/view/frm/grids/grid-manage-budget.frml b/DevResources/full-examples/bdgt05/view/frm/grids/grid-manage-budget.frml
new file mode 100644
index 0000000..532e586
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/frm/grids/grid-manage-budget.frml
@@ -0,0 +1,222 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-PROJECT_BUDGET_ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT BGTT.BGM_CODE
+					, BGTT.BGM_NAME
+					, BGTT.BGM_UNIT
+					, BGTT.BGM_UNIT_RATE
+					, BGTT.NODE_LEVEL
+					, BGTT.BGM_SEQ
+					, BGTT.EXP_TYPE
+					, BGTT.MAIN_NODE
+					, BGTT.NODE_TYPE
+					, PBGI.PBGI_QTY
+					, PBGI.PBGI_FREQ
+					, PBGI.PBGI_COST
+					, PBGI.PBGI_ACQUIRE
+					, PBGI.PBGI_TOTAL
+				</SELECT>
+				<FROM>
+					FROM BGT.V_BUDGET_TREE BGTT
+					INNER JOIN (SELECT DISTINCT BGDM.BGM_CODE
+					FROM BUD.BUDGET_M BGDM
+					INNER JOIN BUD.BUDGET_M BGDH ON BGDM.BGM_CODE = BGDH.BGM_CODE
+					START WITH BGDM.BGM_CODE IN (SELECT PBGI.BGM_CODE FROM BGT.PROJECT_BUDGET_ITEMS PBGI WHERE PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID)
+					CONNECT BY PRIOR BGDH.BGM_MAIN_NODE = BGDH.BGM_CODE) FLTR ON FLTR.BGM_CODE = BGTT.BGM_CODE
+					LEFT OUTER JOIN BGT.PROJECT_BUDGET_ITEMS PBGI ON PBGI.BGM_CODE = BGTT.BGM_CODE AND PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID
+				</FROM>
+				<ORDER>ORDER BY BGTT.BGM_SEQ</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="รหัสหมวดงบประมาณ" WIDTH="20"/>
+
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="จำนวนครั้ง" WIDTH="10"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="จำนวนคน" WIDTH="10"/>
+				<FIELD NAME="PBGI_ACQUIRE" TYPE="NUMBER" LABEL="จำนวนชั่วโมง" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="อัตรา" WIDTH="15"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="รวมเป็นเงิน" WIDTH="15"/>
+
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="เหตุผลความจำเป็น" WIDTH="4000"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<DATA-GRIDS>
+		<DATA-GRID ID="GRID-WORK-BUDGET">
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,PBDG_ID" DETAIL-FIELDS="PROJ_ID,PBDG_ID"/>
+			<UNIQ-CHECK CHECK-FIELDS="BGM_CODE" MESSAGE="pwbg.bgm_code duplicate !"></UNIQ-CHECK>
+			<GRID-LIST DATAID="DS-PROJECT_BUDGET_ITEMS" EDIT="Y" DELETE="Y" CLASS="table-primary">
+				<KEYFIELDS>PROJ_ID,BGM_CODE</KEYFIELDS>
+				<TITLES>
+					<ROW>
+						<FIELD NAME="BGM_CODE" LABEL="pbgz.bgm_code" WIDTH="10em" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_NAME" LABEL="pbgz.bgm_name" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_BUTGETS" LABEL="pbgz.budget" ALIGN="center" COLS-SPAN="5"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_FREQ" LABEL="pbgz.freq" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_ACQUIRE" LABEL="pbgz.acquire" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					</ROW>
+				</TITLES>
+
+				<FIELDS>
+					<FIELD NAME="BGM_CODE" LABEL="pwbg.bgm_code" WIDTH="15em" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="BGM_NAME" LABEL="pwbg.bgm_name" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="PBGI_FREQ" LABEL="pbgz.freq" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_ACQUIRE" LABEL="pbgz.acquire" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+					<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					<COMMAND-BUTTONS>
+						<BUTTONS-FILTER>
+							<EDIT><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></EDIT>
+							<DELETE><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></DELETE>
+							<VIEW><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></VIEW>
+						</BUTTONS-FILTER>
+					</COMMAND-BUTTONS>
+				</FIELDS>
+				<FOOTER SHOW="Y"/>
+				<SCRIPT>
+					<INITIALIZE>
+						<![CDATA[
+						(ctx)=> {
+							ctx.sum_of = {};
+							console.log("init grid-budget");
+							const fieldFormat = (field,value,row) => {
+								if (row["node_type"] === "D" || field === "pbgi_total") {
+									return formatNumber(value, 0);
+								} else {
+									return  "";
+								}
+							}
+
+							const summary = (field, data) => {
+								let total = 0;
+								for (const row of data) {
+									total += (+row[field])||0;
+								}
+								ctx.sum_of[field] = total;
+
+								if (ctx.$dataGrid && ctx.$dataGrid.load && !ctx.$dataGrid.reload) {
+									ctx.$dataGrid.reload = true;
+									for (let id=data.length-1; id>=0; id--) {
+										let row = data[id];
+										if (row["node_type"] === "C") {
+											let grpTotal = 0;
+											let mainNode = row["bgm_code"];
+											let nodes = [];
+											nodes.push($$("main_node="+mainNode,data));
+											for (let node of nodes.flat()) {
+												grpTotal += +node[field];
+											}
+											data[id][field] = grpTotal;
+										}
+									}
+									ctx.$dataGrid.load(data);
+									ctx.$dataGrid.reload = false;
+								}
+
+								return formatNumber(total,0);
+							}
+
+							const fieldList = ["pbgi_freq","pbgi_qty","pbgi_acquire","pbgi_cost","pbgi_total"];
+							for (let field of fieldList) {
+								let column = $$(`field=${field}`,ctx.gridColumn.flat());
+								column.formatter = (value,row) => {
+									return fieldFormat(field, value, row);
+								}
+								column.footerFormatter = (data)=>{
+									return summary(field,data);
+								}
+							}
+
+							ctx.option.rowStyle = function (row, index) {
+								if (row["node_type"] === "C") {
+									return {classes : `group-level-${row["node_level"]}`};
+								}
+								return {}; // Default style for other rows
+							}
+
+						}
+						]]>
+					</INITIALIZE>
+				</SCRIPT>
+			</GRID-LIST>
+
+			<GRID-EDITOR DATAID="DS-PROJECT_BUDGET_ITEMS">
+				<FIELDS>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="BGM_NAME" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-BUDGET-02" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div><label class="offset-${data.node_level}">[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="PBGI_FREQ" CAPTION="pbgz.freq" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_QTY" CAPTION="pbgz.qty" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"  CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_ACQUIRE" CAPTION="pbgz.acquire" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_COST" CAPTION="pbgz.cost" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="pbgz.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT CLASS="block-layout-form">
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="16"/>
+					</ROW>
+					<ROW ID="ROW-BUDGET-DATA">
+						<FIELD NAME="PBGI_FREQ" LAYOUT_WIDTH="3" OFFSET="6"/>
+						<FIELD NAME="PBGI_QTY" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_ACQUIRE" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_COST" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 350px"></div>]]>
+					</ROW>
+				</LAYOUT>
+				<SCRIPT>
+					<INITIALIZE><![CDATA[
+						console.log("sum budget value");
+						let budgetField = $$("input.budget-data");
+						const sumBudget = ()=>{
+							$$("PBGI_TOTAL").setValue(budgetField.multiply());
+						}
+						budgetField.on("change",sumBudget);
+						]]></INITIALIZE>
+				</SCRIPT>
+			</GRID-EDITOR>
+		</DATA-GRID>
+	</DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt05/view/frm/grids/grid-proj-budget.frml b/DevResources/full-examples/bdgt05/view/frm/grids/grid-proj-budget.frml
new file mode 100644
index 0000000..f714ac1
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/frm/grids/grid-proj-budget.frml
@@ -0,0 +1,213 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-PROJECT_BUDGET_ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT BGTT.BGM_CODE
+							, BGTT.BGM_NAME
+							, BGTT.BGM_UNIT
+							, BGTT.BGM_UNIT_RATE
+							, BGTT.NODE_LEVEL
+							, BGTT.BGM_SEQ
+							, BGTT.EXP_TYPE
+							, BGTT.MAIN_NODE
+							, BGTT.NODE_TYPE
+							, PBGI.PBGI_QTY
+							, PBGI.PBGI_FREQ
+							, PBGI.PBGI_COST
+							, PBGI.PBGI_TOTAL
+				</SELECT>
+				<FROM>
+					FROM BGT.V_BUDGET_TREE BGTT
+						INNER JOIN (SELECT DISTINCT BGDM.BGM_CODE
+									  FROM BUD.BUDGET_M BGDM
+									       INNER JOIN BUD.BUDGET_M BGDH ON BGDM.BGM_CODE = BGDH.BGM_CODE
+										   START WITH BGDM.BGM_CODE IN (SELECT PBGI.BGM_CODE FROM BGT.PROJECT_BUDGET_ITEMS PBGI WHERE PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID)
+									       CONNECT BY PRIOR BGDH.BGM_MAIN_NODE = BGDH.BGM_CODE) FLTR ON FLTR.BGM_CODE = BGTT.BGM_CODE
+						LEFT OUTER JOIN BGT.PROJECT_BUDGET_ITEMS PBGI ON PBGI.BGM_CODE = BGTT.BGM_CODE AND PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID
+				</FROM>
+				<ORDER>ORDER BY BGTT.BGM_SEQ</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="รหัสหมวดงบประมาณ" WIDTH="20"/>
+
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="จำนวนครั้ง" WIDTH="10"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="จำนวนคน" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="อัตรา" WIDTH="15"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="รวมเป็นเงิน" WIDTH="15"/>
+
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="เหตุผลความจำเป็น" WIDTH="4000"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<DATA-GRIDS>
+		<DATA-GRID ID="GRID-WORK-BUDGET">
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,PBDG_ID" DETAIL-FIELDS="PROJ_ID,PBDG_ID"/>
+			<UNIQ-CHECK CHECK-FIELDS="BGM_CODE" MESSAGE="pwbg.bgm_code duplicate !"></UNIQ-CHECK>
+			<GRID-LIST DATAID="DS-PROJECT_BUDGET_ITEMS" EDIT="Y" DELETE="Y" CLASS="table-primary">
+				<KEYFIELDS>PROJ_ID,BGM_CODE</KEYFIELDS>
+				<TITLES>
+					<ROW>
+						<FIELD NAME="BGM_CODE" LABEL="plcbg.bgm_code" WIDTH="10em" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_NAME" LABEL="plcbg.bgm_name" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_BUTGETS" LABEL="plcbg.budget" ALIGN="center" COLS-SPAN="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_QTY" LABEL="plcbg.qty" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_FREQ" LABEL="plcbg.freq" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_COST" LABEL="plcbg.cost" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_TOTAL" LABEL="plcbg.total" WIDTH="8em" ALIGN="right"/>
+					</ROW>
+				</TITLES>
+
+				<FIELDS>
+					<FIELD NAME="BGM_CODE" LABEL="pwbg.bgm_code" WIDTH="15em" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="BGM_NAME" LABEL="pwbg.bgm_name" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="PBGI_QTY" LABEL="plcbg.qty" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_FREQ" LABEL="plcbg.freq" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_COST" LABEL="plcbg.cost" WIDTH="6em" ALIGN="right"/>
+					<FIELD NAME="PBGI_TOTAL" LABEL="plcbg.total" WIDTH="8em" ALIGN="right"/>
+					<COMMAND-BUTTONS>
+						<BUTTONS-FILTER>
+							<EDIT><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></EDIT>
+							<DELETE><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></DELETE>
+							<VIEW><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></VIEW>
+						</BUTTONS-FILTER>
+					</COMMAND-BUTTONS>
+				</FIELDS>
+				<FOOTER SHOW="Y"/>
+				<SCRIPT>
+					<INITIALIZE>
+						<![CDATA[
+						(ctx)=> {
+						    ctx.sum_of = {};
+							console.log("init grid-budget");
+							const fieldFormat = (field,value,row) => {
+								return (row["node_type"] === "D" || field === "pbgi_total") ? formatNumber(value, 0) : "";
+							}
+
+							const summary = (field, data) => {
+								let total = 0;
+								for (const row of data) {
+									if (row["node_type"] === "D") {
+										total += (strToFloat(row[field])) || 0;
+									}
+								}
+								ctx.sum_of[field] = total;
+
+								if (ctx.$dataGrid && ctx.$dataGrid.load && !ctx.$dataGrid.reload) {
+									ctx.$dataGrid.reload = true;
+									for (let id=data.length-1; id>=0; id--) {
+										let row = data[id];
+										if (row["node_type"] === "C") {
+											let grpTotal = 0;
+											let mainNode = row["bgm_code"];
+											let nodes = [];
+											nodes.push($$("main_node="+mainNode,data));
+											for (let node of nodes.flat()) {
+												grpTotal += +node[field];
+											}
+											data[id][field] = grpTotal;
+										}
+									}
+									ctx.$dataGrid.load(data);
+									ctx.$dataGrid.reload = false;
+								}
+
+								return formatNumber(total,0);
+							}
+
+							const fieldList = ["pbgi_freq","pbgi_qty","pbgi_cost","pbgi_total"];
+							for (let field of fieldList) {
+								let column = $$(`field=${field}`,ctx.gridColumn.flat());
+								column.formatter = (value,row) => {
+									return fieldFormat(field, value, row);
+								}
+								column.footerFormatter =function (data) {
+									return summary(field,data);
+								}
+							}
+
+							ctx.option.rowStyle = function (row, index) {
+								if (row["node_type"] === "C") {
+									return {classes : `group-level-${row["node_level"]}`};
+								}
+								return {}; // Default style for other rows
+							}
+						}
+						]]>
+					</INITIALIZE>
+				</SCRIPT>
+			</GRID-LIST>
+
+			<GRID-EDITOR DATAID="DS-PROJECT_BUDGET_ITEMS">
+				<FIELDS>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="BGM_NAME" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="NODE_TYPE" INPUTTYPE="HIDDEN" VALUE="D"/>
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-BUDGET-02-BDGT" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									return $(`<div><label class="offset-${data.node_level}">[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="PBGI_QTY" CAPTION="plcbg.qty" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"  CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_FREQ" CAPTION="plcbg.freq" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_COST" CAPTION="plcbg.cost" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="plcbg.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT CLASS="block-layout-form">
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="16"/>
+					</ROW>
+					<ROW ID="ROW-BUDGET-DATA">
+						<FIELD NAME="PBGI_QTY" LAYOUT_WIDTH="3" OFFSET="6"/>
+						<FIELD NAME="PBGI_FREQ" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_COST" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 350px"></div>]]>
+					</ROW>
+				</LAYOUT>
+				<SCRIPT>
+					<INITIALIZE><![CDATA[
+						console.log("sum budget value");
+						let budgetField = $$("input.budget-data");
+						const sumBudget = ()=>{
+							$$("PBGI_TOTAL").setValue(budgetField.multiply());
+						}
+						budgetField.on("change",sumBudget);
+						]]></INITIALIZE>
+				</SCRIPT>
+			</GRID-EDITOR>
+		</DATA-GRID>
+	</DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt05/view/frm/grids/grid-routine-budget.frml b/DevResources/full-examples/bdgt05/view/frm/grids/grid-routine-budget.frml
new file mode 100644
index 0000000..24a0aad
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/frm/grids/grid-routine-budget.frml
@@ -0,0 +1,222 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-PROJECT_BUDGET_ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT BGTT.BGM_CODE
+							, BGTT.BGM_NAME
+							, BGTT.BGM_UNIT
+							, BGTT.BGM_UNIT_RATE
+							, BGTT.NODE_LEVEL
+							, BGTT.BGM_SEQ
+							, BGTT.EXP_TYPE
+							, BGTT.MAIN_NODE
+							, BGTT.NODE_TYPE
+							, PBGI.PBGI_QTY
+							, PBGI.PBGI_FREQ
+							, PBGI.PBGI_COST
+							, PBGI.PBGI_ACQUIRE
+							, PBGI.PBGI_TOTAL
+				</SELECT>
+				<FROM>
+					FROM BGT.V_BUDGET_TREE BGTT
+						INNER JOIN (SELECT DISTINCT BGDM.BGM_CODE
+									  FROM BUD.BUDGET_M BGDM
+									       INNER JOIN BUD.BUDGET_M BGDH ON BGDM.BGM_CODE = BGDH.BGM_CODE
+										   START WITH BGDM.BGM_CODE IN (SELECT PBGI.BGM_CODE FROM BGT.PROJECT_BUDGET_ITEMS PBGI WHERE PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID)
+									       CONNECT BY PRIOR BGDH.BGM_MAIN_NODE = BGDH.BGM_CODE) FLTR ON FLTR.BGM_CODE = BGTT.BGM_CODE
+						LEFT OUTER JOIN BGT.PROJECT_BUDGET_ITEMS PBGI ON PBGI.BGM_CODE = BGTT.BGM_CODE AND PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID
+				</FROM>
+				<ORDER>ORDER BY BGTT.BGM_SEQ</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="รหัสหมวดงบประมาณ" WIDTH="20"/>
+
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="จำนวนครั้ง" WIDTH="10"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="จำนวนคน" WIDTH="10"/>
+				<FIELD NAME="PBGI_ACQUIRE" TYPE="NUMBER" LABEL="จำนวนชั่วโมง" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="อัตรา" WIDTH="15"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="รวมเป็นเงิน" WIDTH="15"/>
+
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="เหตุผลความจำเป็น" WIDTH="4000"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<DATA-GRIDS>
+		<DATA-GRID ID="GRID-WORK-BUDGET">
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,PBDG_ID" DETAIL-FIELDS="PROJ_ID,PBDG_ID"/>
+			<UNIQ-CHECK CHECK-FIELDS="BGM_CODE" MESSAGE="pwbg.bgm_code duplicate !"></UNIQ-CHECK>
+			<GRID-LIST DATAID="DS-PROJECT_BUDGET_ITEMS" EDIT="Y" DELETE="Y" CLASS="table-primary">
+				<KEYFIELDS>PROJ_ID,BGM_CODE</KEYFIELDS>
+				<TITLES>
+					<ROW>
+						<FIELD NAME="BGM_CODE" LABEL="pbgz.bgm_code" WIDTH="10em" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_NAME" LABEL="pbgz.bgm_name" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_BUTGETS" LABEL="pbgz.budget" ALIGN="center" COLS-SPAN="5"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_FREQ" LABEL="pbgz.freq" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_ACQUIRE" LABEL="pbgz.acquire" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					</ROW>
+				</TITLES>
+
+				<FIELDS>
+					<FIELD NAME="BGM_CODE" LABEL="pwbg.bgm_code" WIDTH="15em" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="BGM_NAME" LABEL="pwbg.bgm_name" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="PBGI_FREQ" LABEL="pbgz.freq" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_ACQUIRE" LABEL="pbgz.acquire" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+					<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					<COMMAND-BUTTONS>
+						<BUTTONS-FILTER>
+							<EDIT><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></EDIT>
+							<DELETE><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></DELETE>
+							<VIEW><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></VIEW>
+						</BUTTONS-FILTER>
+					</COMMAND-BUTTONS>
+				</FIELDS>
+				<FOOTER SHOW="Y"/>
+				<SCRIPT>
+					<INITIALIZE>
+						<![CDATA[
+						(ctx)=> {
+						    ctx.sum_of = {};
+							console.log("init grid-budget");
+							const fieldFormat = (field,value,row) => {
+								if (row["node_type"] === "D" || field === "pbgi_total") {
+									return formatNumber(value, 0);
+								} else {
+									return  "";
+								}
+							}
+
+							const summary = (field, data) => {
+								let total = 0;
+								for (const row of data) {
+									total += (+row[field])||0;
+								}
+								ctx.sum_of[field] = total;
+
+								if (ctx.$dataGrid && ctx.$dataGrid.load && !ctx.$dataGrid.reload) {
+									ctx.$dataGrid.reload = true;
+									for (let id=data.length-1; id>=0; id--) {
+										let row = data[id];
+										if (row["node_type"] === "C") {
+											let grpTotal = 0;
+											let mainNode = row["bgm_code"];
+											let nodes = [];
+											nodes.push($$("main_node="+mainNode,data));
+											for (let node of nodes.flat()) {
+												grpTotal += +node[field];
+											}
+											data[id][field] = grpTotal;
+										}
+									}
+									ctx.$dataGrid.load(data);
+									ctx.$dataGrid.reload = false;
+								}
+
+								return formatNumber(total,0);
+							}
+
+							const fieldList = ["pbgi_freq","pbgi_qty","pbgi_acquire","pbgi_cost","pbgi_total"];
+							for (let field of fieldList) {
+								let column = $$(`field=${field}`,ctx.gridColumn.flat());
+								column.formatter = (value,row) => {
+									return fieldFormat(field, value, row);
+								}
+								column.footerFormatter = (data)=>{
+									return summary(field,data);
+								}
+							}
+
+							ctx.option.rowStyle = function (row, index) {
+								if (row["node_type"] === "C") {
+									return {classes : `group-level-${row["node_level"]}`};
+								}
+								return {}; // Default style for other rows
+							}
+
+						}
+						]]>
+					</INITIALIZE>
+				</SCRIPT>
+			</GRID-LIST>
+
+			<GRID-EDITOR DATAID="DS-PROJECT_BUDGET_ITEMS">
+				<FIELDS>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="BGM_NAME" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-BUDGET-02" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div><label class="offset-${data.node_level}">[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="PBGI_FREQ" CAPTION="pbgz.freq" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_QTY" CAPTION="pbgz.qty" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"  CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_ACQUIRE" CAPTION="pbgz.acquire" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_COST" CAPTION="pbgz.cost" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="pbgz.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT CLASS="block-layout-form">
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="16"/>
+					</ROW>
+					<ROW ID="ROW-BUDGET-DATA">
+						<FIELD NAME="PBGI_FREQ" LAYOUT_WIDTH="3" OFFSET="6"/>
+						<FIELD NAME="PBGI_QTY" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_ACQUIRE" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_COST" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 350px"></div>]]>
+					</ROW>
+				</LAYOUT>
+				<SCRIPT>
+					<INITIALIZE><![CDATA[
+						console.log("sum budget value");
+						let budgetField = $$("input.budget-data");
+						const sumBudget = ()=>{
+							$$("PBGI_TOTAL").setValue(budgetField.multiply());
+						}
+						budgetField.on("change",sumBudget);
+						]]></INITIALIZE>
+				</SCRIPT>
+			</GRID-EDITOR>
+		</DATA-GRID>
+	</DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt05/view/frm/grids/grid-stratigy-item.frml b/DevResources/full-examples/bdgt05/view/frm/grids/grid-stratigy-item.frml
new file mode 100644
index 0000000..c581893
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/frm/grids/grid-stratigy-item.frml
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+    <DATASETS>
+        <DATASET ID="DS-PROJECT-STTGYS-ITEMS">
+            <SCHEMA>APP</SCHEMA>
+            <TABLENAME>PROJECT_STTGYS_ITEMS</TABLENAME>
+            <KEYFIELDS>PROJ_ID,PSTG_CODE,PSTI_GROUP</KEYFIELDS>
+            <SQL>
+                <SELECT>
+                    SELECT PSTI.PROJ_ID
+                         , PSTI.PSTG_CODE
+                         , PSTI.PSTI_GROUP
+                         , RFGP.RFC_DESC GROUP_DESC
+                         , PSTI.PSTI_CODE
+                         , RFCI.RFC_DESC ITEM_DESC
+                         , PSTI_DETAIL
+                </SELECT>
+                <FROM>FROM PROJECT_STTGYS_ITEMS PSTI
+                        INNER JOIN BGT.REFER_CODE RFGP ON RFGP.RFG_GRP='STG-ITEMS' AND RFC.RFC_CODE=STTG.PSTI_CODE
+                        INNER JOIN BGT.REFER_CODE RFCI ON RFC.RFG_GRP=PSTI.PSTI_GROUP AND RFC.RFC_CODE=STTG.PSTI_CODE
+                </FROM>
+                <ORDER>ORDER BY PSTI_GROUP, PSTI_CODE</ORDER>
+            </SQL>
+            <FIELDS>
+                <FIELD NAME="PROJ_ID" TYPE="VARCHAR" WIDTH="50" LABEL="project.id" />
+                <FIELD NAME="PSTG_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="pstg.code" />
+                <FIELD NAME="PSTI_GROUP" TYPE="VARCHAR" WIDTH="15" LABEL="psti.group" />
+                <FIELD NAME="PSTI_CODE" TYPE="VARCHAR" WIDTH="15" LABEL="psti.code" />
+                <FIELD NAME="PSTI_DETAIL" TYPE="VARCHAR" WIDTH="250" LABEL="psti.detail" />
+                <FIELD NAME="CREATE_BY" TYPE="VARCHAR" WIDTH="50" LABEL="sys.create_by" />
+                <FIELD NAME="CREATE_TIME" TYPE="DATE" WIDTH="0" LABEL="sys.create_time" />
+                <FIELD NAME="UPDATE_BY" TYPE="VARCHAR" WIDTH="50" LABEL="sys.update_by" />
+                <FIELD NAME="UPDATE_TIME" TYPE="DATE" WIDTH="0" LABEL="sys.update_time" />
+            </FIELDS>
+        </DATASET>
+    </DATASETS>
+
+    <DATA-GRIDS>
+        <DATA-GRID ID="GRID-PROJECT-STTGYS-ITEMS">
+            <MASTER-DATA DATASET-ID="DS-PROJECT-STTGYS" MASTER-FIELDS="PROJ_ID,PSTG_CODE" DETAIL-FIELDS="PROJ_ID,PSTG_CODE"/>
+            <UNIQ-CHECK CHECK-FIELDS="PSTI_GROUP" MESSAGE="psti.group duplicate !"></UNIQ-CHECK>
+            <GRID-LIST DATAID="DS-PROJECT-STTGYS-ITEMS" EDIT="Y" DELETE="Y" ADD="Y">
+                <FIELDS>
+                    <FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+                    <FIELD NAME="GROUP_DESC" LABEL="psti.group" WIDTH="10em" ALIGN="left" />
+                    <FIELD NAME="ITEM_DESC" LABEL="psti.code" ALIGN="left" />
+                </FIELDS>
+            </GRID-LIST>
+            <GRID-EDITOR DATAID="DS-PROJECT-STTGYS-ITEMS">
+                <FIELDS>
+                    <FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN" />
+                    <FIELD NAME="PSTG_CODE" INPUTTYPE="HIDDEN" />
+                    <FIELD NAME="GROUP_DESC" INPUTTYPE="HIDDEN" />
+                    <FIELD NAME="ITEM_DESC" INPUTTYPE="HIDDEN" />
+                    <FIELD NAME="PSTI_GROUP" CAPTION="psti.group" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+                        <AJAX-OPTION URL="/api-data.jbx" DATASET="DS-STTGY-GROUP-02" VALUE-FIELD="RFC_CODE" TEXT-FIELD="RFC_DESC" PARAMETERS="RFG_GRP=PSTI_GROUP" CHILD-FIELD="PSTI_CODE" ON-EMPTY="LOAD-ALL">
+                            <UPDATE-FIELDS>
+                                <FIELD TARGET="GROUP_DESC" SRC="RFC_DESC"/>
+                            </UPDATE-FIELDS>
+                        </AJAX-OPTION>
+                    </FIELD>
+                    <FIELD NAME="PSTI_CODE" CAPTION="psti.code" INPUTTYPE="COMBOBOX" REQUIRE="Y">
+                        <AJAX-OPTION URL="/api-data.jbx" DATASET="DS-STTGY-ITEMS-02" VALUE-FIELD="RFC_CODE" TEXT-FIELD="RFC_DESC" PARAMETERS="RFG_GRP=PSTI_GROUP">
+                            <UPDATE-FIELDS>
+                                <FIELD TARGET="ITEM_DESC" SRC="RFC_DESC"/>
+                            </UPDATE-FIELDS>
+                        </AJAX-OPTION>
+                    </FIELD>
+                    <FIELD NAME="PSTI_DETAIL" CAPTION="psti.detail" INPUTTYPE="TEXTAREA" ROWS="3" />
+                </FIELDS>
+                <LAYOUT CLASS="block-layout-form">
+                    <ROW>
+                        <FIELD NAME="PSTI_GROUP" LAYOUT_WIDTH="6"/>
+                        <FIELD NAME="PSTI_CODE" LAYOUT_WIDTH="18"  />
+                    </ROW>
+                    <ROW>
+                        <FIELD NAME="PSTI_DETAIL" LAYOUT_WIDTH="18" OFFSET="6" />
+                    </ROW>
+                    <ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 200px"></div>]]>
+					</ROW>
+                </LAYOUT>
+            </GRID-EDITOR>
+        </DATA-GRID>
+    </DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt05/view/frm/grids/grid-stratigy.frml b/DevResources/full-examples/bdgt05/view/frm/grids/grid-stratigy.frml
new file mode 100644
index 0000000..7fcc58e
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/frm/grids/grid-stratigy.frml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+    <DATASETS>
+        <DATASET ID="DS-PROJECT-STTGYS">
+            <SCHEMA>APP</SCHEMA>
+            <TABLENAME>PROJECT_STTGYS</TABLENAME>
+            <KEYFIELDS>PROJ_ID,PSTG_CODE</KEYFIELDS>
+            <SQL>
+                <SELECT>
+                    SELECT STTG.PROJ_ID
+                         , STTG.PSTG_CODE
+                         , RFC.RFC_DESC PSTG_DESC
+                         , STTG.PSTG_CONCEPT
+
+                </SELECT>
+                <FROM>FROM PROJECT_STTGYS STTG
+                           INNER JOIN BGT.REFER_CODE RFC ON RFC.RFG_GRP='STG-MAIN' AND RFC.RFC_CODE=STTG.PSTG_CODE
+                    </FROM>
+                <ORDER>ORDER BY PSTG_CODE</ORDER>
+            </SQL>
+            <FIELDS>
+                <FIELD NAME="PROJ_ID" TYPE="VARCHAR" WIDTH="50" LABEL="project.id" />
+                <FIELD NAME="PSTG_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="pstg.code" />
+                <FIELD NAME="PSTG_CONCEPT" TYPE="VARCHAR" WIDTH="500" LABEL="pstg.concept" />
+                <FIELD NAME="CREATE_BY" TYPE="VARCHAR" WIDTH="50" LABEL="sys.create_by" />
+                <FIELD NAME="CREATE_TIME" TYPE="DATE" WIDTH="0" LABEL="sys.create_time" />
+                <FIELD NAME="UPDATE_BY" TYPE="VARCHAR" WIDTH="50" LABEL="sys.update_by" />
+                <FIELD NAME="UPDATE_TIME" TYPE="DATE" WIDTH="0" LABEL="sys.update_time" />
+            </FIELDS>
+        </DATASET>
+    </DATASETS>
+
+    <DATA-GRIDS>
+        <DATA-GRID ID="GRID-PROJECT-STTGYS">
+            <MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID" DETAIL-FIELDS="PROJ_ID"/>
+            <UNIQ-CHECK CHECK-FIELDS="PSTG_CODE" MESSAGE="pstg.code duplicate !"></UNIQ-CHECK>
+            <GRID-LIST DATAID="DS-PROJECT-STTGYS" EDIT="Y" DELETE="Y" ADD="Y">
+                <FIELDS>
+                    <FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+                    <FIELD NAME="PSTG_CODE" LABEL="pstg.code" WIDTH="12em" ALIGN="center" />
+                    <FIELD NAME="PSTG_DESC" LABEL="pstg.desc" ALIGN="left" />
+                </FIELDS>
+            </GRID-LIST>
+            <GRID-EDITOR DATAID="DS-PROJECT-STTGYS">
+                <FIELDS>
+                    <FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN" />
+                    <FIELD NAME="PSTG_CODE" CAPTION="pstg.desc" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+                        <LIST-OPTION TABLE="BGT.REFER_CODE" TEXT="#RFC_DESC" VALUE="RFC_CODE" FILTER="RFG_GRP='STG-MAIN'" FIRSTLIST="@{CAPTION}"/>
+                    </FIELD>
+                    <FIELD NAME="PSTG_CONCEPT" CAPTION="pstg.concept" INPUTTYPE="TEXTAREA" ROWS="2" />
+                    <FIELD NAME="GRID-STTGYS-ITEMS" INPUTTYPE="DATA-GRID" GRID-ID="GRID-PROJECT-STTGYS-ITEMS" CAPTION="psti.header"/>
+                </FIELDS>
+                <LAYOUT CLASS="block-layout-form">
+                    <ROW>
+                        <FIELD NAME="PSTG_CODE" LAYOUT_WIDTH="16" OFFSET="4" />
+                    </ROW>
+                    <SECTION>
+                        <HEADER CLASS="form-section-header col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{pstg.header}</h4>]]>
+					</HEADER>
+                        <ROW>
+                            <FIELD NAME="GRID-STTGYS-ITEMS" LAYOUT_WIDTH="20" OFFSET="4"/>
+                        </ROW>
+                    </SECTION>
+                    <ROW>
+                        <FIELD NAME="PSTG_CONCEPT" LAYOUT_WIDTH="16" OFFSET="4" />
+                    </ROW>
+                    <ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 200px"></div>]]>
+					</ROW>
+                </LAYOUT>
+            </GRID-EDITOR>
+        </DATA-GRID>
+    </DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt05/view/frm/grids/grid-work-budget.frml b/DevResources/full-examples/bdgt05/view/frm/grids/grid-work-budget.frml
new file mode 100644
index 0000000..26b37e8
--- /dev/null
+++ b/DevResources/full-examples/bdgt05/view/frm/grids/grid-work-budget.frml
@@ -0,0 +1,174 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-PROJECT_BUDGET_ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, PBDG_ID
+					, BGM_CODE
+				    , BUD.GET_BUDGET (BGM_CODE) BGM_NAME
+					, PBGI_QT_01
+					, PBGI_QT_02
+					, PBGI_QT_03
+					, PBGI_QT_04
+					, PBGI_QTY
+					, PBGI_COST
+					, PBGI_FREQ
+					, PBGI_ASSET_TYPE
+					, PBGI_REPLACE
+					, PBGI_ADDITION
+					, PBGI_ACQUIRE
+					, PBGI_TOTAL
+					, PBGI_REASON
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGET_ITEMS</FROM>
+				<ORDER>ORDER BY PROJ_ID,BGM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="รหัสหมวดงบประมาณ" WIDTH="20"/>
+				<FIELD NAME="PBGI_QT_01" TYPE="NUMBER" LABEL="จำนวนไตรมาส 1" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_02" TYPE="NUMBER" LABEL="จำนวนไตรมาส 2" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_03" TYPE="NUMBER" LABEL="จำนวนไตรมาส 3" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_04" TYPE="NUMBER" LABEL="จำนวนไตรมาส 4" WIDTH="15"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="จำนวน" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="ราคาต่อหน่วย" WIDTH="15"/>
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="ความถี่/จำนวนครั้ง" WIDTH="10"/>
+				<FIELD NAME="PBGI_ASSET_TYPE" TYPE="TEXT" LABEL="ประเภทสินทรัพย์" WIDTH="10"/>
+				<FIELD NAME="PBGI_REPLACE" TYPE="NUMBER" LABEL="ทดแทนของเดิม" WIDTH="10"/>
+				<FIELD NAME="PBGI_ADDITION" TYPE="NUMBER" LABEL="เพิ่มเติม" WIDTH="10"/>
+				<FIELD NAME="PBGI_ACQUIRE" TYPE="NUMBER" LABEL="จัดหาใหม่" WIDTH="10"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="รวมเป็นเงิน" WIDTH="15"/>
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="เหตุผลความจำเป็น" WIDTH="4000"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<DATA-GRIDS>
+		<DATA-GRID ID="GRID-WORK-BUDGET">
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,PBDG_ID" DETAIL-FIELDS="PROJ_ID,PBDG_ID"/>
+			<UNIQ-CHECK CHECK-FIELDS="BGM_CODE" MESSAGE="pwbg.bgm_code duplicate !"></UNIQ-CHECK>
+			<GRID-LIST DATAID="DS-PROJECT_BUDGET_ITEMS" EDIT="Y" DELETE="Y" CLASS="table-primary">
+				<KEYFIELDS>PROJ_ID,BGM_CODE</KEYFIELDS>
+				<TITLES>
+					<ROW>
+						<FIELD NAME="BGM_CODE" LABEL="pwbg.bgm_code" WIDTH="10em" ALIGN="center" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_NAME" LABEL="pwbg.bgm_name" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_QUOTERS" LABEL="pwbg.quoter" ALIGN="center" COLS-SPAN="4"/>
+						<FIELD NAME="PBGI_TOTAL" LABEL="pwbg.total" WIDTH="6em" ALIGN="right" ROWS-SPAN="2"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_QT_01" LABEL="1" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_QT_02" LABEL="2" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_QT_03" LABEL="3" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_QT_04" LABEL="4" WIDTH="6em" ALIGN="right"/>
+					</ROW>
+				</TITLES>
+				<FIELDS>
+					<FIELD NAME="BGM_CODE" LABEL="pwbg.bgm_code" WIDTH="15em" ALIGN="center"/>
+					<FIELD NAME="BGM_NAME" LABEL="pwbg.bgm_name" ALIGN="left"/>
+					<FIELD NAME="PBGI_QT_01" LABEL="pwbg.quotr_01" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_QT_02" LABEL="pwbg.quotr_02" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_QT_03" LABEL="pwbg.quotr_03" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_QT_04" LABEL="pwbg.quotr_04" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_TOTAL" LABEL="pwbg.total" WIDTH="10em" ALIGN="right"/>
+				</FIELDS>
+				<FOOTER SHOW="Y"/>
+				<SCRIPT>
+					<INITIALIZE>
+						<![CDATA[
+						(ctx)=> {
+						    ctx.sum_of = {};
+							console.log("init grid-budget");
+							const fieldFormat = (value) => {
+								return formatNumber(value, 0);
+							}
+							const summary = (field, data) => {
+								let total = 0;
+								for (const row of data) {
+									total += (+row[field])||0;
+								}
+								ctx.sum_of[field] = total;
+								return formatNumber(total,0);
+							}
+
+							const quoterFields = $$("field^pbgi_qt_",ctx.gridColumn.flat());
+							for (let field of quoterFields) {
+								field.formatter = fieldFormat;
+								let fieldName = field.field;
+								field.footerFormatter = (data)=>{
+									return summary(fieldName,data);
+								}
+							}
+
+							let fieldName = "pbgi_total";
+							$$("field=pbgi_total",ctx.gridColumn.flat()).formatter = fieldFormat;
+							$$("field=pbgi_total",ctx.gridColumn.flat()).footerFormatter = (data)=>{
+								return summary(fieldName,data);
+							};
+						}
+						]]>
+					</INITIALIZE>
+				</SCRIPT>
+			</GRID-LIST>
+
+			<GRID-EDITOR DATAID="DS-PROJECT_BUDGET_ITEMS">
+				<FIELDS>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="BGM_NAME" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-BUDGET-01" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div><label>[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+					<FIELD NAME="PBGI_QT_01" CAPTION="pwbg.quotr_01" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"/>
+					<FIELD NAME="PBGI_QT_02" CAPTION="pwbg.quotr_02" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"/>
+					<FIELD NAME="PBGI_QT_03" CAPTION="pwbg.quotr_03" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"/>
+					<FIELD NAME="PBGI_QT_04" CAPTION="pwbg.quotr_04" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="pwbg.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT CLASS="block-layout-form">
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="16"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_QT_01" LAYOUT_WIDTH="3" OFFSET="6"/>
+						<FIELD NAME="PBGI_QT_02" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_QT_03" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_QT_04" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 350px"></div>]]>
+					</ROW>
+				</LAYOUT>
+				<SCRIPT>
+					<INITIALIZE><![CDATA[
+						const quoterTotal = ()=>{
+							$$("PBGI_TOTAL").setValue($$("^PBGI_QT_").sum());
+						}
+						$$("^PBGI_QT_").on("change",quoterTotal);
+						]]></INITIALIZE>
+				</SCRIPT>
+			</GRID-EDITOR>
+		</DATA-GRID>
+	</DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt06/defs/ajax.xml b/DevResources/full-examples/bdgt06/defs/ajax.xml
new file mode 100644
index 0000000..25237df
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/defs/ajax.xml
@@ -0,0 +1,201 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<DATASETS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/ajax.xsd">
+	<DATASET ID="DS-PROJECT-02">
+		<SCHEMA>BUD</SCHEMA>
+		<TABLEDESC>Main Activity</TABLEDESC>
+		<MAXROWS>100</MAXROWS>
+		<SQL>
+			<SELECT>SELECT PJM.PJM_CODE
+				, PJM.PJM_NAME
+				, PJM.PJM_JOB_TYPE
+				, PJM.PJM_WORK_PLAN
+				, PJM.PJM_PRODUCT
+				, PJM.PJM_GROUP_PLAN
+				, PJM.PJM_JOB_PROJECT
+				, PJM.PJM_STRATEGY
+				, PJM.PJM_ACTIVE
+			</SELECT>
+			<FROM>FROM PROJECT_M PJM</FROM>
+			<WHERE>
+				WHERE (PJM.PJM_CODE LIKE '%'||:SEARCH||'%' OR PJM.PJM_NAME LIKE '%'||:SEARCH||'%')
+			</WHERE>
+			<GROUP/>
+			<ORDER/>
+		</SQL>
+	</DATASET>
+
+	<DATASET ID="DS-ACTIVITY-02">
+		<SCHEMA>BUD</SCHEMA>
+		<TABLEDESC>Main Activity</TABLEDESC>
+		<MAXROWS>100</MAXROWS>
+		<SQL>
+			<SELECT>
+				SELECT ACM_CODE
+				, ACM_NAME
+				, NODE_LEVEL
+				, MAIN_NODE
+				, ACM_UNIT
+				, ACM_START_YEAR
+				, ACM_END_YEAR
+				, STM_CODE
+				, JBT_CODE
+				, JBP_CODE
+				, EXP_CODE
+				, PJM_CODE
+				, STG_CODE
+				, NODE_TYPE
+				, DECODE(NODE_TYPE,'C','true','') disabled
+			</SELECT>
+			<FROM>FROM BGT.V_ACTIVITY_TREE ACM</FROM>
+			<WHERE>
+				WHERE 0=0
+				AND (:DV_YEAR BETWEEN ACM_START_YEAR AND ACM_END_YEAR)
+				-- AND (ACM.STM_CODE = '%' OR ACM.STM_CODE = :STM_CODE)
+				AND (ACM.ACM_CODE LIKE '%'||:SEARCH||'%' OR ACM.ACM_NAME LIKE '%'||:SEARCH||'%')
+			</WHERE>
+			<GROUP/>
+			<ORDER/>
+		</SQL>
+	</DATASET>
+
+	<DATASET ID="DS-BUDGET-02">
+		<SCHEMA>BUD</SCHEMA>
+		<TABLEDESC>Main Activity</TABLEDESC>
+		<MAXROWS>100</MAXROWS>
+		<SQL>
+			<SELECT>
+				SELECT BGD.BGM_CODE
+				, BGD.BGM_NAME
+				, BGD.BGM_EXPENSE_TYPE
+				, BGD.BGM_UNIT
+				, BGD.BGM_UNIT_RATE
+				, BGD.BGM_ACTIVE
+				, BGD.BGM_PREPARE
+			</SELECT>
+			<FROM>FROM BUDGET_M BGD</FROM>
+			<WHERE>
+				WHERE (BGD.BGM_CODE LIKE '%'||:SEARCH||'%' OR BGD.BGM_NAME LIKE '%'||:SEARCH||'%')
+			</WHERE>
+			<ORDER>ORDER BY BGM_CODE</ORDER>
+		</SQL>
+	</DATASET>
+
+	<DATASET ID="DS-STTGY-GROUP-02">
+		<SCHEMA>APP</SCHEMA>
+		<SQL>
+			<SELECT>SELECT RFG_GRP
+				, RFC_CODE
+				, RFC_DESC
+				, RFC_FLAG
+				, RFC_ORDER
+			</SELECT>
+			<FROM>FROM REFER_CODE</FROM>
+			<WHERE>WHERE (RFG_GRP = 'STG-ITEMS')
+					 AND (RFC_CODE LIKE '%'||:SEARCH||'%' OR RFC_DESC LIKE '%'||:SEARCH||'%')</WHERE>
+			<ORDER>ORDER BY RFC_CODE</ORDER>
+		</SQL>
+	</DATASET>
+
+	<DATASET ID="DS-STTGY-ITEMS-02">
+		<SCHEMA>APP</SCHEMA>
+		<SQL>
+			<SELECT>SELECT RFG_GRP
+				, RFC_CODE
+				, RFC_DESC
+				, RFC_FLAG
+				, RFC_ORDER
+			</SELECT>
+			<FROM>FROM REFER_CODE</FROM>
+			<WHERE>WHERE (RFG_GRP = :RFG_GRP)
+					 AND (RFC_CODE LIKE '%'||:SEARCH||'%' OR RFC_DESC LIKE '%'||:SEARCH||'%')</WHERE>
+			<ORDER>ORDER BY RFC_CODE</ORDER>
+		</SQL>
+	</DATASET>
+
+
+	<DATASET ID="DS-ACTIVITY-02-BDGT">
+		<SCHEMA>BUD</SCHEMA>
+		<TABLEDESC>Main Activity</TABLEDESC>
+		<MAXROWS>100</MAXROWS>
+		<SQL>
+			<SELECT>
+				SELECT ACM_CODE
+				, ACM_NAME
+				, NODE_LEVEL
+				, MAIN_NODE
+				, ACM_UNIT
+				, ACM_START_YEAR
+				, ACM_END_YEAR
+				, STM_CODE
+				, JBT_CODE
+				, JBP_CODE
+				, EXP_CODE
+				, PJM_CODE
+				, STG_CODE
+				, NODE_TYPE
+				, DECODE(NODE_TYPE,'C','true','') disabled
+			</SELECT>
+			<FROM>FROM BGT.V_ACTIVITY_TREE ACM</FROM>
+			<WHERE>
+				WHERE 0=0
+				AND (:DV_YEAR BETWEEN ACM_START_YEAR AND ACM_END_YEAR)
+				-- AND (ACM.STM_CODE = '%' OR ACM.STM_CODE = :STM_CODE)
+				AND (ACM.ACM_CODE LIKE '%'||:SEARCH||'%' OR ACM.ACM_NAME LIKE '%'||:SEARCH||'%')
+			</WHERE>
+			<GROUP/>
+			<ORDER/>
+		</SQL>
+	</DATASET>
+
+	<DATASET ID="DS-BUDGET-02-BDGT">
+		<SCHEMA>APP</SCHEMA>
+		<TABLEDESC>Main Activity</TABLEDESC>
+		<MAXROWS>100</MAXROWS>
+		<SQL>
+			<SELECT>
+				SELECT BGM.BGM_CODE
+				, BGM.BGM_NAME
+				, BGM.EXP_TYPE
+				, BGM.BGM_UNIT
+				, BGM.BGM_UNIT_RATE
+				, BGM.BGM_SEQ
+				, BGM.NODE_LEVEL
+				, BGM.MAIN_NODE
+				, DECODE(NODE_TYPE,'C','true','') disabled
+			</SELECT>
+			<FROM>FROM V_BUDGET_TREE BGM</FROM>
+			<WHERE>
+				WHERE (BGM.BGM_CODE LIKE '%'||:SEARCH||'%' OR BGM.BGM_NAME LIKE '%'||:SEARCH||'%')
+			</WHERE>
+			<ORDER>ORDER BY BGM_SEQ</ORDER>
+		</SQL>
+	</DATASET>
+
+
+
+	<DATASET ID="DS-EQUIPT-BUDGET">
+		<SCHEMA>APP</SCHEMA>
+		<TABLEDESC>Main Activity</TABLEDESC>
+		<MAXROWS>100</MAXROWS>
+		<SQL>
+			<SELECT>
+				SELECT BGM.BGM_CODE
+				, BGM.BGM_NAME
+				, BGM.EXP_TYPE
+				, BGM.BGM_UNIT
+				, BGM.BGM_UNIT_RATE
+				, BGM.BGM_SEQ
+				, BGM.NODE_LEVEL
+				, BGM.MAIN_NODE
+				, DECODE(NODE_TYPE,'C','true','') disabled
+			</SELECT>
+			<FROM>FROM V_BUDGET_TREE BGM</FROM>
+			<WHERE>
+				WHERE (BGM_CODE LIKE '3.1%')
+				AND (BGM.BGM_CODE LIKE '%'||:SEARCH||'%' OR BGM.BGM_NAME LIKE '%'||:SEARCH||'%')
+			</WHERE>
+			<ORDER>ORDER BY BGM_SEQ</ORDER>
+		</SQL>
+	</DATASET>
+
+</DATASETS>
\ No newline at end of file
diff --git a/DevResources/full-examples/bdgt06/view/bgt0601010-general.jsp b/DevResources/full-examples/bdgt06/view/bgt0601010-general.jsp
new file mode 100644
index 0000000..0067c91
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/bgt0601010-general.jsp
@@ -0,0 +1,51 @@
+<%@ page import="org.apache.commons.codec.*" %>
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=pageItemInfo.getProgTitle()%></h1>
+<%
+	String _formId = "bdgt-0601010/general";
+	try {
+		String data = factory.rqsCtx.getParameter("data","");
+		if (!data.isBlank()) {
+			data = JUtils.decBase64(data);
+			data = URLDecoder.decode(data, CharEncoding.UTF_8);
+
+			boolean isEditMode = factory.rqsCtx.isPostParam("add") || factory.rqsCtx.isPostParam("edit") || factory.rqsCtx.isPostParam("view");
+			JSONObject jsData = new JSONObject(data);
+			String type = jsData.getString("type");
+			String acmCode = jsData.getString("acm_code");
+			String projId = jsData.getString("proj_id");
+
+			if (isEditMode && type.equals("rutn")) {
+				_formId = "bdgt-0601010/routine";
+			} else if (isEditMode && type.equals("mngt")) {
+				_formId = "bdgt-0601010/manage";
+			} else if (isEditMode && type.equals("eqpt")) {
+				_formId = "bdgt-0601010/equipt";
+			} else if (isEditMode && type.equals("cnst")) {
+				_formId = "bdgt-0601010/construct";
+			}
+
+			dynForm = new DynForm(application, request, response,  "bdgt06", _formId);
+			dynForm.setFormOwner(request.getRequestURL().toString());
+			dynForm.setFormvar("ACM_CODE",acmCode);
+			dynForm.setFormvar("PROJ_ID",projId);
+		} else {
+			dynForm = new DynForm(application, request, response,  "bdgt06", _formId);
+		}
+
+		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+
+		if (dynForm.workIn(WorkMode.Editing)) {
+			factory.pageCtx.addWidget(DynConstants.PageWidget.FileBox);
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt06/view/bgt0601010.jsp b/DevResources/full-examples/bdgt06/view/bgt0601010.jsp
new file mode 100644
index 0000000..ddaceb7
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/bgt0601010.jsp
@@ -0,0 +1,20 @@
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=pageItemInfo.getProgTitle()%></h1>
+<%
+	try {
+		dynForm = new DynForm(application, request, response, "bdgt06", "bdgt-0601010");
+		dynForm.setFormOwner(request.getRequestURL().toString());
+//		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+		if (dynForm.workIn(WorkMode.Editing)) {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt06/view/bgt0601020-budget.jsp b/DevResources/full-examples/bdgt06/view/bgt0601020-budget.jsp
new file mode 100644
index 0000000..d82ae47
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/bgt0601020-budget.jsp
@@ -0,0 +1,20 @@
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=$M.get("pclp.budget_edit")%></h1>
+<%
+	try {
+		dynForm = new DynForm(application, request, response, "bdgt06", "bdgt-0601020-budget");
+		dynForm.setFormOwner(request.getRequestURL().toString());
+		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+		if (dynForm.workIn(WorkMode.Editing)) {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt06/view/bgt0601020.jsp b/DevResources/full-examples/bdgt06/view/bgt0601020.jsp
new file mode 100644
index 0000000..64b80f2
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/bgt0601020.jsp
@@ -0,0 +1,20 @@
+<%@ page contentType="text/html; charset=UTF-8" language="java" %>
+<%@ include file="/WEB-INF/app/system/dynf/dynfSysInfo.jsp" %>
+<!-- =========================================================================================== -->
+<h1 class="page-header"><%=pageItemInfo.getProgTitle()%></h1>
+<%
+	try {
+		dynForm = new DynForm(application, request, response, "bdgt06", "bdgt-0601020");
+		dynForm.setFormOwner(request.getRequestURL().toString());
+		dynForm.setFormvar("STM_CODE",factory.user.getUSER_DEPT_CODE());
+		if (dynForm.workIn(WorkMode.Editing)) {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataEdit.jsp" %><%
+		} else {
+			%><%@ include file="/WEB-INF/app/system/dynf/dynfDataList.jsp" %><%
+		}
+	} catch (Exception ex) {
+		factory.setRestCode("ERROR");
+		factory.setRestMsg(ex.getMessage() + "\n" + JUtils.stackToString(ex,16));
+		logger.error(ex.getMessage(),ex);
+	}
+%>
diff --git a/DevResources/full-examples/bdgt06/view/frm/bdgt-0601010.frml b/DevResources/full-examples/bdgt06/view/frm/bdgt-0601010.frml
new file mode 100644
index 0000000..101b8e0
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/frm/bdgt-0601010.frml
@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT PROJ_YEAR
+					, STM_CODE
+					, STM_NAME
+					, FLOW_TYPE
+					, FLOW_TYPE_DESC
+					, PROJ_SEQ
+					, FLOW_STATE
+					, JDTOTT(SYSDATE - (DBMS_RANDOM.VALUE(3, 10))) STATE_DATE
+					, CAST(DBMS_RANDOM.VALUE(50, 80) AS INTEGER) PROJ_COUNT
+					, CAST(DBMS_RANDOM.VALUE(20,45) AS INTEGER) PROJ_ALLOW
+				</SELECT>
+				<FROM>
+					FROM (SELECT DISTINCT :PROJ_YEAR                     PROJ_YEAR
+								, PROJ.STM_CODE                  STM_CODE
+								, BUD.GET_SECTION(PROJ.STM_CODE) STM_NAME
+								, FTYP.RFC_CODE                  FLOW_TYPE
+								, FTYP.RFC_DESC                  FLOW_TYPE_DESC
+								, FTYP.RFC_ORDER                 PROJ_SEQ
+								, BGT.FLOW_STATE('STEP-02')      FLOW_STATE
+							FROM REFER_CODE            FTYP
+								INNER JOIN REFER_CODE PTYPE ON PTYPE.RFG_GRP = 'PROJ-TYPE' AND PTYPE.RFC_FLAG = FTYP.RFC_CODE
+								INNER JOIN PROJECTS   PROJ ON PROJ.PROJ_TYPE = PTYPE.RFC_CODE
+							WHERE FTYP.RFG_GRP = 'FLOW-TYPE' AND FTYP.RFC_CODE = 'GENERAL' AND PROJ.PROJ_YEAR = :PROJ_YEAR
+					ORDER BY STM_NAME) QR1
+				</FROM>
+				<ORDER>ORDER BY STM_NAME</ORDER>
+			</SQL>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-MASTER">
+			<HEADER NAVI="N" EDIT="N" ADD="N" DELETE="N" VIEW="N"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="STM_NAME" LABEL="props.stm_name" ALIGN="left" WIDTH="20em">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 text-nowrap"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="FLOW_TYPE_DESC" LABEL="props.type" ALIGN="left">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 row"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="PROJ_COUNT" LABEL="project.count" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="PROJ_ALLOW" LABEL="project.allow" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="PROJ_NOT_ALLOW" LABEL="project.not_allow" ALIGN="right" WIDTH="5em">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return (+row.proj_count)-(+row.proj_allow); }]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<COMMAND-BUTTONS>
+					<BUTTON NAME="btnEditor" CLASS="btn btn-warning btn-editor" ICON-CLASS="fa fa-edit white">
+						<EVENT ON="click"><![CDATA[
+							({ev,row})=>{
+								console.log(row);
+								row.pageTitle = $$("h4.page-title").html();
+								$PageCtx.saveSessionData("general", row);
+								$PageCtx.saveStorageData("general#search", {proj_year: row.proj_year, stm_code : row.stm_code});
+								$WebNavi.goto("/bdgt06/bgt0601010-general");
+							}
+						]]></EVENT>
+					</BUTTON>
+					<BUTTON NAME="btnViewer" CLASS="btn btn-primary btn-viewer" ICON-CLASS="fa fa-file-alt white">
+						<EVENT ON="click"><![CDATA[({ev,row})=>{ console.log(row);}]]></EVENT>
+					</BUTTON>
+				</COMMAND-BUTTONS>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="Y" ALLOW-NO-FILTER="Y">
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="COMBOBOX" SEARCH-ORIGIN="PROJ_YEAR=${VALUE}">
+						<LIST-OPTION TABLE="VL_YEAR" TEXT="#DV_YEAR" VALUE="DV_YEAR" ORDER="DV_YEAR" FIRSTLIST="@{NONE}"/>
+					</FIELD>
+					<FIELD NAME="STM_CODE" CAPTION="props.stm_name" INPUTTYPE="COMBOBOX" SEARCH-ORIGIN="STM_CODE=${VALUE}">
+						<LIST-OPTION TABLE="BUD.SECTION_M" TEXT="#STM_NAME" VALUE="STM_CODE" ORDER="STM_NAME" FIRSTLIST=""/>
+					</FIELD>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" VAL_WIDTH="6" CAPT_WIDTH="12" LAYOUT_WIDTH="12"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="STM_CODE" VAL_WIDTH="12" CAPT_WIDTH="6" LAYOUT_WIDTH="24"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+		</FORM_BROWSE>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/construct.frml b/DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/construct.frml
new file mode 100644
index 0000000..9a630e6
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/construct.frml
@@ -0,0 +1,322 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-construct-budget.frml"></INCLUDE>
+	</INCLUDES>
+
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, PROJ_TYPE
+					, PROJ_YEAR
+					, PJM_CODE
+					, STM_CODE
+					, BTM_CODE
+					, ACM_CODE
+					, BUD.GET_ACTIVITY(ACM_CODE) ACM_NAME
+					, PLAN_TYPE
+					, PROJ_DURATION
+					, PROJ_INST_COUNT
+					, PROJ_START_YEAR
+					, PROJ_END_YEAR
+					, PROJ_FOR_STAFF
+					, PROJ_FROM_YEAR
+					, CREATE_BY
+					, CREATE_TIME
+					, UPDATE_BY
+					, UPDATE_TIME
+				</SELECT>
+				<FROM>FROM PROJECTS</FROM>
+				<FILTER>WHERE PROJ_ID = :PROJ_ID</FILTER>
+				<ORDER>ORDER BY PROJ_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PROJ_TYPE" TYPE="TEXT" LABEL="ประเภทโครงการ" WIDTH="25"/>
+				<FIELD NAME="PROJ_YEAR" TYPE="NUMBER" LABEL="ปีงบประมาณ" WIDTH="15"/>
+				<FIELD NAME="PJM_CODE" TYPE="TEXT" LABEL="รหัสโครงการ (BUD)" WIDTH="20"/>
+				<FIELD NAME="STM_CODE" TYPE="TEXT" LABEL="รหัสหน่วยงาน" WIDTH="10"/>
+				<FIELD NAME="BTM_CODE" TYPE="TEXT" LABEL="รหัสประเภทงบประมาณ" WIDTH="10"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20"/>
+				<FIELD NAME="PLAN_TYPE" TYPE="TEXT" LABEL="ประเภทแผน" WIDTH="15"/>
+				<FIELD NAME="PROJ_DURATION" TYPE="NUMBER" LABEL="ระยะเวลาดำเนินการ (วัน)" WIDTH="15"/>
+				<FIELD NAME="PROJ_INST_COUNT" TYPE="NUMBER" LABEL="ระยะเวลาดำเนินการ (วัน)" WIDTH="15"/>
+				<FIELD NAME="PROJ_START_YEAR" TYPE="NUMBER" LABEL="ปีที่เริ่มโครงการ (ก่อสร้าง)" WIDTH="15"/>
+				<FIELD NAME="PROJ_END_YEAR" TYPE="NUMBER" LABEL="ปีที่สิ้นสุดโครงการ (ก่อสร้าง)" WIDTH="15"/>
+				<FIELD NAME="PROJ_FOR_STAFF" TYPE="NUMBER" LABEL="จำนวนบุคลากรที่รองรับ" WIDTH="15"/>
+				<FIELD NAME="PROJ_FROM_YEAR" TYPE="NUMBER" LABEL="ต่อเนื่องจากปี" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-CONST">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_CONST_INFO</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT PROJ_ID
+					, ACM_CODE
+					, PCTI_ADDRESS
+					, PCTI_TUMBON
+					, PCTI_AMPUR
+					, PCTI_PROVINCE
+					, PCTI_ADDR_NOTE
+					, PCTI_AREA
+					, PCTI_EMP_COUNT
+					, PCTI_CHK_LOCATION
+					, PCTI_CHK_DOCUMENT
+					, PCTI_REMARK
+					, CREATE_BY
+					, JDTOE(CREATE_TIME) CREATE_TIME, CREATE_TIME DT_CREATE_TIME
+					, UPDATE_BY
+					, JDTOE(UPDATE_TIME) UPDATE_TIME, UPDATE_TIME DT_UPDATE_TIME
+				</SELECT>
+				<FROM>FROM PROJECT_CONST_INFO</FROM>
+				<ORDER>ORDER BY PROJ_ID, ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="project.id" WIDTH="50"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="project.acm_code" WIDTH="20"/>
+				<FIELD NAME="PCTI_ADDRESS" TYPE="TEXT" LABEL="pcti.address" WIDTH="200"/>
+				<FIELD NAME="PCTI_TUMBON" TYPE="TEXT" LABEL="pcti.tumbon" WIDTH="200"/>
+				<FIELD NAME="PCTI_AMPUR" TYPE="TEXT" LABEL="pcti.ampur" WIDTH="200"/>
+				<FIELD NAME="PCTI_PROVINCE" TYPE="TEXT" LABEL="pcti.province" WIDTH="200"/>
+				<FIELD NAME="PCTI_ADDR_NOTE" TYPE="TEXT" LABEL="pcti.addr_note" WIDTH="1000"/>
+				<FIELD NAME="PCTI_AREA" TYPE="NUMBER" LABEL="pcti.area" WIDTH="15"/>
+				<FIELD NAME="PCTI_EMP_COUNT" TYPE="NUMBER" LABEL="pcti.emp_count" WIDTH="15"/>
+				<FIELD NAME="PCTI_CHK_LOCATION" TYPE="TEXT" LABEL="pcti.chk_location" WIDTH="500"/>
+				<FIELD NAME="PCTI_CHK_DOCUMENT" TYPE="TEXT" LABEL="pcti.chk_document" WIDTH="500"/>
+				<FIELD NAME="PCTI_REMARK" TYPE="TEXT" LABEL="pcti.remark" WIDTH="2000"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="sys.create_by" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="sys.create_time" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="sys.update_by" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="sys.update_time" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RESET="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PJM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="STM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="BTM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PLAN_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_DURATION" INPUTTYPE="HIDDEN"/>
+
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.const_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_NAME" CAPTION="project.const_name" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PROJ_START_YEAR" CAPTION="project.start_year" INPUTTYPE="TEXT" DATATYPE="NUMTEXT" ALIGN="center"/>
+				<FIELD NAME="PROJ_END_YEAR" CAPTION="project.end_year" INPUTTYPE="TEXT" DATATYPE="NUMTEXT" ALIGN="center"/>
+				<FIELD NAME="PROJ_DURATION" CAPTION="project.duration" INPUTTYPE="TEXT" DATATYPE="NUMBER" ALIGN="center" DECIMAL="0" SUFFIX="day"/>
+				<FIELD NAME="PROJ_INST_COUNT" CAPTION="project.inst_count" INPUTTYPE="TEXT" DATATYPE="NUMTEXT" ALIGN="center"/>
+
+				<FIELD NAME="BUDGET_YEAR_01" CAPTION="2567" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="BUDGET_YEAR_02" CAPTION="2568" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="BUDGET_YEAR_03" CAPTION="2569" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="BUDGET_YEAR_04" CAPTION="2570" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="BUDGET_YEAR_05" CAPTION="2571" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+				<SECTION ID="SECT-PROJECT-CONST">
+					<FIELD NAME="PCTI_ADDRESS" CAPTION="pcti.address" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_TUMBON" CAPTION="pcti.tumbon" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_AMPUR" CAPTION="pcti.ampur" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_PROVINCE" CAPTION="pcti.province" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_ADDR_NOTE" CAPTION="pcti.addr_note" INPUTTYPE="TEXT"/>
+					<FIELD NAME="PCTI_AREA" CAPTION="pcti.area" INPUTTYPE="TEXT" DATATYPE="NUMBER" SUFFIX="segtor"/>
+					<FIELD NAME="PCTI_EMP_COUNT" CAPTION="pcti.emp_count" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+					<FIELD NAME="PCTI_CHK_LOCATION" CAPTION="pcti.chk_location" INPUTTYPE="CHECKBOXGROUP">
+						<LIST-OPTION TABLE="REFER_CODE" VALUE="RFC_CODE" TEXT="RFC_DESC" FILTER="RFG_GRP='CNT-PAREA'" COLUMN="4" ORDER="RFC_ORDER"/>
+					</FIELD>
+					<FIELD NAME="PCTI_CHK_DOCUMENT" CAPTION="pcti.chk_document" INPUTTYPE="CHECKBOXGROUP">
+						<LIST-OPTION TABLE="REFER_CODE" VALUE="RFC_CODE" TEXT="RFC_DESC" FILTER="RFG_GRP='CNT-PDOC'" COLUMN="4" ORDER="RFC_ORDER"/>
+					</FIELD>
+					<FIELD NAME="PCTI_REMARK" CAPTION="pcti.remark" INPUTTYPE="TEXTAREA" ROWS="3"/>
+				</SECTION>
+
+				<FIELD NAME="GRID-BUDGET" INPUTTYPE="DATA-GRID" GRID-ID="GRID-CONST-BUDGET" ROWS="5" CAPTION="project.budget"/>
+				<SECTION ID="SEC-ATTATCH-FILE">
+					<FIELD NAME="FILE_BOX_01" CAPTION="แบบ/ประมาณการราคาอาคารสำนักงาน" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_02" CAPTION="หนังสืออนุญาตให้ใช้ที่ดิน ได้มาซึ่งกรรมสิทธิ์ในที่ดิน" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_03" CAPTION="ผังบริเวณ ประมาณราคาผังบริเวณ สิ่งก่อสร้างประกอบ" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_04" CAPTION="ประมาณการถมดิน/รื้อถอนอาคาร/กำแพงกันดิน ฯลฯ (ถ้ามี)" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_05" CAPTION="ประมาณการขยายเขตไฟฟ้า ขยายเขตประปา" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+				</SECTION>
+
+			</FIELDS>
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_NAME" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_EMP_COUNT" LAYOUT_WIDTH="4" OFFSET="4"/>
+						<FIELD NAME="PROJ_DURATION" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PROJ_INST_COUNT" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PROJ_START_YEAR" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PROJ_END_YEAR" LAYOUT_WIDTH="4"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-CONST" DATASET="DS-PROJECT-CONST" AUTO-INSERT="Y" TYPE="DATA-SECTION">
+					<HEADER CLASS="col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{project.year_budgets}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="BUDGET_YEAR_01" LAYOUT_WIDTH="4" OFFSET="4"/>
+						<FIELD NAME="BUDGET_YEAR_02" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="BUDGET_YEAR_03" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="BUDGET_YEAR_04" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="BUDGET_YEAR_05" LAYOUT_WIDTH="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-PROJECT-CONST" DATASET="DS-PROJECT-CONST" AUTO-INSERT="Y" TYPE="DATA-SECTION">
+					<HEADER CLASS="col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[
+						<h4 class="ml-3 col-24">@M{pcti.location_info}</h4>
+						]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PCTI_ADDRESS" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_TUMBON" LAYOUT_WIDTH="4" OFFSET="4"/>
+						<FIELD NAME="PCTI_AMPUR" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PCTI_PROVINCE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PCTI_AREA" LAYOUT_WIDTH="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_ADDR_NOTE" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_CHK_LOCATION" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_CHK_DOCUMENT" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PCTI_REMARK" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.budget}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="GRID-BUDGET" LAYOUT_WIDTH="24" OFFSET=""/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-ATTATCH-FILE">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.constructor_attatchment}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="10" OFFSET="4"/>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="10"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="10" OFFSET="4"/>
+						<FIELD NAME="FILE_BOX_04" LAYOUT_WIDTH="10"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_05" LAYOUT_WIDTH="10" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-REVISE-COMMENT">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">การส่งกลับแก้ไข</h4>]]></HEADER>
+					<ROW TYPE="CONTENT">
+					<![CDATA[
+						<div class="mg-b-16">
+							<div id="FIELD-REVISE_COMMENT" class="form-group col-24 offset-0">
+								<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">รายการแก้ไข</label>
+								<div class="form-col col-24 col-sm-14" data-field="REVISE_COMMENT">
+									<input type="text" name="REVISE_COMMENT" id="REVISE_COMMENT" value=""  input-type="TEXT"  charcase="NORMAL" class="form-control dyn-form-control text">
+								</div>
+							</div>
+						</div>
+						<div>
+							<div>ประวัติการแก้ไข</div>
+							<ul>
+								<li>แก้ครั้งที่ 1 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 2 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 3 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 4 วันที่ xx/xx/xxxx : ...................................</li>
+							</ul>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE>
+						<![CDATA[
+						({form, data}) => {
+							console.log("before save data ...");
+							if ($PageCtx.$action === "add") {
+								let projYear = $$("PROJ_YEAR").val();
+								let projType = "CNST";
+								let stmCode = $user.deptCode;
+								let pjmCode = "B.2.01";
+								let btmCode = "01";
+								let acmCode = $$("ACM_CODE").val();
+
+								let projId = `${projYear}x${projType}x${stmCode}x${pjmCode}x${btmCode}x${acmCode}`;
+
+								$$("PROJ_ID").val(projId);
+								$$("PROJ_TYPE").val("CONST");
+								$$("STM_CODE").val(stmCode);
+								$$("PJM_CODE").val(pjmCode);
+								$$("BTM_CODE").val(btmCode);
+								$$("AC_CODE").val(acmCode);
+							}
+							//update data to save
+							Object.assign(data, $PageCtx.$form.jsonData());
+						}
+						]]>
+					</BEFORE-SAVE>
+				</EVENTS>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/equipt.frml b/DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/equipt.frml
new file mode 100644
index 0000000..6672ee0
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/equipt.frml
@@ -0,0 +1,340 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PBDG.PROJ_ID
+							, PBDG.PBDG_ID
+							, PBDG.ACM_CODE
+							, BUD.GET_ACTIVITY(PBDG.ACM_CODE) ACM_NAME
+							, PBDG.PBDG_TOTAL
+							, PBDG.PBDG_COUNT
+							, PBDG.PBDG_ASSET_TYPE
+							, PBDG.PBDG_REASON
+							, PMAS.PROJ_YEAR
+							, PMAS.STM_CODE
+							, PMAS.PROJ_YEAR||'/'||PMAS.STM_CODE||'/'||PBDG.PROJ_ID FILEPATH
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS PBDG
+						  INNER JOIN PROJECTS PMAS ON PMAS.PROJ_ID = PBDG.PROJ_ID
+				</FROM>
+				<ORDER>ORDER BY PROJ_ID,PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32" ORIGIN="PBDG.PROJ_ID"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32" ORIGIN="PBDG.PROJ_ID"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20" ORIGIN="PBDG.ACM_CODE"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+				<FIELD NAME="PBDG_ASSET_TYPE" TYPE="TEXT" LABEL="ประเภทครุภัณฑ์" WIDTH="25"/>
+				<FIELD NAME="PBDG_REASON" TYPE="TEXT" LABEL="เหตุผลในการจัดหา" WIDTH="2000"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+
+		<DATASET ID="DS-BUDGET-ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, PBDG_ID
+					, BGM_CODE
+					, PBGI_QT_01
+					, PBGI_QT_02
+					, PBGI_QT_03
+					, PBGI_QT_04
+					, PBGI_QTY
+					, PBGI_COST
+					, PBGI_FREQ
+					, PBGI_ASSET_TYPE
+					, PBGI_REPLACE
+					, PBGI_ADDITION
+					, PBGI_ACQUIRE
+					, PBGI_TOTAL
+					, PBGI_REASON
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGET_ITEMS</FROM>
+				<ORDER>ORDER BY PROJ_ID,BGM_CODE,PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="pbgi.id" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="pbgi.pbdg_id" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="pbgi.bgm_code" WIDTH="20"/>
+				<FIELD NAME="PBGI_QT_01" TYPE="NUMBER" LABEL="pwbg.quotr_01" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_02" TYPE="NUMBER" LABEL="pwbg.quotr_02" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_03" TYPE="NUMBER" LABEL="pwbg.quotr_03" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_04" TYPE="NUMBER" LABEL="pwbg.quotr_04" WIDTH="15"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="pbgi.qty" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="pbgi.cost" WIDTH="15"/>
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="pbgi.freq" WIDTH="10"/>
+				<FIELD NAME="PBGI_ASSET_TYPE" TYPE="TEXT" LABEL="pbgi.asset_type" WIDTH="10"/>
+				<FIELD NAME="PBGI_REPLACE" TYPE="NUMBER" LABEL="pbgi.replace" WIDTH="10"/>
+				<FIELD NAME="PBGI_ADDITION" TYPE="NUMBER" LABEL="pbgi.addition" WIDTH="10"/>
+				<FIELD NAME="PBGI_ACQUIRE" TYPE="NUMBER" LABEL="pbgi.acquire" WIDTH="10"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="pbgi.total" WIDTH="15"/>
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="pbgi.reason" WIDTH="4000"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="sys.create_by" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="sys.create_time" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="sys.update_by" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="sys.update_time" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,PBDG_ID" DETAIL-FIELDS="PROJ_ID,PBDG_ID"/>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.equipt_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_NAME" CAPTION="project.equipt_name" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PBDG_ASSET_TYPE" CAPTION="pbge.asset_type" INPUTTYPE="COMBOBOX" REQUIRE="Y">
+					<LIST-OPTION TABLE="REFER_CODE" TEXT="RFC_DESC" VALUE="RFC_CODE" ORDER="RFC_ORDER" FILTER="RFG_GRP='ASSET-TYPE'" FIRSTLIST="@{CAPTION}"/>
+				</FIELD>
+				<FIELD NAME="PBDG_REASON" CAPTION="pbge.reason" INPUTTYPE="TEXT" />
+
+				<FIELD NAME="FILE_BOX_01" CAPTION="pbge.quotaion_file 1" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+					<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+						UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+						DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+				</FIELD>
+				<FIELD NAME="FILE_BOX_02" CAPTION="pbge.quotaion_file 2" INPUTTYPE="FILE-BOX">
+					<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+						UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+						DEFAULT-NAME="@{filepath}/@{acm_code}/file-02"/>
+				</FIELD>
+				<FIELD NAME="FILE_BOX_03" CAPTION="pbge.quotaion_file 3" INPUTTYPE="FILE-BOX">
+					<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+						UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+						DEFAULT-NAME="@{filepath}/@{acm_code}/file-03"/>
+				</FIELD>
+
+				<SECTION ID="SECT-PROJECT-TARGET">
+					<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_COUNT" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PWMT_UNIT" CAPTION="project.unit" INPUTTYPE="TEXT" READONLY="Y"></FIELD>
+					<FIELD NAME="PTGT_QT_0101" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.quoter 1"/>
+					<FIELD NAME="PTGT_QT_0201" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.quoter 2"/>
+					<FIELD NAME="PTGT_QT_0301" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.quoter 3"/>
+					<FIELD NAME="PTGT_QT_0401" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.quoter 4"/>
+					<FIELD NAME="QT_TOTAL_01" INPUTTYPE="TEXT" DATATYPE="NUMBER" CAPTION="project.total" READONLY="Y"/>
+				</SECTION>
+
+				<SECTION ID="SECT-BUDGET-ITEMS">
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-EQUIPT-BUDGET" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div><label class="offset-${data.node_level}">[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="PBGI_QT_01" CAPTION="pbge.origin" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+					<FIELD NAME="PBGI_REPLACE" CAPTION="pbge.replace" INPUTTYPE="TEXT" DATATYPE="NUMBER" CLASS-NAME="equipt-qty equipt-item"/>
+					<FIELD NAME="PBGI_ADDITION" CAPTION="pbge.addition" INPUTTYPE="TEXT" DATATYPE="NUMBER" CLASS-NAME="equipt-qty equipt-item"/>
+					<FIELD NAME="PBGI_ACQUIRE" CAPTION="pbge.acquire" INPUTTYPE="TEXT" DATATYPE="NUMBER" CLASS-NAME="equipt-qty equipt-item"/>
+					<FIELD NAME="PBGI_QTY" CAPTION="pbge.qty" INPUTTYPE="TEXT" DATATYPE="NUMBER" READONLY="Y" CLASS-NAME="equipt-item"/>
+
+					<FIELD NAME="PBGI_COST" CAPTION="pbge.cost" INPUTTYPE="TEXT" DATATYPE="NUMBER" CLASS-NAME=" equipt-item"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="pbge.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" READONLY="Y"/>
+				</SECTION>
+
+
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_NAME" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBDG_ASSET_TYPE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PBDG_REASON" LAYOUT_WIDTH="18"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-PROJECT-BUTGET" TYPE="DATA-SECTION" DATASET="DS-BUDGET-ITEMS">
+					<ROW ID="ROW-BUDGET-DATA">
+						<FIELD NAME="PBGI_QT_01" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PBGI_REPLACE" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_ADDITION" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_ACQUIRE" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_QTY" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_COST" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="4" OFFSET="4"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="14"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-PROJECT-TARGET" TYPE="DATA-SECTION" DATASET="DS-PROJECT-TARGETS">
+					<HEADER CLASS="col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{project.target}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PTGT_QT_0101" LAYOUT_WIDTH="3" OFFSET="4"/>
+						<FIELD NAME="PTGT_QT_0201" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PTGT_QT_0301" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PTGT_QT_0401" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QT_TOTAL_01" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PWMT_UNIT" LAYOUT_WIDTH="3"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-QUOTATION-FILE">
+					<HEADER CLASS="col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{pbge.quotaion_file}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="12" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="12" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="12" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-REVISE-COMMENT">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">การส่งกลับแก้ไข</h4>]]></HEADER>
+					<ROW TYPE="CONTENT">
+					<![CDATA[
+						<div class="mg-b-16">
+							<div id="FIELD-REVISE_COMMENT" class="form-group col-24 offset-0">
+								<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">รายการแก้ไข</label>
+								<div class="form-col col-24 col-sm-14" data-field="REVISE_COMMENT">
+									<input type="text" name="REVISE_COMMENT" id="REVISE_COMMENT" value=""  input-type="TEXT"  charcase="NORMAL" class="form-control dyn-form-control text">
+								</div>
+							</div>
+						</div>
+						<div>
+							<div>ประวัติการแก้ไข</div>
+							<ul>
+								<li>แก้ครั้งที่ 1 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 2 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 3 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 4 วันที่ xx/xx/xxxx : ...................................</li>
+							</ul>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+
+			<SCRIPT>
+				<DECLARATION>
+					const equiptQty = $$(".equipt-qty");
+					const equiptItem = $$(".equipt-item");
+					const txtEquiptQty = $$("PBGI_QTY");
+					const txtEquiptCost = $$("PBGI_COST");
+					const txtEquiptTotal = $$("PBGI_TOTAL");
+				</DECLARATION>
+
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							$$("PBDG_COUNT").val(txtEquiptQty.number());
+							$$("PBDG_TOTAL").val(txtEquiptTotal.number());
+
+							Object.assign(data, form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+
+				<INITIALIZE>
+					<![CDATA[
+					const quoterSum = () => {
+						let summary = 0;
+						for (let qt = 1; qt <= 4; qt++) {
+							summary += $$(`PTGT_QT_0${qt}01`).number();
+						}
+						$$(`QT_TOTAL_01`).val(formatNumber(summary));
+					}
+
+					$$("^PTGT_QT_").on("change", quoterSum);
+
+					const equiptSum = ()=>{
+						let sumEquipt = equiptQty.sum();
+						txtEquiptQty.val(formatNumber(sumEquipt));
+						let equiptCost = txtEquiptCost.number();
+						txtEquiptTotal.val(formatNumber(sumEquipt*equiptCost));
+					}
+					equiptItem.on("change",equiptSum);
+
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/general.frml b/DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/general.frml
new file mode 100644
index 0000000..2205bcc
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/general.frml
@@ -0,0 +1,267 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-construct-budget.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ.PROJ_ID
+					, PROJ.PROJ_TYPE
+					, PROJ.PROJ_YEAR
+					, PROJ.PJM_CODE
+					, PROJ.STM_CODE
+					, PROJ.BTM_CODE
+					, PROJ.ACM_CODE
+					, BUD.GET_ACTIVITY(PROJ.ACM_CODE) ACM_NAME
+					, PROJ.PLAN_TYPE
+					, PROJ.PROJ_DURATION
+					, PROJ.PROJ_START_YEAR
+					, PROJ.PROJ_END_YEAR
+					, PROJ.PROJ_FOR_STAFF
+
+					, PROJ.PROJ_FROM_YEAR
+					, 0 BDGT_TOTAL
+				</SELECT>
+				<FROM>FROM PROJECTS PROJ
+						   INNER JOIN REFER_CODE RFC ON RFC.RFG_GRP='PROJ-TYPE' AND RFC.RFC_CODE=PROJ.PROJ_TYPE AND RFC.RFC_FLAG = 'GENERAL'
+				</FROM>
+				<FILTER>WHERE STM_CODE = :STM_CODE AND PROJ.PROJ_YEAR = :PROJ_YEAR</FILTER>
+				<ORDER>ORDER BY RFC.RFC_ORDER, PROJ.PROJ_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PROJ_TYPE" TYPE="TEXT" LABEL="ประเภทโครงการ" WIDTH="25"/>
+				<FIELD NAME="PROJ_YEAR" TYPE="NUMBER" LABEL="ปีงบประมาณ" WIDTH="15"/>
+				<FIELD NAME="PJM_CODE" TYPE="TEXT" LABEL="รหัสโครงการ (BUD)" WIDTH="20"/>
+				<FIELD NAME="STM_CODE" TYPE="TEXT" LABEL="รหัสหน่วยงาน" WIDTH="10"/>
+				<FIELD NAME="BTM_CODE" TYPE="TEXT" LABEL="รหัสประเภทงบประมาณ" WIDTH="10"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20"/>
+				<FIELD NAME="PLAN_TYPE" TYPE="TEXT" LABEL="ประเภทแผน" WIDTH="15"/>
+				<FIELD NAME="PROJ_DURATION" TYPE="NUMBER" LABEL="ระยะเวลาดำเนินการ (วัน)" WIDTH="15"/>
+				<FIELD NAME="PROJ_START_YEAR" TYPE="NUMBER" LABEL="ปีที่เริ่มโครงการ (ก่อสร้าง)" WIDTH="15"/>
+				<FIELD NAME="PROJ_END_YEAR" TYPE="NUMBER" LABEL="ปีที่สิ้นสุดโครงการ (ก่อสร้าง)" WIDTH="15"/>
+				<FIELD NAME="PROJ_FOR_STAFF" TYPE="NUMBER" LABEL="จำนวนบุคลากรที่รองรับ" WIDTH="15"/>
+
+				<FIELD NAME="PROJ_FROM_YEAR" TYPE="NUMBER" LABEL="ต่อเนื่องจากปี" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<SUBDATASETS>
+				<SUBDATASET NAME="ACTIVITIES" DATASET-ID="DS-ACTIVITY-TREE" LINK-FIELDS="PROJ_ID"/>
+			</SUBDATASETS>
+		</DATASET>
+		<DATASET ID="DS-ACTIVITY-TREE">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>V_ACTIVITY_TREE</TABLENAME>
+			<SQL>
+				<SELECT>
+					SELECT PACT.PROJ_ID
+					, PACT.PROJ_YEAR
+					, PACT.PROJ_TYPE
+					, PACT.PROJ_GROUP
+					, ACTT.ACM_CODE
+					, ACTT.ACM_NAME
+					, ACTT.ACM_SEQ
+					, ACTT.NODE_LEVEL+1 NODE_LEVEL
+					, ACTT.MAIN_NODE
+					, ACTT.ACM_UNIT
+					, ACTT.ACM_START_YEAR
+					, ACTT.ACM_END_YEAR
+					, ACTT.NODE_TYPE
+					, PACT.BDGT_COUNT
+					, PACT.BDGT_TOTAL
+				</SELECT>
+				<FROM>
+					FROM BGT.V_ACTIVITY_TREE ACTT
+						 INNER JOIN (SELECT DISTINCT ACM.ACM_CODE
+									   FROM BUD.ACTIVITY_M ACM
+									        INNER JOIN BUD.ACTIVITY_CTRL_H ACH ON ACM.ACM_CODE = ACH.ACH_CODE
+											START WITH ACM.ACM_CODE IN (SELECT ACM_CODE FROM V_PROJECT_ACTIVITY PACT WHERE PACT.PROJ_ID = :PROJ_ID)
+											CONNECT BY PRIOR ACH.ACH_CTRL_CODE = ACH.ACH_CODE) FLTR ON FLTR.ACM_CODE = ACTT.ACM_CODE
+						LEFT OUTER JOIN V_PROJECT_ACTIVITY PACT ON PACT.ACM_CODE = ACTT.ACM_CODE AND PACT.PROJ_ID = :PROJ_ID
+				</FROM>
+				<ORDER>
+					ORDER BY ACTT.ACM_SEQ
+				</ORDER>
+			</SQL>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-MASTER">
+			<HEADER NAVI="N" EDIT="N" ADD="N" DELETE="N" VIEW="N"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="ALLOW_PLAN" LABEL="project.allow" ALIGN="center" WIDTH="5em">
+					<DATA-FORMATTER>
+						<![CDATA[(value, row, idx) => {return (row.node_type === "P")?"":$(`<div><input type="checkbox"></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="ACM_CODE" LABEL="project.const_code" ALIGN="left">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return (row.node_type === "P")?"":$(`<div class="col-24 row text-nowrap"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="ACM_NAME" LABEL="project.const_name" ALIGN="left">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return (row.node_type === "P")?"":$(`<div class="col-24 row text-nowrap"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="BDGT_COUNT" LABEL="pbdg.acm_count" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[(value, row, idx) => {
+							if (row["node_type"] === "D") {
+								return `<div class="col-24 text-nowrap">${formatNumber(value)} ${row["acm_unit"]}</div>`;
+								// return  formatNumber(value)+" "+row["acm_unit"];
+							} else {
+								return ""
+							}
+						}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="BDGT_TOTAL" LABEL="project.bgt_amount" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[(value, row, idx) => {return formatNumber(value);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<COMMAND-BUTTONS>
+					<BUTTON NAME="btnEditor" CLASS="btn btn-warning btn-editor" ICON-CLASS="fa fa-edit white">
+						<FILTER><![CDATA[({$ctx,row})=>{return ["D"].includes(row["node_type"]);}]]></FILTER>
+						<EVENT ON="click"><![CDATA[
+							({ev, row}) => {
+								console.log(row);
+								if (row.node_type === "D") {
+									row.pageTitle = $("h4.page-title").html();
+									$PageCtx.saveSessionData("edit",row);
+									let proj = {proj_id: row.proj_id, acm_code: row.acm_code, type: row.proj_type.toLowerCase()};
+									let data = base64(JSON.stringify(proj));
+									let editUrl = `/bdgt06/bgt0601010-general?edit&data=${data}`;
+									$WebNavi.goto(editUrl);
+								}
+							}
+							]]></EVENT>
+					</BUTTON>
+					<BUTTON NAME="btnViewer" CLASS="btn btn-primary btn-viewer" ICON-CLASS="fa fa-file-alt white">
+						<FILTER><![CDATA[({$ctx,row})=>{return ["D"].includes(row["node_type"]);}]]></FILTER>
+						<EVENT ON="click"><![CDATA[({ev,row})=>{ console.log(row);}]]></EVENT>
+					</BUTTON>
+				</COMMAND-BUTTONS>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="N" ALLOW-NO-FILTER="Y">
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="12" VAL_WIDTH="5" CAPT_WIDTH="14"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+			<FOOTER SHOW="Y"/>
+			<BUTTONS>
+				<BUTTON NAME="btnButton2" CAPTION="บันทึกความเห็นชอบ" CLASS="btn btn-warning" SECTION="RIGHT"/>
+			</BUTTONS>
+			<SCRIPT>
+				<EVENTS>
+					<AFTER-LOAD>
+						<![CDATA[
+							($ctx,data)=>{
+								let src = [...data]; // clone data to src
+									data.splice(0); // clear data element
+
+								let id = 1;
+								for (let item of src) {
+									item["node_type"] = "P";
+									item["node_level"] = "0";
+									item["$itemno"] = id++;
+									data.push(item);
+									if (isArray(item.activities)) {
+										for (let sitem of item.activities) {
+											sitem["$itemno"] = id++;
+											data.push(sitem);
+										}
+									}
+								}
+								// console.log(data);
+							}
+					]]>
+					</AFTER-LOAD>
+				</EVENTS>
+
+				<INITIALIZE>
+					<![CDATA[
+					{
+						// console.log("init activity grid");
+						const fieldFormat = (value,row) => {
+							console.log(row["proj_type"]);
+							if (row["node_type"] === "P" || row["proj_type"] === "RUTN") {
+								return "";
+							}
+							return formatNumber(value, 0);
+						}
+
+						const summary = (field, data) => {
+							let total = 0;
+							for (let id=0; id < data.length; id++) {
+								let row = data[id];
+								if (row["node_type"] === "D") {
+									total += (+row[field]) || 0;
+								}
+							}
+							if ($PageCtx.$dataGrid.load && !$PageCtx.$dataGrid.reload) {
+								$PageCtx.$dataGrid.reload = true;
+								let proj_type = "";
+								for (let id=data.length-1; id>=0; id--) {
+									let row = data[id];
+									proj_type = (row["proj_type"])||proj_type;
+									if (row["node_type"] === "C") {
+										let grpTotal = 0;
+										let mainNode = row["acm_code"];
+										let nodes = [];
+										nodes.push($$("main_node="+mainNode,data));
+										for (let node of nodes.flat()) {
+											grpTotal += +node[field];
+										}
+										data[id][field] = grpTotal;
+										data[id]["proj_type"] = proj_type;
+									}
+								}
+								$PageCtx.$dataGrid.load(data);
+								$PageCtx.$dataGrid.reload = false;
+							}
+							return formatNumber(total, 0);
+						}
+
+						const $ctx = $PageCtx;
+						const gridFields = [$$("field=bdgt_total", $ctx.gridColumn.flat())].flat();
+						for (let field of gridFields) {
+							field.formatter = fieldFormat;
+							field.footerFormatter = function (data) {
+								return summary(this.field, data);
+							}
+						}
+
+						$ctx.rowStyle = function (row, index) {
+							if (row["node_type"] === "C") {
+								return {classes : `group-level-${row["node_level"]}`};
+							}
+							if (row["node_type"] === "P") {
+								return {classes : `group-level-0`};
+							}
+							return {}; // Default style for other rows
+						}
+					}
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+
+
+		</FORM_BROWSE>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/manage.frml b/DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/manage.frml
new file mode 100644
index 0000000..1425c96
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/manage.frml
@@ -0,0 +1,253 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-manage-budget.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PBDG.PROJ_ID
+					, PROJ.PROJ_YEAR
+					, PBDG.PBDG_ID
+					, PBDG.ACM_CODE
+					, BUD.GET_ACTIVITY(PBDG.ACM_CODE) ACM_NAME
+					, PBDG.PBDG_TOTAL
+					, PBDG.PBDG_COUNT
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS PBDG
+					INNER JOIN PROJECTS PROJ ON PROJ.PROJ_ID=PBDG.PROJ_ID
+				</FROM>
+				<ORDER>ORDER BY PBDG.PROJ_ID,PBDG.PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32" ORIGIN="PBDG.PROJ_ID"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20" ORIGIN="PBDG.ACM_CODE"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+			</FIELDS>
+		</DATASET>
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+	</DATASETS>
+	<FORM>
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.acm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PROJ_PRINCIPLES" CAPTION="project.remak" INPUTTYPE="TEXT" ROWS="3"/>
+				<FIELD NAME="ACM_NAME" CAPTION="project.acm_name" INPUTTYPE="TEXT" EDIT-READONLY="Y"/>
+
+				<SECTION ID="SECT-PROJECT-TARGET">
+					<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_COUNT" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PWMT_UNIT" CAPTION="project.target" INPUTTYPE="TEXT" READONLY="Y"></FIELD>
+					<FIELD NAME="QUOTER_1" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 1" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0101" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0102" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_2" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 2" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0201" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0202" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_3" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 3" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0301" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0302" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_4" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 4" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0401" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0402" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="TOTAL_QT" INPUTTYPE="MULTI-FIELD" CAPTION="project.total" FIELD-SEPARATOR="/" READONLY="Y">
+						<FIELD-LIST>
+							<FIELD NAME="QT_TOTAL_01" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="QT_TOTAL_02" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+				</SECTION>
+
+				<FIELD NAME="GRID-BUDGET" INPUTTYPE="DATA-GRID" GRID-ID="GRID-WORK-BUDGET" ROWS="5" CAPTION="project.budget"/>
+
+				<SECTION ID="SEC-ATTATCH-FILE">
+					<FIELD NAME="FILE_BOX_01" CAPTION="file.upload 1" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_02" CAPTION="file.upload 2" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_03" CAPTION="file.upload 3" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+				</SECTION>
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="6"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="ACM_NAME" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_PRINCIPLES" LAYOUT_WIDTH="18" OFFSET="6"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-TARGET" TYPE="DATA-SECTION" DATASET="DS-PROJECT-TARGETS">
+					<ROW>
+						<FIELD NAME="PWMT_UNIT" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="QUOTER_1" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_2" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_3" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_4" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="TOTAL_QT" LAYOUT_WIDTH="4"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[
+						<h4 class="ml-3 border-bottom-1 col-24">@M{project.budget}</h4>
+						]]></HEADER>
+					<ROW>
+						<FIELD NAME="GRID-BUDGET" LAYOUT_WIDTH="24" OFFSET=""/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-FILE-UPLOAD">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.constructor_attatchment}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-REVISE-COMMENT">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">การส่งกลับแก้ไข</h4>]]></HEADER>
+					<ROW TYPE="CONTENT">
+					<![CDATA[
+						<div class="mg-b-16">
+							<div id="FIELD-REVISE_COMMENT" class="form-group col-24 offset-0">
+								<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">รายการแก้ไข</label>
+								<div class="form-col col-24 col-sm-14" data-field="REVISE_COMMENT">
+									<input type="text" name="REVISE_COMMENT" id="REVISE_COMMENT" value=""  input-type="TEXT"  charcase="NORMAL" class="form-control dyn-form-control text">
+								</div>
+							</div>
+						</div>
+						<div>
+							<div>ประวัติการแก้ไข</div>
+							<ul>
+								<li>แก้ครั้งที่ 1 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 2 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 3 วันที่ xx/xx/xxxx : ...................................</li>
+								<li>แก้ครั้งที่ 4 วันที่ xx/xx/xxxx : ...................................</li>
+							</ul>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							let acmCount = $$("^QT_TOTAL_0").sum();
+							$$("PBDG_COUNT").val(acmCount);
+							let gridCtx = ($PageCtx.widgets["GRID-BUDGET"]||{})["$GridCtx"];
+							if (gridCtx) {
+								 let bdgTotal = gridCtx.sum_of["pbgi_total"];
+								$$("PBDG_TOTAL").val(bdgTotal);
+							}
+							Object.assign(data,form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+				<INITIALIZE>
+					<![CDATA[
+					     const quoterSum = ()=>{
+						     for (let sect=1; sect <=2; sect++) {
+							     let summary = 0;
+							     for (let qt = 1; qt <= 4; qt++) {
+								     summary += $$(`PTGT_QT_0${qt}0${sect}`).number();
+							     }
+							     $$(`QT_TOTAL_0${sect}`).val(formatNumber(summary));
+						     }
+					     }
+						 $$("^PTGT_QT_").on("change",quoterSum);
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/routine.frml b/DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/routine.frml
new file mode 100644
index 0000000..9ecaeb4
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/frm/bdgt-0601010/routine.frml
@@ -0,0 +1,259 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-routine-budget.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PBDG.PROJ_ID
+					, PROJ.PROJ_YEAR
+					, PBDG.PBDG_ID
+					, PBDG.ACM_CODE
+					, BUD.GET_ACTIVITY(PBDG.ACM_CODE) ACM_NAME
+					, PBDG.PBDG_TOTAL
+					, PBDG.PBDG_COUNT
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS PBDG
+						  INNER JOIN PROJECTS PROJ ON PROJ.PROJ_ID=PBDG.PROJ_ID
+				</FROM>
+				<ORDER>ORDER BY PBDG.PROJ_ID,PBDG.PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32" ORIGIN="PBDG.PROJ_ID"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20" ORIGIN="PBDG.ACM_CODE"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.acm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="PROJ_PRINCIPLES" CAPTION="project.remak" INPUTTYPE="TEXT" ROWS="3"/>
+				<FIELD NAME="ACM_NAME" CAPTION="project.acm_name" INPUTTYPE="TEXT" EDIT-READONLY="Y"/>
+
+				<SECTION ID="SECT-PROJECT-TARGET">
+					<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_COUNT" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PWMT_UNIT" CAPTION="project.target" INPUTTYPE="TEXT" READONLY="Y"></FIELD>
+					<FIELD NAME="QUOTER_1" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 1" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0101" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0102" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_2" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 2" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0201" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0202" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_3" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 3" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0301" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0302" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="QUOTER_4" INPUTTYPE="MULTI-FIELD" CAPTION="project.quoter 4" FIELD-SEPARATOR="/">
+						<FIELD-LIST>
+							<FIELD NAME="PTGT_QT_0401" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="PTGT_QT_0402" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+					<FIELD NAME="TOTAL_QT" INPUTTYPE="MULTI-FIELD" CAPTION="project.total" FIELD-SEPARATOR="/" READONLY="Y">
+						<FIELD-LIST>
+							<FIELD NAME="QT_TOTAL_01" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+							<FIELD NAME="QT_TOTAL_02" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"></FIELD>
+						</FIELD-LIST>
+					</FIELD>
+				</SECTION>
+
+				<FIELD NAME="GRID-BUDGET" INPUTTYPE="DATA-GRID" GRID-ID="GRID-WORK-BUDGET" ROWS="5" CAPTION="project.budget"/>
+
+				<SECTION ID="SEC-ATTATCH-FILE">
+					<FIELD NAME="FILE_BOX_01" CAPTION="file.upload 1" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_02" CAPTION="file.upload 2" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_03" CAPTION="file.upload 3" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+				</SECTION>
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="6"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="ACM_NAME" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_PRINCIPLES" LAYOUT_WIDTH="18" OFFSET="6"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-TARGET" TYPE="DATA-SECTION" DATASET="DS-PROJECT-TARGETS">
+					<ROW>
+						<FIELD NAME="PWMT_UNIT" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="QUOTER_1" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_2" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_3" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="QUOTER_4" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="TOTAL_QT" LAYOUT_WIDTH="4"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-ATTATCH-FILES">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.constructor_attatchment}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-REVISE-COMMENT">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">ความเห็นในการจัดตั้งแผนปฏิบัติการ</h4>]]></HEADER>
+					<ROW TYPE="CONTENT">
+					<![CDATA[
+							<div class="mg-b-16">
+								<div id="FIELD-ALLOW" class="form-group col-24 offset-0">
+									<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">ความเห็น</label>
+									<div class="form-col col-24 col-sm-14 form-control" data-field="REVISE_COMMENT" >
+										<div class="d-flex flex-row  gap-1">
+											<span class="d-flex flex-row gap-1">
+												<input type="radio" name="PROJ_ALLOW" id="PROJ_ALLOW_H" value="H" CHECKED>
+												<label for="PROJ_ALLOW_H">อยู่ระหว่างพิจารณา</label>
+											</span>
+											<span class="d-flex flex-row gap-1">
+												<input type="radio" name="PROJ_ALLOW" id="PROJ_ALLOW_Y" value="Y">
+												<label for="PROJ_ALLOW_Y">เห็นชอบ</label>
+											</span>
+											<span class="d-flex flex-row gap-1">
+												<input type="radio" name="PROJ_ALLOW" id="PROJ_ALLOW_N" value="N">
+												<label for="PROJ_ALLOW_N">ไม่เห็นชอบ</label>
+											</span>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="mg-b-16">
+								<div id="FIELD-REVISE_COMMENT" class="form-group col-24 offset-0">
+									<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">หมายเหตุ</label>
+									<div class="form-col col-24 col-sm-14" data-field="REVISE_COMMENT">
+										<textarea type="text" name="REVISE_COMMENT" id="REVISE_COMMENT" value=""  input-type="TEXT"  charcase="NORMAL" class="form-control dyn-form-control text" rows="2"></textarea>
+									</div>
+								</div>
+							</div>
+						]]>
+					</ROW>
+				</SECTION>
+
+			</LAYOUT>
+
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							let acmCount = $$("^QT_TOTAL_0").sum();
+							$$("PBDG_COUNT").val(acmCount);
+							let gridCtx = ($PageCtx.widgets["GRID-BUDGET"]||{})["$GridCtx"];
+							if (gridCtx) {
+								 let bdgTotal = gridCtx.sum_of["pbgi_total"];
+								$$("PBDG_TOTAL").val(bdgTotal);
+							}
+							Object.assign(data,form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+				<INITIALIZE>
+					<![CDATA[
+					     const quoterSum = ()=>{
+						     for (let sect=1; sect <=2; sect++) {
+							     let summary = 0;
+							     for (let qt = 1; qt <= 4; qt++) {
+								     summary += $$(`PTGT_QT_0${qt}0${sect}`).number();
+							     }
+							     $$(`QT_TOTAL_0${sect}`).val(formatNumber(summary));
+						     }
+					     }
+						 $$("^PTGT_QT_").on("change",quoterSum);
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt06/view/frm/bdgt-0601020-budget.frml b/DevResources/full-examples/bdgt06/view/frm/bdgt-0601020-budget.frml
new file mode 100644
index 0000000..5bd0861
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/frm/bdgt-0601020-budget.frml
@@ -0,0 +1,315 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-proj-budget.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-BROWSER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>V_ACTIVITY_TREE</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT :PROJ_ID PROJ_ID
+					, ACTT.ACM_CODE
+					, ACTT.ACM_NAME
+					, ACTT.ACM_SEQ
+					, ACTT.NODE_LEVEL
+					, ACTT.MAIN_NODE
+					, ACTT.ACM_UNIT
+					, ACTT.ACM_START_YEAR
+					, ACTT.ACM_END_YEAR
+					, ACTT.NODE_TYPE
+					, PJBG.PBDG_TOTAL PBDG_TOTAL
+					, PJBG.PBDG_COUNT  PBDG_COUNT
+				</SELECT>
+				<FROM>
+					FROM BGT.V_ACTIVITY_TREE ACTT
+						 INNER JOIN ( SELECT DISTINCT ACM.ACM_CODE
+										FROM BUD.ACTIVITY_M ACM
+											 INNER JOIN BUD.ACTIVITY_CTRL_H ACH ON ACM.ACM_CODE = ACH.ACH_CODE
+										START WITH ACM.ACM_CODE IN (SELECT ACM_CODE FROM PROJECT_BUDGETS PJBD WHERE PROJ_ID = :PROJ_ID)
+									  CONNECT BY PRIOR ACH.ACH_CTRL_CODE = ACH.ACH_CODE) FLTR ON FLTR.ACM_CODE = ACTT.ACM_CODE
+						 LEFT OUTER JOIN PROJECT_BUDGETS PJBG ON PJBG.PROJ_ID=:PROJ_ID AND PJBG.ACM_CODE = ACTT.ACM_CODE
+				</FROM>
+				<ORDER>ORDER BY ACTT.ACM_SEQ</ORDER>
+			</SQL>
+		</DATASET>
+
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, PBDG_ID
+					, ACM_CODE
+					, PBDG_TOTAL
+					, PBDG_COUNT
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,PBDG_ID</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="20"/>
+				<FIELD NAME="PBDG_TOTAL" TYPE="NUMBER" LABEL="ยอดรวม" WIDTH="15"/>
+				<FIELD NAME="PBDG_COUNT" TYPE="NUMBER" LABEL="จำนวนกิจกรรม" WIDTH="15"/>
+			</FIELDS>
+		</DATASET>
+
+		<DATASET ID="DS-PROJECT-TARGETS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_TARGETS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,ACM_CODE</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, ACM_CODE
+					, PWMT_UNIT
+					, PTGT_QT_0101
+					, PTGT_QT_0102
+					, PTGT_QT_0201
+					, PTGT_QT_0202
+					, PTGT_QT_0301
+					, PTGT_QT_0302
+					, PTGT_QT_0401
+					, PTGT_QT_0402
+				</SELECT>
+				<FROM>FROM PROJECT_TARGETS</FROM>
+				<ORDER>ORDER BY PROJ_ID,ACM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="ACM_CODE" TYPE="TEXT" LABEL="รหัสกิจกรรม" WIDTH="33"/>
+				<FIELD NAME="PWMT_UNIT" TYPE="TEXT" LABEL="หน่วยนับ" WIDTH="32"/>
+				<FIELD NAME="PTGT_QT_0101" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0102" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 1 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0201" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0202" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 2 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0301" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0302" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 3 (ผล)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0401" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (แผน)" WIDTH="15"/>
+				<FIELD NAME="PTGT_QT_0402" TYPE="NUMBER" LABEL="เป้าหมายไตรมาส 4 (ผล)" WIDTH="15"/>
+				<FIELD NAME="CREATE_BY" TYPE="TEXT" LABEL="ผู้สร้างรายการ" WIDTH="50"/>
+				<FIELD NAME="CREATE_TIME" TYPE="DATE" LABEL="เวลาที่สร้างรายการ" WIDTH="0"/>
+				<FIELD NAME="UPDATE_BY" TYPE="TEXT" LABEL="ผู้แก้ไขรายการล่าสุด" WIDTH="50"/>
+				<FIELD NAME="UPDATE_TIME" TYPE="DATE" LABEL="เวลาที่แก้ไขรายการล่าสุด" WIDTH="0"/>
+			</FIELDS>
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,ACM_CODE" DETAIL-FIELDS="PROJ_ID,ACM_CODE"/>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-BROWSER">
+			<HEADER NAVI="N" ADD="N" EDIT="Y" DELETE="N"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="ACM_CODE" LABEL="project.acm_code" ALIGN="left" WIDTH="15em">
+					<DATA-FORMATTER><![CDATA[
+						(value,row,idx)=>{
+							return $(`<div class="col-24 row"><div class="col offset-${row.node_level}">${value}</div></div>`);
+						}
+						]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="ACM_NAME" LABEL="project.acm_name" ALIGN="left">
+					<DATA-FORMATTER><![CDATA[
+						(value,row,idx)=>{
+							return $(`<div class="col-24 row"><div class="col offset-${row.node_level}">${value}</div></div>`);
+						}
+						]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="PBDG_TOTAL" LABEL="project.bgt_amount" ALIGN="right" WIDTH="10em">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return (row["node_type"]==="D")? value : "";}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<COMMAND-BUTTONS>
+					<BUTTONS-FILTER>
+						<EDIT><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></EDIT>
+						<DELETE><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></DELETE>
+						<VIEW><![CDATA[(row)=>{return row["node_type"] !== "C"}]]></VIEW>
+					</BUTTONS-FILTER>
+				</COMMAND-BUTTONS>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="Y" ALLOW-NO-FILTER="Y" >
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" DATATYPE="TEXT" ALIGN="center"/>
+					<FIELD NAME="PROJ_NAME" CAPTION="project.name" INPUTTYPE="TEXT" DATATYPE="TEXT" ALIGN="left"/>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"></FIELD>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" CAPT_WIDTH="10" VAL_WIDTH="6" LAYOUT_WIDTH="12"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_NAME" CAPT_WIDTH="5" VAL_WIDTH="18" LAYOUT_WIDTH="24"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+			<FOOTER SHOW="Y"/>
+			<SCRIPT>
+				<INITIALIZE>
+					<![CDATA[
+					{
+						console.log("init activity grid");
+
+						const fieldFormat = (value) => {
+							return formatNumber(value, 0);
+						}
+
+						$PageCtx.sum_of = {};
+						const summary = (field, data) => {
+							console.log("budget summary process.")
+							let total = 0;
+							for (let id=0; id < data.length; id++) {
+								let row = data[id];
+								if (row["node_type"] === "D") {
+									total += (+row[field]) || 0;
+								}
+							}
+
+							$PageCtx.sum_of[field] = total;
+
+							if ($PageCtx.$dataGrid.load && !$PageCtx.$dataGrid.reload) {
+								$PageCtx.$dataGrid.reload = true;
+								for (let id=data.length-1; id>=0; id--) {
+									let row = data[id];
+									if (row["node_type"] === "C") {
+										let grpTotal = 0;
+										let mainNode = row["acm_code"];
+										let nodes = [];
+										nodes.push($$("main_node="+mainNode,data));
+										for (let node of nodes.flat()) {
+											grpTotal += +node[field];
+										}
+										data[id][field] = grpTotal;
+									}
+								}
+								$PageCtx.$dataGrid.load(data);
+								$PageCtx.$dataGrid.reload = false;
+							}
+
+							return formatNumber(total, 0);
+						}
+
+						const $ctx = $PageCtx;
+						const gridFields = [$$("field^pbdg_", $ctx.gridColumn.flat())].flat();
+						for (let field of gridFields) {
+							field.formatter = fieldFormat;
+							field.footerFormatter = function (data) {
+								return summary(this.field, data);
+							}
+						}
+
+						$ctx.rowStyle = function (row, index) {
+							if (row["node_type"] === "C") {
+								return {
+									classes : `group-level-${row["node_level"]}`
+								};
+							}
+							return {}; // Default style for other rows
+						}
+					}
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_BROWSE>
+
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PBDG_TOTAL" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PROJ_NAME" CAPTION="project.name" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="VACM_CODE" CAPTION="project.acm_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_CODE" CAPTION="project.acm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-ACTIVITY-02-BDGT" VALUE-FIELD="ACM_CODE" TEXT-FIELD="ACM_NAME" PARAMETERS="DV_YEAR=PROJ_YEAR,STM_CODE=STM_CODE">
+						<UPDATE-FIELDS>
+							<FIELD SRC="ACM_CODE" TARGET="VACM_CODE"></FIELD>
+							<FIELD SRC="ACM_UNIT" TARGET="TARGET_UNIT"></FIELD>
+							<FIELD SRC="ACM_UNIT" TARGET="PWMT_UNIT"></FIELD>
+							<FIELD SRC="PJM_CODE" TARGET="PJM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								if (data.node_type === "C") {
+									data.disabled = true;
+								}
+								return $(`<div><label>[${data.acm_code}]</label> : <label>${data.acm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+				<FIELD NAME="GRID-BUDGET" INPUTTYPE="DATA-GRID" GRID-ID="GRID-WORK-BUDGET" ROWS="5" CAPTION="project.budget"/>
+
+			</FIELDS>
+
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_NAME" LAYOUT_WIDTH="18" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-PROJECT-BUTGET">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.budget}</h4>]]></HEADER>
+					<ROW>
+						<FIELD NAME="GRID-BUDGET" LAYOUT_WIDTH="24" OFFSET=""/>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							console.log("before save data");
+							if ($PageCtx.$action === "add") {
+								let $data = $PageCtx.main.pageData;
+								let budgetId = $$("VACM_CODE").val();
+								$$("PBDG_ID").val(budgetId);
+							}
+
+							let acmCount = $$("^QT_TOTAL_0").sum();
+							$$("PBDG_COUNT").val(acmCount);
+							let gridCtx = ($PageCtx.widgets["GRID-BUDGET"]||{})["$GridCtx"];
+							if (gridCtx) {
+								 let bdgTotal = gridCtx.sum_of["pbgi_total"];
+								$$("PBDG_TOTAL").val(bdgTotal);
+							}
+							Object.assign(data,form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+				<INITIALIZE>
+					<![CDATA[
+					     const quoterSum = ()=>{
+						     for (let sect=1; sect <=2; sect++) {
+							     let summary = 0;
+							     for (let qt = 1; qt <= 4; qt++) {
+								     summary += $$(`PTGT_QT_0${qt}0${sect}`).number();
+							     }
+							     $$(`QT_TOTAL_0${sect}`).val(formatNumber(summary));
+						     }
+					     }
+						 $$("^PTGT_QT_").on("change",quoterSum);
+					]]>
+				</INITIALIZE>
+			</SCRIPT>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt06/view/frm/bdgt-0601020.frml b/DevResources/full-examples/bdgt06/view/frm/bdgt-0601020.frml
new file mode 100644
index 0000000..fe8cf0d
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/frm/bdgt-0601020.frml
@@ -0,0 +1,758 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<INCLUDES>
+		<INCLUDE FILE="#grids/grid-stratigy.frml"></INCLUDE>
+		<INCLUDE FILE="#grids/grid-stratigy-item.frml"></INCLUDE>
+	</INCLUDES>
+	<DATASETS>
+		<DATASET ID="DS-BROWSER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT PROJ_YEAR
+					, PROJ_ID
+					, STM_CODE
+					, STM_NAME
+					, PJM_CODE
+					, PJM_NAME
+					, FLOW_TYPE
+					, FLOW_TYPE_DESC
+					, PROJ_SEQ
+					, FLOW_STATE
+					, JDTOTT(SYSDATE - (DBMS_RANDOM.VALUE(3, 10))) STATE_DATE
+					, 'อยู่ระหว่างพิจารณา' PROJ_ALLOW
+				</SELECT>
+				<FROM>
+					FROM (SELECT DISTINCT :PROJ_YEAR PROJ_YEAR
+					, PROJ.PROJ_ID
+					, PROJ.STM_CODE STM_CODE
+					, BUD.GET_SECTION(PROJ.STM_CODE) STM_NAME
+					, PROJ.PJM_CODE PJM_CODE
+					, BUD.GET_PROJECT(PROJ.PJM_CODE) PJM_NAME
+					, FTYP.RFC_CODE FLOW_TYPE
+					, FTYP.RFC_DESC FLOW_TYPE_DESC
+					, FTYP.RFC_ORDER PROJ_SEQ
+					, BGT.FLOW_STATE('STEP-02') FLOW_STATE
+					FROM REFER_CODE FTYP
+					INNER JOIN REFER_CODE PTYPE ON PTYPE.RFG_GRP = 'PROJ-TYPE' AND PTYPE.RFC_FLAG = FTYP.RFC_CODE
+					INNER JOIN PROJECTS PROJ ON PROJ.PROJ_TYPE = PTYPE.RFC_CODE
+					WHERE FTYP.RFG_GRP = 'FLOW-TYPE' AND FTYP.RFC_CODE = 'POLICY' AND PROJ.PROJ_YEAR = :PROJ_YEAR
+					ORDER BY STM_NAME) QR1
+				</FROM>
+				<ORDER>ORDER BY STM_NAME</ORDER>
+			</SQL>
+		</DATASET>
+
+		<DATASET ID="DS-MASTER">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECTS</TABLENAME>
+			<KEYFIELDS>PROJ_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT PROJ.PROJ_ID
+					, PROJ.PROJ_TYPE
+					, PROJ.PROJ_YEAR
+					, PROJ.PJM_CODE
+					, BUD.GET_PROJECT(PROJ.PJM_CODE) PROJ_NAME
+					, PROJ.STM_CODE
+					, BUD.GET_SECTION(PROJ.STM_CODE) STM_NAME
+					, PROJ.BTM_CODE
+					, PROJ.ACM_CODE
+					, BUD.GET_ACTIVITY(PROJ.ACM_CODE) ACM_NAME
+					, PROJ.PLAN_TYPE
+					, PROJ.PROJ_DURATION
+					, PROJ.PROJ_START_YEAR
+					, PROJ.PROJ_END_YEAR
+					, PROJ.PROJ_FOR_STAFF
+
+					, PROJ.PROJ_CATE
+					, PROJ.PROJ_KIND
+					, PROJ.PROJ_FROM_YEAR
+
+				</SELECT>
+				<FROM>FROM PROJECTS PROJ</FROM>
+				<FILTER>WHERE PROJ_ID = :PROJ_ID</FILTER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="VARCHAR" WIDTH="50" LABEL="plcp.id"/>
+				<FIELD NAME="PROJ_TYPE" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.type"/>
+				<FIELD NAME="PROJ_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.year"/>
+				<FIELD NAME="PJM_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="plcp.pjm_code"/>
+				<FIELD NAME="STM_CODE" TYPE="VARCHAR" WIDTH="10" LABEL="plcp.stm_code"/>
+				<FIELD NAME="BTM_CODE" TYPE="VARCHAR" WIDTH="10" LABEL="plcp.btm_code"/>
+				<FIELD NAME="ACM_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="plcp.acm_code"/>
+				<FIELD NAME="ACM_NAME" TYPE="VARCHAR" WIDTH="200" LABEL="plcp.acm_name"/>
+				<FIELD NAME="PLAN_TYPE" TYPE="VARCHAR" WIDTH="15" LABEL="plcp.plan_type"/>
+				<FIELD NAME="PROJ_DURATION" TYPE="NUMBER" WIDTH="10" LABEL="plcp.duration"/>
+				<FIELD NAME="PROJ_START_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.start_year"/>
+				<FIELD NAME="PROJ_END_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.end_year"/>
+				<FIELD NAME="PROJ_FOR_STAFF" TYPE="NUMBER" WIDTH="10" LABEL="plcp.for_staff"/>
+
+				<FIELD NAME="PROJ_CATE" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.catagory"/>
+				<FIELD NAME="PROJ_KIND" TYPE="VARCHAR" WIDTH="25" LABEL="plcp.kine"/>
+				<FIELD NAME="PROJ_FROM_YEAR" TYPE="NUMBER" WIDTH="4" LABEL="plcp.from_year"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<FORM>
+		<FORM_BROWSE DATAID="DS-BROWSER">
+			<HEADER NAVI="N" EDIT="Y" ADD="N" DELETE="N" VIEW="Y"/>
+			<PAGESIZE>0</PAGESIZE>
+			<FIELDS>
+				<FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+				<FIELD NAME="STM_NAME" LABEL="props.stm_name" ALIGN="left" WIDTH="20em">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 text-nowrap"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="PJM_NAME" LABEL="project.name" ALIGN="left">
+					<DATA-FORMATTER>
+						<![CDATA[(value,row,idx)=>{return $(`<div class="col-24 row"><div class="col offset-${+(row.node_level)-1}">${value}</div></div>`);}]]>
+					</DATA-FORMATTER>
+				</FIELD>
+				<FIELD NAME="PROJ_ALLOW" LABEL="project.allow" ALIGN="center" WIDTH="10em"/>
+			</FIELDS>
+			<FILTERS AUTO-APPLY="Y" ALLOW-NO-FILTER="Y">
+				<FIELDS>
+					<FIELD NAME="PROJ_YEAR" CAPTION="project.year" INPUTTYPE="COMBOBOX" SEARCH-ORIGIN="PROJ_YEAR=${VALUE}">
+						<LIST-OPTION TABLE="VL_YEAR" TEXT="#DV_YEAR" VALUE="DV_YEAR" ORDER="DV_YEAR" FIRSTLIST="@{NONE}"/>
+					</FIELD>
+					<FIELD NAME="STM_CODE" CAPTION="props.stm_name" INPUTTYPE="COMBOBOX" SEARCH-ORIGIN="STM_CODE=${VALUE}">
+						<LIST-OPTION TABLE="BUD.SECTION_M" TEXT="#STM_NAME" VALUE="STM_CODE" ORDER="STM_NAME" FIRSTLIST=""/>
+					</FIELD>
+				</FIELDS>
+				<LAYOUT>
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" VAL_WIDTH="6" CAPT_WIDTH="12" LAYOUT_WIDTH="12"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="STM_CODE" VAL_WIDTH="12" CAPT_WIDTH="6" LAYOUT_WIDTH="24"/>
+					</ROW>
+				</LAYOUT>
+			</FILTERS>
+		</FORM_BROWSE>
+
+		<FORM_ENTRY DATAID="DS-MASTER" SAVE="Y" RETURN="Y">
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="STM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="BTM_CODE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PLAN_TYPE" INPUTTYPE="HIDDEN"/>
+				<FIELD NAME="PROJ_DURATION" INPUTTYPE="HIDDEN"/>
+
+				<FIELD NAME="PROJ_YEAR" CAPTION="plcp.year" INPUTTYPE="TEXT" READONLY="Y" DATATYPE="TEXT"/>
+				<FIELD NAME="VPJM_CODE" CAPTION="plcp.pjm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="PJM_CODE" CAPTION="plcp.pjm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-PROJECT-02" VALUE-FIELD="PJM_CODE" TEXT-FIELD="PJM_NAME">
+						<UPDATE-FIELDS>
+							<FIELD SRC="PJM_CODE" TARGET="VPJM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								// data.disabled = data["node_type"] === "C";
+								return $(`<div class="d-flex flex-row gap-1 dyn-list-item"><label class="flex-column text-nowrap col-3">[${data.pjm_code}]</label> : <label>${data.pjm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+
+				<FIELD NAME="VACM_CODE" CAPTION="plcp.acm_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+				<FIELD NAME="ACM_CODE" CAPTION="plcp.acm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+					<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-ACTIVITY-02" VALUE-FIELD="ACM_CODE" TEXT-FIELD="ACM_NAME" PARAMETERS="DV_YEAR=PROJ_YEAR,STM_CODE=STM_CODE">
+						<UPDATE-FIELDS>
+							<FIELD SRC="ACM_CODE" TARGET="VACM_CODE"></FIELD>
+						</UPDATE-FIELDS>
+					</AJAX-OPTION>
+					<LIST-OPTION>
+						<FORMATTER><![CDATA[
+							(data) => {
+								console.log("call formater with ", data);
+								// data.disabled = data["node_type"] === "C";
+								return $(`<div class="d-flex flex-row gap-1 dyn-list-item"><label class="flex-column text-nowrap col-3">[${data.acm_code}]</label> : <label>${data.acm_name}</label></div>`);
+							}
+							]]></FORMATTER>
+					</LIST-OPTION>
+				</FIELD>
+
+				<FIELD NAME="STM_CODE" CAPTION="plcp.stm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+				<FIELD NAME="BTM_CODE" CAPTION="plcp.btm_code" INPUTTYPE="TEXT"/>
+				<FIELD NAME="PLAN_TYPE" CAPTION="plcp.plan_type" INPUTTYPE="TEXT"/>
+				<FIELD NAME="PROJ_DURATION" CAPTION="plcp.duration" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_START_YEAR" CAPTION="plcp.start_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_END_YEAR" CAPTION="plcp.end_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+				<FIELD NAME="PROJ_FOR_STAFF" CAPTION="plcp.for_staff" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+
+				<FIELD NAME="PROJ_CATE" CAPTION="plcp.catagory" INPUTTYPE="RADIOGROUP" DATATYPE="TEXT" CLASS-NAME="flex-option">
+					<LIST-OPTION TABLE="BGT.REFER_CODE" TEXT="#RFC_DESC" VALUE="RFC_CODE" FILTER="RFG_GRP='PROJ-CATE'" ORDER="RFC_CODE"/>
+				</FIELD>
+
+				<FIELD NAME="PROJ_KIND" CAPTION="plcp.kind" INPUTTYPE="SWITCH" DATATYPE="TEXT"
+					   VALUE="NEW" UNCHECK_VALUE="OLD" SUFFIX="#plcp.new|plcp.continue"></FIELD>
+
+
+				<FIELD NAME="PROJ_PHASE" CAPTION="#--" SHOWCAPT="Y" INPUTTYPE="CHECKBOXGROUP" DATATYPE="TEXT">
+					<LIST-OPTION TABLE="BGT.REFER_CODE" TEXT="#RFC_DESC" VALUE="RFC_CODE" FILTER="RFG_GRP='PROJ-PHASE'" ORDER="RFC_CODE" COLUMN="4"/>
+				</FIELD>
+				<FIELD NAME="PROJ_BUDGET" CAPTION="plcp.budget" INPUTTYPE="TEXT" DATATYPE="NUMBER" SUFFIX="บาท"/>
+
+
+				<FIELD NAME="PROJ_FROM_YEAR" CAPTION="plcp.from_year" INPUTTYPE="TEXT" DATATYPE="NUMBER"/>
+
+				<FIELD NAME="GRID-STRATEGY" INPUTTYPE="DATA-GRID" GRID-ID="GRID-PROJECT-STTGYS" CAPTION="pstg.header"/>
+
+				<FIELD NAME="PROJ_INVOLVERS" INPUTTYPE="TEXTAREA" CAPTION="plcp.involvers" ROWS="4"/>
+				<FIELD NAME="PROJ_INVOLVISSE" INPUTTYPE="TEXTAREA" CAPTION="plcp.involv_issue" ROWS="4"/>
+
+				<SECTION ID="SEC-ATTATCH-FILE">
+					<FIELD NAME="FILE_BOX_01" CAPTION="file.upload 1" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_02" CAPTION="file.upload 2" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+					<FIELD NAME="FILE_BOX_03" CAPTION="file.upload 3" INPUTTYPE="FILE-BOX" DATATYPE="TEXT">
+						<FILE-BOX FILE-TYPE="budget" FILE-ACCEPTS="pdf,docx,xlsx,jpeg,jpg,png"
+							UPLOAD-URL="/file-upload.jbx" FILE-URL="/get-file.jbx"
+							DEFAULT-NAME="@{filepath}/@{acm_code}/file-01"/>
+					</FIELD>
+				</SECTION>
+			</FIELDS>
+			<LAYOUT CLASS="block-layout-form">
+				<SECTION ID="SECT-MAIN">
+					<ROW>
+						<FIELD NAME="PROJ_YEAR" LAYOUT_WIDTH="6" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VPJM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="PJM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VACM_CODE" LAYOUT_WIDTH="4"/>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="18"/>
+					</ROW>
+				</SECTION>
+				<SECTION>
+					<HEADER CLASS="form-section-header col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{pstg.header}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="GRID-STRATEGY" LAYOUT_WIDTH="20" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+				<SECTION>
+					<ROW>
+						<FIELD NAME="PROJ_CATE" OFFSET="4" LAYOUT_WIDTH="20"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PROJ_KIND" OFFSET="4" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="PROJ_FROM_YEAR" LAYOUT_WIDTH="6"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-STRATEGY">
+					<HEADER CLASS="form-section-header col-24 mg-t-30 border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">ความเชื่อมโยงของโครงการกับประเด็นการยกระดับคะแนนดัชนีการรับรู้การทุจริต(CPI)และแหล่งข้อมูล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-4">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center">ประเด็น/แหล่งข้อมูล</th>
+										<th class="center" style="width: 5em">BF(TI)<br>(1)</th>
+										<th class="center" style="width: 5em">EIU<br>(2)</th>
+										<th class="center" style="width: 5em">GI<br>(3)</th>
+										<th class="center" style="width: 5em">IMD<br>(4)</th>
+										<th class="center" style="width: 5em">PERC<br>(5)</th>
+										<th class="center" style="width: 5em">PRS<br>(6)</th>
+										<th class="center" style="width: 5em">WEF<br>(7)</th>
+										<th class="center" style="width: 5em">WJP<br>(8)</th>
+										<th class="center" style="width: 5em">VDEM<br>(9)</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">1.สินบน</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+									</tr>
+									<tr>
+										<td class="left">2.การขัดกันแห่งผลประโยชน์</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+									</tr>
+									<tr>
+										<td class="left">3.นโยบายของรัฐบาลในการแก้ไขปัญหาการทุจริต</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+									<tr>
+										<td class="left">4.การตรวจสอบเจ้าหน้าที่รัฐ</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+									<tr>
+										<td class="left">5.ความโปร่งใสในระบบงบประมาณและการจัดซื้อจัดจ้าง</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+										<td class="center empt-dark">&nbsp</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-1">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">1.หลักการและเหตุผล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-2">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">2.วัตถุประสงค์</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-3">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">3.ประโยชน์ที่คาดว่าจะได้รับ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-4">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">4.เป้าหมาย</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-5">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">5.กลุ่มเป้าหมาย</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-6">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">6.พื้นที่ดำเนินการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-7">
+				<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">7.กิจกรรมที่จะดำเนินการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">ขั้นตอนการดำเนินงาน</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 1</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 2</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 3</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 4</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2">
+											<button type="button" id="add-btn" class="btn btn-primary btn-round data-grid-add-btn mg-y-5 w-100 white"><i class="fa fa-plus"></i></button>
+										</th>
+									</tr>
+									<tr>
+										<th class="center" style="width: 3em">ต.ค.</th>
+										<th class="center" style="width: 3em">พ.ย.</th>
+										<th class="center" style="width: 3em">ธ.ค.</th>
+										<th class="center" style="width: 3em">ม.ค.</th>
+										<th class="center" style="width: 3em">ก.พ.</th>
+										<th class="center" style="width: 3em">มี.ค.</th>
+										<th class="center" style="width: 3em">เม.ย.</th>
+										<th class="center" style="width: 3em">พ.ค.</th>
+										<th class="center" style="width: 3em">มิ.ย.</th>
+										<th class="center" style="width: 3em">ก.ค.</th>
+										<th class="center" style="width: 3em">ส.ค.</th>
+										<th class="center" style="width: 3em">ก.ย.</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">กิจกรรมที่ ๑ การระดมความคิดเห็นเพื่อ
+											กำหนดประเด็นจัดทำแผนงานและ
+											แนวทางในการขับเคลื่อนเพื่อป้องปราม
+											หรือเฝ้าระวังปัญหาการทุจริตในพื้นที่</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+									<tr>
+										<td class="left">กิจกรรมที่ ๒ การลงพื้นที่เพื่อเฝ้าระวังและ
+											ป้องปรามการทุจริตในพื้นที่ตามนโยบาย
+											ของสำนักงานป.ป.ช.หรือตามประเด็นที่
+											ได้รับแจ้งข้อมูลจากศูนย์ป้องปราม
+											การทุจริตแห่งชาติสำนักงานป.ป.ช.</td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="center"><input type="checkbox"></td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-8">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">8.ตัวชี้วัดของผลผลิต/ผลลัพธ์การดำเนินโครงการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">ผลผลิต(Output)/ผลลัพธ์(Outcome)</th>
+										<th class="center" style="width: 12em">ตัวชี้วัด</th>
+										<th class="center" style="width: 12em">ค่าเป้าหมาย</th>
+										<th class="center" style="width: 12em">ระยะเวลา</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2">
+											<button type="button" id="add-btn" class="btn btn-primary btn-round data-grid-add-btn mg-y-5 w-100 white"><i class="fa fa-plus"></i></button>
+										</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left"><b>ผลผลิต(Output)</b><br>
+											รายงานสรุปผลโครงการแก้ไขปัญหา
+											การทุจริตในพื้นที่
+										</td>
+										<td class="center">แนวทางการแก้ไขปัญหา
+											การทุจริตในพื้นที่</td>
+										<td class="center">รายงาน ๑ ฉบับ</td>
+										<td class="center">ไตรมาสที่ ๔</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+
+									<tr>
+										<td class="left"><b>ผลลัพธ์(Outcome)</b><br>
+											หน่วยงานที่เกี่ยวข้องนำแนวทางการแก้ไข
+											ปัญหาการทุจริตไปใช้ในการป้องกัน
+											การทุจริตในพื้นที่เพื่อทำให้คดีทุจริต
+											ในพื้นที่ลดลง
+										</td>
+										<td class="center">จำนวนหน่วยงานที่นำแนวทาง
+											การแก้ไขปัญหาการทุจริตในพื้นที่
+											ไปใช้ในการป้องกันการทุจริต
+											ในพื้นที่่</td>
+										<td class="center">อย่างน้อย ๑ หน่วยงาน</td>
+										<td class="center">ไตรมาสที่ ๔</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-danger btn-delete" title="Delete "><i class="fa fa-trash-alt white"></i></button>
+												<button type="button" class="btn btn-grid-command btn-primary btn-view" title="View "><i class="fa fa-file-alt white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-9">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">9.งบประมาณ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_BUDGET" OFFSET="4" LAYOUT_WIDTH="6"/>
+					</ROW>
+					<ROW TYPE="CONTENT" CLASS="bootstrap-table bootstrap5">
+						<![CDATA[
+						<div class="fixed-table-container fixed-table-header col-20 offset-3">
+							<table class="col-24 no-padding table table-bordered table-hover with-command">
+								<thead class="table-primary">
+									<tr>
+										<th class="center" rowspan="2">งบรายจ่าย</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 1</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 2</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 3</th>
+										<th class="center" style="width: 10em" colspan="3">ไตรมาส 4</th>
+										<th class="operate-header" style="text-align: center; width: 90px;" data-field="grid-operate" rowspan="2"></th>
+									</tr>
+									<tr>
+										<th class="center" style="width: 3em">ต.ค.</th>
+										<th class="center" style="width: 3em">พ.ย.</th>
+										<th class="center" style="width: 3em">ธ.ค.</th>
+										<th class="center" style="width: 3em">ม.ค.</th>
+										<th class="center" style="width: 3em">ก.พ.</th>
+										<th class="center" style="width: 3em">มี.ค.</th>
+										<th class="center" style="width: 3em">เม.ย.</th>
+										<th class="center" style="width: 3em">พ.ค.</th>
+										<th class="center" style="width: 3em">มิ.ย.</th>
+										<th class="center" style="width: 3em">ก.ค.</th>
+										<th class="center" style="width: 3em">ส.ค.</th>
+										<th class="center" style="width: 3em">ก.ย.</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="left">งบบริหารจัดการรายเดือน</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="right">0</td>
+										<td class="operate-header" style="text-align: center; width: 90px;">
+											<div class="d-flex flex-row gap-1 justify-content-center width-100">
+												<button type="button" class="btn btn-grid-command btn-warning btn-edit" title="Edit "><i class="fa fa-edit white"></i></button>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+								<tfoot>
+									<tr>
+										<td class="left">รวมงบประมาณรายไตรมาส</td>
+										<td class="right" colspan="3">0</td>
+										<td class="right" colspan="3">0</td>
+										<td class="right" colspan="3">0</td>
+										<td class="right" colspan="3">0</td>
+										<td class="operate-header" style="text-align: center; width: 90px;"></td>
+									</tr>
+								</tfoot>
+							</table>
+						]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-10">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">10.ผู้รับผิดชอบโครงการ</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-11">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">11.ผู้ที่เกี่ยวข้องที่อาจจะได้รับผลกระทบ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_INVOLVERS" LAYOUT_WIDTH="10" OFFSET="4"/>
+						<FIELD NAME="PROJ_INVOLVISSE" LAYOUT_WIDTH="10"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-NOTE-12">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">12.ลักษณะโครงการ</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="PROJ_PHASE" OFFSET="4" LAYOUT_WIDTH="16"/>
+					</ROW>
+				</SECTION>
+				<SECTION ID="SECT-NOTE-13">
+					<HEADER CLASS="form-section-header col-24 mg-t-16 mg-b-6  border-bottom-1">
+                        <![CDATA[<h4 class="ml-3 col-24">13.การติดตามประเมินผล</h4>]]>
+					</HEADER>
+					<ROW TYPE="CONTENT" CLASS="col-20 form-group offset-4">
+						<![CDATA[<textarea class="form-control pd-y-3 mg-y-3" rows="3"></textarea>]]>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-ATTACH-FILES">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">@M{project.constructor_attatchment}</h4>]]>
+					</HEADER>
+					<ROW>
+						<FIELD NAME="FILE_BOX_01" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_02" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="FILE_BOX_03" LAYOUT_WIDTH="16" OFFSET="4"/>
+					</ROW>
+				</SECTION>
+
+				<SECTION ID="SECT-REVISE-COMMENT">
+					<HEADER CLASS="col-24 pd-t-16">
+                        <![CDATA[<h4 class="ml-3 border-bottom-1 col-24">ความเห็นในการจัดตั้งแผนปฏิบัติการ</h4>]]></HEADER>
+					<ROW TYPE="CONTENT">
+					<![CDATA[
+						<div class="mg-b-16">
+							<div id="FIELD-ALLOW" class="form-group col-24 offset-0">
+								<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">ความเห็น</label>
+								<div class="form-col col-24 col-sm-14 form-control" data-field="REVISE_COMMENT" >
+									<div class="d-flex flex-row  gap-1">
+											<span class="d-flex flex-row gap-1">
+												<input type="radio" name="PROJ_ALLOW" id="PROJ_ALLOW_H" value="H" CHECKED>
+												<label for="PROJ_ALLOW_H">อยู่ระหว่างพิจารณา</label>
+											</span>
+										<span class="d-flex flex-row gap-1">
+												<input type="radio" name="PROJ_ALLOW" id="PROJ_ALLOW_Y" value="Y">
+												<label for="PROJ_ALLOW_Y">เห็นชอบ</label>
+											</span>
+										<span class="d-flex flex-row gap-1">
+												<input type="radio" name="PROJ_ALLOW" id="PROJ_ALLOW_N" value="N">
+												<label for="PROJ_ALLOW_N">ไม่เห็นชอบ</label>
+											</span>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="mg-b-16">
+							<div id="FIELD-REVISE_COMMENT" class="form-group col-24 offset-0">
+								<label id="lbREVISE_COMMENT" for="REVISE_COMMENT" class="col-form-label form-label col-sm-10">หมายเหตุ</label>
+								<div class="form-col col-24 col-sm-14" data-field="REVISE_COMMENT">
+									<textarea type="text" name="REVISE_COMMENT" id="REVISE_COMMENT" value=""  input-type="TEXT"  charcase="NORMAL" class="form-control dyn-form-control text" rows="2"></textarea>
+								</div>
+							</div>
+						</div>
+						]]>
+					</ROW>
+				</SECTION>
+			</LAYOUT>
+			<SCRIPT>
+				<EVENTS>
+					<BEFORE-SAVE><![CDATA[
+						({form, data}) => {
+							if ($PageCtx.$action === "add") {
+								let projYear = $$("PROJ_YEAR").val();
+								let projType = "PLCY";
+								let btmCode = "01";
+								let stmCode = $user.deptCode;
+								let acmCode = $$("ACM_CODE").val();
+								let projId = `${projYear}x${projType}x${stmCode}x${acmCode}`;
+
+								$$("PROJ_ID").val(projId);
+								$$("PROJ_TYPE").val(projType);
+								$$("STM_CODE").val(stmCode);
+								$$("BTM_CODE").val(btmCode);
+							}
+							Object.assign(data, form.mainForm.jsonData());
+						}
+						]]></BEFORE-SAVE>
+				</EVENTS>
+			</SCRIPT>
+			<BUTTONS>
+				<BUTTON NAME="btnButton3" CAPTION="รายละเอียดงบประมาณ" CLASS="btn btn-outline-success" SECTION="LEFT">
+					<EVENT ON="click"><![CDATA[
+						(ev) => {
+							ev.preventDefault();
+							let data = $PageCtx.$data;
+							let projId = data.proj_id;
+							let targetUrl = url("/bdgt06/bgt0601020-budget?proj_id=" + projId);
+							data.page_title = $("h4.page-title").html();
+							data.postData = $PageCtx.$Params.get("data");
+							$PageCtx.saveSessionData("budget", data);
+							$PageCtx.saveStorageData("budget#search", {PROJ_ID: projId});
+							$WebNavi.goto(targetUrl);
+						}
+						]]></EVENT>
+				</BUTTON>
+			</BUTTONS>
+		</FORM_ENTRY>
+	</FORM>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt06/view/frm/grids/grid-construct-budget.frml b/DevResources/full-examples/bdgt06/view/frm/grids/grid-construct-budget.frml
new file mode 100644
index 0000000..5f3dc68
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/frm/grids/grid-construct-budget.frml
@@ -0,0 +1,260 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-PROJECT_BUDGET_ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>
+					SELECT :PROJ_ID PROJ_ID
+					, ACTT.ACM_CODE
+					, ACTT.ACM_NAME
+					, ACTT.ACM_SEQ
+					, ACTT.NODE_LEVEL
+					, ACTT.MAIN_NODE
+					, ACTT.ACM_UNIT
+					, ACTT.ACM_START_YEAR
+					, ACTT.ACM_END_YEAR
+					, ACTT.NODE_TYPE
+					, PBGI.PBDG_ID
+					, PBGI.BGM_CODE
+					, PBGI.PBGI_QTY
+					, PBGI.PBGI_COST
+					, PBGI.PBGI_FREQ
+					, PBGI.PBGI_ASSET_TYPE
+					, PBGI.PBGI_REPLACE
+					, PBGI.PBGI_ADDITION
+					, PBGI.PBGI_ACQUIRE
+					, PBGI.PBGI_TOTAL
+					, PBGI.PBGI_REASON
+					</SELECT>
+				<FROM>
+					FROM BGT.V_ACTIVITY_TREE ACTT
+						INNER JOIN ( SELECT DISTINCT ACM.ACM_CODE
+									   FROM BUD.ACTIVITY_M ACM
+										     INNER JOIN BUD.ACTIVITY_CTRL_H ACH ON ACM.ACM_CODE = ACH.ACH_CODE
+											 START WITH ACM.ACM_CODE IN (SELECT PBGI.PBDG_ID ACM_CODE FROM PROJECT_BUDGET_ITEMS PBGI WHERE PROJ_ID = :PROJ_ID)
+											 CONNECT BY PRIOR ACH.ACH_CTRL_CODE = ACH.ACH_CODE) FLTR ON FLTR.ACM_CODE = ACTT.ACM_CODE
+						LEFT OUTER JOIN BGT.PROJECT_BUDGET_ITEMS PBGI ON PBGI.PBDG_ID = ACTT.ACM_CODE
+				</FROM>
+				<ORDER>ORDER BY ACTT.ACM_SEQ</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="รหัสหมวดงบประมาณ" WIDTH="20"/>
+				<FIELD NAME="PBGI_QT_01" TYPE="NUMBER" LABEL="จำนวนไตรมาส 1" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_02" TYPE="NUMBER" LABEL="จำนวนไตรมาส 2" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_03" TYPE="NUMBER" LABEL="จำนวนไตรมาส 3" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_04" TYPE="NUMBER" LABEL="จำนวนไตรมาส 4" WIDTH="15"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="จำนวน" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="ราคาต่อหน่วย" WIDTH="15"/>
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="ความถี่/จำนวนครั้ง" WIDTH="10"/>
+				<FIELD NAME="PBGI_ASSET_TYPE" TYPE="TEXT" LABEL="ประเภทสินทรัพย์" WIDTH="10"/>
+				<FIELD NAME="PBGI_REPLACE" TYPE="NUMBER" LABEL="ทดแทนของเดิม" WIDTH="10"/>
+				<FIELD NAME="PBGI_ADDITION" TYPE="NUMBER" LABEL="เพิ่มเติม" WIDTH="10"/>
+				<FIELD NAME="PBGI_ACQUIRE" TYPE="NUMBER" LABEL="จัดหาใหม่" WIDTH="10"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="รวมเป็นเงิน" WIDTH="15"/>
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="เหตุผลความจำเป็น" WIDTH="4000"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<DATA-GRIDS>
+		<DATA-GRID ID="GRID-CONST-BUDGET">
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID" DETAIL-FIELDS="PROJ_ID"/>
+			<UNIQ-CHECK CHECK-FIELDS="ACM_CODE" MESSAGE="pctbi.const_code duplicate !"></UNIQ-CHECK>
+			<GRID-LIST DATAID="DS-PROJECT_BUDGET_ITEMS" EDIT="Y" DELETE="Y" CLASS="table-primary">
+				<KEYFIELDS>PROJ_ID,BGM_CODE</KEYFIELDS>
+				<TITLES>
+					<ROW>
+						<FIELD NAME="ACM_CODE" LABEL="pctbi.const_code" WIDTH="10em" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="ACM_NAME" LABEL="pctbi.const_name" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BUDGET_INFO" LABEL="pctbi.budget" ALIGN="center" COLS-SPAN="3"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_QTY" LABEL="pctbi.qty" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_COST" LABEL="pctbi.cost" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_TOTAL" LABEL="pctbi.total" WIDTH="8em" ALIGN="right"/>
+					</ROW>
+				</TITLES>
+
+				<FIELDS>
+					<FIELD NAME="PBDG_ID" LABEL="pctbi.const_code" WIDTH="15em" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="ACM_NAME" LABEL="pctbi.const_name" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+					<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					<COMMAND-BUTTONS>
+						<BUTTONS-FILTER>
+							<EDIT><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></EDIT>
+							<DELETE><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></DELETE>
+							<VIEW><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></VIEW>
+						</BUTTONS-FILTER>
+					</COMMAND-BUTTONS>
+				</FIELDS>
+				<FOOTER SHOW="Y"/>
+				<SCRIPT>
+					<INITIALIZE>
+						<![CDATA[
+						(ctx)=> {
+						    ctx.sum_of = {};
+							console.log("init grid-budget");
+							const fieldFormat = (field,value,row) => {
+								if (row["node_type"] === "D" || field === "pbgi_total") {
+									return formatNumber(value, 0);
+								} else {
+									return  "";
+								}
+							}
+
+							const summary = (field, data) => {
+								let total = 0;
+								for (const row of data) {
+									total += (+row[field])||0;
+								}
+								ctx.sum_of[field] = total;
+
+								if (ctx.$dataGrid && ctx.$dataGrid.load && !ctx.$dataGrid.reload) {
+									ctx.$dataGrid.reload = true;
+									for (let id=data.length-1; id>=0; id--) {
+										let row = data[id];
+										if (row["node_type"] === "C") {
+											let grpTotal = 0;
+											let mainNode = row["acm_code"];
+											let nodes = [];
+											let dataNode = $$("main_node="+mainNode,data);
+											if (dataNode) {
+												nodes.push(dataNode);
+												for (let node of nodes.flat()) {
+													grpTotal += +node[field];
+												}
+												data[id][field] = grpTotal;
+											}
+										}
+									}
+									ctx.$dataGrid.load(data);
+									ctx.$dataGrid.reload = false;
+								}
+
+								return formatNumber(total,0);
+							}
+
+							const fieldList = ["pbgi_qty","pbgi_cost","pbgi_total"];
+							for (let field of fieldList) {
+								let column = $$(`field=${field}`,ctx.gridColumn.flat());
+								column.formatter = (value,row) => {
+									return fieldFormat(field, value, row);
+								}
+								column.footerFormatter = (data)=>{
+									return summary(field,data);
+								}
+							}
+
+							ctx.option.rowStyle = function (row, index) {
+								if (row["node_type"] === "C") {
+									return {classes : `group-level-${row["node_level"]}`};
+								}
+								return {}; // Default style for other rows
+							}
+
+						}
+						]]>
+					</INITIALIZE>
+				</SCRIPT>
+			</GRID-LIST>
+
+			<GRID-EDITOR DATAID="DS-PROJECT_BUDGET_ITEMS">
+				<FIELDS>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="ACM_CODE" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="BGM_NAME" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="ACM_NAME" INPUTTYPE="HIDDEN"/>
+
+					<FIELD NAME="VACM_CODE" CAPTION="pctbi.const_code" INPUTTYPE="TEXT" REQUIRE="Y" READONLY="Y"/>
+					<FIELD NAME="ACM_CODE" CAPTION="pctbi.const_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-ACTIVITY-04" VALUE-FIELD="ACM_CODE" TEXT-FIELD="ACM_NAME" PARAMETERS="DV_YEAR=PROJ_YEAR,STM_CODE=STM_CODE">
+							<UPDATE-FIELDS>
+								<FIELD SRC="ACM_CODE" TARGET="VACM_CODE"/>
+								<FIELD SRC="ACM_CODE" TARGET="PBDG_ID"/>
+								<FIELD SRC="ACM_NAME" TARGET="ACM_NAME"/>
+								<FIELD SRC="ACM_UNIT" TARGET="PBGI_UNIT"/>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div class="d-flex flex-row gap-1"><label class="flex-column text-nowrap col-3">[${data.acm_code}]</label> : <label>${data.acm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-BUDGET-04" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div class="d-flex flex-row gap-1"><label class="flex-column text-nowrap col-3">[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="PBGI_UNIT" CAPTION="pctbi.unit" INPUTTYPE="TEXT" DATATYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="PBGI_QTY" CAPTION="pctbi.qty" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"  CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_COST" CAPTION="pctbi.cost" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="pctbi.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT CLASS="block-layout-form">
+					<ROW>
+						<FIELD NAME="VACM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="ACM_CODE" LAYOUT_WIDTH="16"/>
+					</ROW>
+					<ROW ID="ROW-BUDGET-DATA">
+						<FIELD NAME="PBGI_QTY" LAYOUT_WIDTH="3" OFFSET="6"/>
+						<FIELD NAME="PBGI_UNIT" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_COST" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="4" OFFSET="6"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="12"/>
+					</ROW>
+					<ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 350px"></div>]]>
+					</ROW>
+				</LAYOUT>
+				<SCRIPT>
+					<INITIALIZE><![CDATA[
+						console.log("sum budget value");
+						let budgetField = $$("input.budget-data");
+						const sumBudget = ()=>{
+							$$("PBGI_TOTAL").setValue(budgetField.multiply());
+						}
+						budgetField.on("change",sumBudget);
+						]]></INITIALIZE>
+				</SCRIPT>
+			</GRID-EDITOR>
+		</DATA-GRID>
+	</DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt06/view/frm/grids/grid-equipt-budget.frml b/DevResources/full-examples/bdgt06/view/frm/grids/grid-equipt-budget.frml
new file mode 100644
index 0000000..2d71eb9
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/frm/grids/grid-equipt-budget.frml
@@ -0,0 +1,231 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-PROJECT_BUDGET_ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT BGTT.BGM_CODE
+							, BGTT.BGM_NAME
+							, BGTT.BGM_UNIT
+							, BGTT.BGM_UNIT_RATE
+							, BGTT.NODE_LEVEL
+							, BGTT.BGM_SEQ
+							, BGTT.EXP_TYPE
+							, BGTT.MAIN_NODE
+							, BGTT.NODE_TYPE
+							, PBGI.PBGI_QTY
+							, PBGI.PBGI_COST
+							, PBGI.PBGI_FREQ
+							, PBGI.PBGI_ASSET_TYPE
+							, PBGI.PBGI_REPLACE
+							, PBGI.PBGI_ADDITION
+							, PBGI.PBGI_ACQUIRE
+							, PBGI.PBGI_TOTAL
+							, PBGI.PBGI_REASON
+				</SELECT>
+				<FROM>
+					FROM BGT.V_BUDGET_TREE BGTT
+						INNER JOIN (SELECT DISTINCT BGDM.BGM_CODE
+									  FROM BUD.BUDGET_M BGDM
+									       INNER JOIN BUD.BUDGET_M BGDH ON BGDM.BGM_CODE = BGDH.BGM_CODE
+										   START WITH BGDM.BGM_CODE IN (SELECT PBGI.BGM_CODE FROM BGT.PROJECT_BUDGET_ITEMS PBGI WHERE PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID)
+									       CONNECT BY PRIOR BGDH.BGM_MAIN_NODE = BGDH.BGM_CODE) FLTR ON FLTR.BGM_CODE = BGTT.BGM_CODE
+						LEFT OUTER JOIN BGT.PROJECT_BUDGET_ITEMS PBGI ON PBGI.BGM_CODE = BGTT.BGM_CODE
+				</FROM>
+				<ORDER>ORDER BY BGTT.BGM_SEQ</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="รหัสหมวดงบประมาณ" WIDTH="20"/>
+				<FIELD NAME="PBGI_QT_01" TYPE="NUMBER" LABEL="จำนวนไตรมาส 1" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_02" TYPE="NUMBER" LABEL="จำนวนไตรมาส 2" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_03" TYPE="NUMBER" LABEL="จำนวนไตรมาส 3" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_04" TYPE="NUMBER" LABEL="จำนวนไตรมาส 4" WIDTH="15"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="จำนวน" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="ราคาต่อหน่วย" WIDTH="15"/>
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="ความถี่/จำนวนครั้ง" WIDTH="10"/>
+				<FIELD NAME="PBGI_ASSET_TYPE" TYPE="TEXT" LABEL="ประเภทสินทรัพย์" WIDTH="10"/>
+				<FIELD NAME="PBGI_REPLACE" TYPE="NUMBER" LABEL="ทดแทนของเดิม" WIDTH="10"/>
+				<FIELD NAME="PBGI_ADDITION" TYPE="NUMBER" LABEL="เพิ่มเติม" WIDTH="10"/>
+				<FIELD NAME="PBGI_ACQUIRE" TYPE="NUMBER" LABEL="จัดหาใหม่" WIDTH="10"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="รวมเป็นเงิน" WIDTH="15"/>
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="เหตุผลความจำเป็น" WIDTH="4000"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<DATA-GRIDS>
+		<DATA-GRID ID="GRID-EQUIPT-BUDGET">
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,PBDG_ID" DETAIL-FIELDS="PROJ_ID,PBDG_ID"/>
+			<UNIQ-CHECK CHECK-FIELDS="BGM_CODE" MESSAGE="pwbg.bgm_code duplicate !"></UNIQ-CHECK>
+			<GRID-LIST DATAID="DS-PROJECT_BUDGET_ITEMS" EDIT="Y" DELETE="Y" CLASS="table-primary">
+				<KEYFIELDS>PROJ_ID,BGM_CODE</KEYFIELDS>
+				<TITLES>
+					<ROW>
+						<FIELD NAME="BGM_CODE" LABEL="pbgz.bgm_code" WIDTH="10em" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_NAME" LABEL="pbgz.bgm_name" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_BUTGETS" LABEL="pbgz.budget" ALIGN="center" COLS-SPAN="5"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_FREQ" LABEL="pbgz.freq" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_ACQUIRE" LABEL="pbgz.acquire" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					</ROW>
+				</TITLES>
+
+				<FIELDS>
+					<FIELD NAME="BGM_CODE" LABEL="pwbg.bgm_code" WIDTH="15em" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="BGM_NAME" LABEL="pwbg.bgm_name" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="PBGI_FREQ" LABEL="pbgz.freq" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_ACQUIRE" LABEL="pbgz.acquire" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+					<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					<COMMAND-BUTTONS>
+						<BUTTONS-FILTER>
+							<EDIT><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></EDIT>
+							<DELETE><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></DELETE>
+							<VIEW><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></VIEW>
+						</BUTTONS-FILTER>
+					</COMMAND-BUTTONS>
+				</FIELDS>
+				<FOOTER SHOW="Y"/>
+				<SCRIPT>
+					<INITIALIZE>
+						<![CDATA[
+						(ctx)=> {
+						    ctx.sum_of = {};
+							console.log("init grid-budget");
+							const fieldFormat = (field,value,row) => {
+								if (row["node_type"] === "D" || field === "pbgi_total") {
+									return formatNumber(value, 0);
+								} else {
+									return  "";
+								}
+							}
+
+							const summary = (field, data) => {
+								let total = 0;
+								for (const row of data) {
+									total += (+row[field])||0;
+								}
+								ctx.sum_of[field] = total;
+
+								if (ctx.$dataGrid && ctx.$dataGrid.load && !ctx.$dataGrid.reload) {
+									ctx.$dataGrid.reload = true;
+									for (let id=data.length-1; id>=0; id--) {
+										let row = data[id];
+										if (row["node_type"] === "C") {
+											let grpTotal = 0;
+											let mainNode = row["bgm_code"];
+											let nodes = [];
+											nodes.push($$("main_node="+mainNode,data));
+											for (let node of nodes.flat()) {
+												grpTotal += +node[field];
+											}
+											data[id][field] = grpTotal;
+										}
+									}
+									ctx.$dataGrid.load(data);
+									ctx.$dataGrid.reload = false;
+								}
+
+								return formatNumber(total,0);
+							}
+
+							const fieldList = ["pbgi_freq","pbgi_qty","pbgi_acquire","pbgi_cost","pbgi_total"];
+							for (let field of fieldList) {
+								let column = $$(`field=${field}`,ctx.gridColumn.flat());
+								column.formatter = (value,row) => {
+									return fieldFormat(field, value, row);
+								}
+								column.footerFormatter = (data)=>{
+									return summary(field,data);
+								}
+							}
+
+							ctx.option.rowStyle = function (row, index) {
+								if (row["node_type"] === "C") {
+									return {classes : `group-level-${row["node_level"]}`};
+								}
+								return {}; // Default style for other rows
+							}
+
+						}
+						]]>
+					</INITIALIZE>
+				</SCRIPT>
+			</GRID-LIST>
+
+			<GRID-EDITOR DATAID="DS-PROJECT_BUDGET_ITEMS">
+				<FIELDS>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="BGM_NAME" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-BUDGET-03" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div><label class="offset-${data.node_level}">[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="PBGI_FREQ" CAPTION="pbgz.freq" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_QTY" CAPTION="pbgz.qty" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"  CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_ACQUIRE" CAPTION="pbgz.acquire" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_COST" CAPTION="pbgz.cost" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="pbgz.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT CLASS="block-layout-form">
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="16"/>
+					</ROW>
+					<ROW ID="ROW-BUDGET-DATA">
+						<FIELD NAME="PBGI_FREQ" LAYOUT_WIDTH="3" OFFSET="6"/>
+						<FIELD NAME="PBGI_QTY" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_ACQUIRE" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_COST" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 350px"></div>]]>
+					</ROW>
+				</LAYOUT>
+				<SCRIPT>
+					<INITIALIZE><![CDATA[
+						console.log("sum budget value");
+						let budgetField = $$("input.budget-data");
+						const sumBudget = ()=>{
+							$$("PBGI_TOTAL").setValue(budgetField.multiply());
+						}
+						budgetField.on("change",sumBudget);
+						]]></INITIALIZE>
+				</SCRIPT>
+			</GRID-EDITOR>
+		</DATA-GRID>
+	</DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt06/view/frm/grids/grid-manage-budget.frml b/DevResources/full-examples/bdgt06/view/frm/grids/grid-manage-budget.frml
new file mode 100644
index 0000000..532e586
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/frm/grids/grid-manage-budget.frml
@@ -0,0 +1,222 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-PROJECT_BUDGET_ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT BGTT.BGM_CODE
+					, BGTT.BGM_NAME
+					, BGTT.BGM_UNIT
+					, BGTT.BGM_UNIT_RATE
+					, BGTT.NODE_LEVEL
+					, BGTT.BGM_SEQ
+					, BGTT.EXP_TYPE
+					, BGTT.MAIN_NODE
+					, BGTT.NODE_TYPE
+					, PBGI.PBGI_QTY
+					, PBGI.PBGI_FREQ
+					, PBGI.PBGI_COST
+					, PBGI.PBGI_ACQUIRE
+					, PBGI.PBGI_TOTAL
+				</SELECT>
+				<FROM>
+					FROM BGT.V_BUDGET_TREE BGTT
+					INNER JOIN (SELECT DISTINCT BGDM.BGM_CODE
+					FROM BUD.BUDGET_M BGDM
+					INNER JOIN BUD.BUDGET_M BGDH ON BGDM.BGM_CODE = BGDH.BGM_CODE
+					START WITH BGDM.BGM_CODE IN (SELECT PBGI.BGM_CODE FROM BGT.PROJECT_BUDGET_ITEMS PBGI WHERE PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID)
+					CONNECT BY PRIOR BGDH.BGM_MAIN_NODE = BGDH.BGM_CODE) FLTR ON FLTR.BGM_CODE = BGTT.BGM_CODE
+					LEFT OUTER JOIN BGT.PROJECT_BUDGET_ITEMS PBGI ON PBGI.BGM_CODE = BGTT.BGM_CODE AND PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID
+				</FROM>
+				<ORDER>ORDER BY BGTT.BGM_SEQ</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="รหัสหมวดงบประมาณ" WIDTH="20"/>
+
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="จำนวนครั้ง" WIDTH="10"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="จำนวนคน" WIDTH="10"/>
+				<FIELD NAME="PBGI_ACQUIRE" TYPE="NUMBER" LABEL="จำนวนชั่วโมง" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="อัตรา" WIDTH="15"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="รวมเป็นเงิน" WIDTH="15"/>
+
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="เหตุผลความจำเป็น" WIDTH="4000"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<DATA-GRIDS>
+		<DATA-GRID ID="GRID-WORK-BUDGET">
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,PBDG_ID" DETAIL-FIELDS="PROJ_ID,PBDG_ID"/>
+			<UNIQ-CHECK CHECK-FIELDS="BGM_CODE" MESSAGE="pwbg.bgm_code duplicate !"></UNIQ-CHECK>
+			<GRID-LIST DATAID="DS-PROJECT_BUDGET_ITEMS" EDIT="Y" DELETE="Y" CLASS="table-primary">
+				<KEYFIELDS>PROJ_ID,BGM_CODE</KEYFIELDS>
+				<TITLES>
+					<ROW>
+						<FIELD NAME="BGM_CODE" LABEL="pbgz.bgm_code" WIDTH="10em" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_NAME" LABEL="pbgz.bgm_name" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_BUTGETS" LABEL="pbgz.budget" ALIGN="center" COLS-SPAN="5"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_FREQ" LABEL="pbgz.freq" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_ACQUIRE" LABEL="pbgz.acquire" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					</ROW>
+				</TITLES>
+
+				<FIELDS>
+					<FIELD NAME="BGM_CODE" LABEL="pwbg.bgm_code" WIDTH="15em" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="BGM_NAME" LABEL="pwbg.bgm_name" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="PBGI_FREQ" LABEL="pbgz.freq" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_ACQUIRE" LABEL="pbgz.acquire" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+					<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					<COMMAND-BUTTONS>
+						<BUTTONS-FILTER>
+							<EDIT><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></EDIT>
+							<DELETE><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></DELETE>
+							<VIEW><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></VIEW>
+						</BUTTONS-FILTER>
+					</COMMAND-BUTTONS>
+				</FIELDS>
+				<FOOTER SHOW="Y"/>
+				<SCRIPT>
+					<INITIALIZE>
+						<![CDATA[
+						(ctx)=> {
+							ctx.sum_of = {};
+							console.log("init grid-budget");
+							const fieldFormat = (field,value,row) => {
+								if (row["node_type"] === "D" || field === "pbgi_total") {
+									return formatNumber(value, 0);
+								} else {
+									return  "";
+								}
+							}
+
+							const summary = (field, data) => {
+								let total = 0;
+								for (const row of data) {
+									total += (+row[field])||0;
+								}
+								ctx.sum_of[field] = total;
+
+								if (ctx.$dataGrid && ctx.$dataGrid.load && !ctx.$dataGrid.reload) {
+									ctx.$dataGrid.reload = true;
+									for (let id=data.length-1; id>=0; id--) {
+										let row = data[id];
+										if (row["node_type"] === "C") {
+											let grpTotal = 0;
+											let mainNode = row["bgm_code"];
+											let nodes = [];
+											nodes.push($$("main_node="+mainNode,data));
+											for (let node of nodes.flat()) {
+												grpTotal += +node[field];
+											}
+											data[id][field] = grpTotal;
+										}
+									}
+									ctx.$dataGrid.load(data);
+									ctx.$dataGrid.reload = false;
+								}
+
+								return formatNumber(total,0);
+							}
+
+							const fieldList = ["pbgi_freq","pbgi_qty","pbgi_acquire","pbgi_cost","pbgi_total"];
+							for (let field of fieldList) {
+								let column = $$(`field=${field}`,ctx.gridColumn.flat());
+								column.formatter = (value,row) => {
+									return fieldFormat(field, value, row);
+								}
+								column.footerFormatter = (data)=>{
+									return summary(field,data);
+								}
+							}
+
+							ctx.option.rowStyle = function (row, index) {
+								if (row["node_type"] === "C") {
+									return {classes : `group-level-${row["node_level"]}`};
+								}
+								return {}; // Default style for other rows
+							}
+
+						}
+						]]>
+					</INITIALIZE>
+				</SCRIPT>
+			</GRID-LIST>
+
+			<GRID-EDITOR DATAID="DS-PROJECT_BUDGET_ITEMS">
+				<FIELDS>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="BGM_NAME" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-BUDGET-02" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div><label class="offset-${data.node_level}">[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="PBGI_FREQ" CAPTION="pbgz.freq" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_QTY" CAPTION="pbgz.qty" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"  CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_ACQUIRE" CAPTION="pbgz.acquire" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_COST" CAPTION="pbgz.cost" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="pbgz.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT CLASS="block-layout-form">
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="16"/>
+					</ROW>
+					<ROW ID="ROW-BUDGET-DATA">
+						<FIELD NAME="PBGI_FREQ" LAYOUT_WIDTH="3" OFFSET="6"/>
+						<FIELD NAME="PBGI_QTY" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_ACQUIRE" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_COST" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 350px"></div>]]>
+					</ROW>
+				</LAYOUT>
+				<SCRIPT>
+					<INITIALIZE><![CDATA[
+						console.log("sum budget value");
+						let budgetField = $$("input.budget-data");
+						const sumBudget = ()=>{
+							$$("PBGI_TOTAL").setValue(budgetField.multiply());
+						}
+						budgetField.on("change",sumBudget);
+						]]></INITIALIZE>
+				</SCRIPT>
+			</GRID-EDITOR>
+		</DATA-GRID>
+	</DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt06/view/frm/grids/grid-proj-budget.frml b/DevResources/full-examples/bdgt06/view/frm/grids/grid-proj-budget.frml
new file mode 100644
index 0000000..f714ac1
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/frm/grids/grid-proj-budget.frml
@@ -0,0 +1,213 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-PROJECT_BUDGET_ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT BGTT.BGM_CODE
+							, BGTT.BGM_NAME
+							, BGTT.BGM_UNIT
+							, BGTT.BGM_UNIT_RATE
+							, BGTT.NODE_LEVEL
+							, BGTT.BGM_SEQ
+							, BGTT.EXP_TYPE
+							, BGTT.MAIN_NODE
+							, BGTT.NODE_TYPE
+							, PBGI.PBGI_QTY
+							, PBGI.PBGI_FREQ
+							, PBGI.PBGI_COST
+							, PBGI.PBGI_TOTAL
+				</SELECT>
+				<FROM>
+					FROM BGT.V_BUDGET_TREE BGTT
+						INNER JOIN (SELECT DISTINCT BGDM.BGM_CODE
+									  FROM BUD.BUDGET_M BGDM
+									       INNER JOIN BUD.BUDGET_M BGDH ON BGDM.BGM_CODE = BGDH.BGM_CODE
+										   START WITH BGDM.BGM_CODE IN (SELECT PBGI.BGM_CODE FROM BGT.PROJECT_BUDGET_ITEMS PBGI WHERE PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID)
+									       CONNECT BY PRIOR BGDH.BGM_MAIN_NODE = BGDH.BGM_CODE) FLTR ON FLTR.BGM_CODE = BGTT.BGM_CODE
+						LEFT OUTER JOIN BGT.PROJECT_BUDGET_ITEMS PBGI ON PBGI.BGM_CODE = BGTT.BGM_CODE AND PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID
+				</FROM>
+				<ORDER>ORDER BY BGTT.BGM_SEQ</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="รหัสหมวดงบประมาณ" WIDTH="20"/>
+
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="จำนวนครั้ง" WIDTH="10"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="จำนวนคน" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="อัตรา" WIDTH="15"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="รวมเป็นเงิน" WIDTH="15"/>
+
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="เหตุผลความจำเป็น" WIDTH="4000"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<DATA-GRIDS>
+		<DATA-GRID ID="GRID-WORK-BUDGET">
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,PBDG_ID" DETAIL-FIELDS="PROJ_ID,PBDG_ID"/>
+			<UNIQ-CHECK CHECK-FIELDS="BGM_CODE" MESSAGE="pwbg.bgm_code duplicate !"></UNIQ-CHECK>
+			<GRID-LIST DATAID="DS-PROJECT_BUDGET_ITEMS" EDIT="Y" DELETE="Y" CLASS="table-primary">
+				<KEYFIELDS>PROJ_ID,BGM_CODE</KEYFIELDS>
+				<TITLES>
+					<ROW>
+						<FIELD NAME="BGM_CODE" LABEL="plcbg.bgm_code" WIDTH="10em" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_NAME" LABEL="plcbg.bgm_name" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_BUTGETS" LABEL="plcbg.budget" ALIGN="center" COLS-SPAN="4"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_QTY" LABEL="plcbg.qty" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_FREQ" LABEL="plcbg.freq" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_COST" LABEL="plcbg.cost" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_TOTAL" LABEL="plcbg.total" WIDTH="8em" ALIGN="right"/>
+					</ROW>
+				</TITLES>
+
+				<FIELDS>
+					<FIELD NAME="BGM_CODE" LABEL="pwbg.bgm_code" WIDTH="15em" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="BGM_NAME" LABEL="pwbg.bgm_name" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="PBGI_QTY" LABEL="plcbg.qty" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_FREQ" LABEL="plcbg.freq" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_COST" LABEL="plcbg.cost" WIDTH="6em" ALIGN="right"/>
+					<FIELD NAME="PBGI_TOTAL" LABEL="plcbg.total" WIDTH="8em" ALIGN="right"/>
+					<COMMAND-BUTTONS>
+						<BUTTONS-FILTER>
+							<EDIT><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></EDIT>
+							<DELETE><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></DELETE>
+							<VIEW><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></VIEW>
+						</BUTTONS-FILTER>
+					</COMMAND-BUTTONS>
+				</FIELDS>
+				<FOOTER SHOW="Y"/>
+				<SCRIPT>
+					<INITIALIZE>
+						<![CDATA[
+						(ctx)=> {
+						    ctx.sum_of = {};
+							console.log("init grid-budget");
+							const fieldFormat = (field,value,row) => {
+								return (row["node_type"] === "D" || field === "pbgi_total") ? formatNumber(value, 0) : "";
+							}
+
+							const summary = (field, data) => {
+								let total = 0;
+								for (const row of data) {
+									if (row["node_type"] === "D") {
+										total += (strToFloat(row[field])) || 0;
+									}
+								}
+								ctx.sum_of[field] = total;
+
+								if (ctx.$dataGrid && ctx.$dataGrid.load && !ctx.$dataGrid.reload) {
+									ctx.$dataGrid.reload = true;
+									for (let id=data.length-1; id>=0; id--) {
+										let row = data[id];
+										if (row["node_type"] === "C") {
+											let grpTotal = 0;
+											let mainNode = row["bgm_code"];
+											let nodes = [];
+											nodes.push($$("main_node="+mainNode,data));
+											for (let node of nodes.flat()) {
+												grpTotal += +node[field];
+											}
+											data[id][field] = grpTotal;
+										}
+									}
+									ctx.$dataGrid.load(data);
+									ctx.$dataGrid.reload = false;
+								}
+
+								return formatNumber(total,0);
+							}
+
+							const fieldList = ["pbgi_freq","pbgi_qty","pbgi_cost","pbgi_total"];
+							for (let field of fieldList) {
+								let column = $$(`field=${field}`,ctx.gridColumn.flat());
+								column.formatter = (value,row) => {
+									return fieldFormat(field, value, row);
+								}
+								column.footerFormatter =function (data) {
+									return summary(field,data);
+								}
+							}
+
+							ctx.option.rowStyle = function (row, index) {
+								if (row["node_type"] === "C") {
+									return {classes : `group-level-${row["node_level"]}`};
+								}
+								return {}; // Default style for other rows
+							}
+						}
+						]]>
+					</INITIALIZE>
+				</SCRIPT>
+			</GRID-LIST>
+
+			<GRID-EDITOR DATAID="DS-PROJECT_BUDGET_ITEMS">
+				<FIELDS>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="BGM_NAME" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="NODE_TYPE" INPUTTYPE="HIDDEN" VALUE="D"/>
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-BUDGET-02-BDGT" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									return $(`<div><label class="offset-${data.node_level}">[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="PBGI_QTY" CAPTION="plcbg.qty" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"  CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_FREQ" CAPTION="plcbg.freq" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_COST" CAPTION="plcbg.cost" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="plcbg.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT CLASS="block-layout-form">
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="16"/>
+					</ROW>
+					<ROW ID="ROW-BUDGET-DATA">
+						<FIELD NAME="PBGI_QTY" LAYOUT_WIDTH="3" OFFSET="6"/>
+						<FIELD NAME="PBGI_FREQ" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_COST" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 350px"></div>]]>
+					</ROW>
+				</LAYOUT>
+				<SCRIPT>
+					<INITIALIZE><![CDATA[
+						console.log("sum budget value");
+						let budgetField = $$("input.budget-data");
+						const sumBudget = ()=>{
+							$$("PBGI_TOTAL").setValue(budgetField.multiply());
+						}
+						budgetField.on("change",sumBudget);
+						]]></INITIALIZE>
+				</SCRIPT>
+			</GRID-EDITOR>
+		</DATA-GRID>
+	</DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt06/view/frm/grids/grid-routine-budget.frml b/DevResources/full-examples/bdgt06/view/frm/grids/grid-routine-budget.frml
new file mode 100644
index 0000000..24a0aad
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/frm/grids/grid-routine-budget.frml
@@ -0,0 +1,222 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-PROJECT_BUDGET_ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT BGTT.BGM_CODE
+							, BGTT.BGM_NAME
+							, BGTT.BGM_UNIT
+							, BGTT.BGM_UNIT_RATE
+							, BGTT.NODE_LEVEL
+							, BGTT.BGM_SEQ
+							, BGTT.EXP_TYPE
+							, BGTT.MAIN_NODE
+							, BGTT.NODE_TYPE
+							, PBGI.PBGI_QTY
+							, PBGI.PBGI_FREQ
+							, PBGI.PBGI_COST
+							, PBGI.PBGI_ACQUIRE
+							, PBGI.PBGI_TOTAL
+				</SELECT>
+				<FROM>
+					FROM BGT.V_BUDGET_TREE BGTT
+						INNER JOIN (SELECT DISTINCT BGDM.BGM_CODE
+									  FROM BUD.BUDGET_M BGDM
+									       INNER JOIN BUD.BUDGET_M BGDH ON BGDM.BGM_CODE = BGDH.BGM_CODE
+										   START WITH BGDM.BGM_CODE IN (SELECT PBGI.BGM_CODE FROM BGT.PROJECT_BUDGET_ITEMS PBGI WHERE PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID)
+									       CONNECT BY PRIOR BGDH.BGM_MAIN_NODE = BGDH.BGM_CODE) FLTR ON FLTR.BGM_CODE = BGTT.BGM_CODE
+						LEFT OUTER JOIN BGT.PROJECT_BUDGET_ITEMS PBGI ON PBGI.BGM_CODE = BGTT.BGM_CODE AND PBGI.PROJ_ID = :PROJ_ID AND PBGI.PBDG_ID = :PBDG_ID
+				</FROM>
+				<ORDER>ORDER BY BGTT.BGM_SEQ</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="รหัสหมวดงบประมาณ" WIDTH="20"/>
+
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="จำนวนครั้ง" WIDTH="10"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="จำนวนคน" WIDTH="10"/>
+				<FIELD NAME="PBGI_ACQUIRE" TYPE="NUMBER" LABEL="จำนวนชั่วโมง" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="อัตรา" WIDTH="15"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="รวมเป็นเงิน" WIDTH="15"/>
+
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="เหตุผลความจำเป็น" WIDTH="4000"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<DATA-GRIDS>
+		<DATA-GRID ID="GRID-WORK-BUDGET">
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,PBDG_ID" DETAIL-FIELDS="PROJ_ID,PBDG_ID"/>
+			<UNIQ-CHECK CHECK-FIELDS="BGM_CODE" MESSAGE="pwbg.bgm_code duplicate !"></UNIQ-CHECK>
+			<GRID-LIST DATAID="DS-PROJECT_BUDGET_ITEMS" EDIT="Y" DELETE="Y" CLASS="table-primary">
+				<KEYFIELDS>PROJ_ID,BGM_CODE</KEYFIELDS>
+				<TITLES>
+					<ROW>
+						<FIELD NAME="BGM_CODE" LABEL="pbgz.bgm_code" WIDTH="10em" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_NAME" LABEL="pbgz.bgm_name" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_BUTGETS" LABEL="pbgz.budget" ALIGN="center" COLS-SPAN="5"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_FREQ" LABEL="pbgz.freq" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_ACQUIRE" LABEL="pbgz.acquire" WIDTH="5em" ALIGN="right"/>
+						<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					</ROW>
+				</TITLES>
+
+				<FIELDS>
+					<FIELD NAME="BGM_CODE" LABEL="pwbg.bgm_code" WIDTH="15em" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="BGM_NAME" LABEL="pwbg.bgm_name" ALIGN="left">
+						<DATA-FORMATTER>
+							<![CDATA[ (value,row,idx)=>{return $(`<div class="col offset-${row["node_level"]}">${value}</div>`);}]]>
+						</DATA-FORMATTER>
+					</FIELD>
+					<FIELD NAME="PBGI_FREQ" LABEL="pbgz.freq" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_QTY" LABEL="pbgz.qty" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_ACQUIRE" LABEL="pbgz.acquire" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_COST" LABEL="pbgz.cost" WIDTH="6em" ALIGN="right"/>
+					<FIELD NAME="PBGI_TOTAL" LABEL="pbgz.total" WIDTH="8em" ALIGN="right"/>
+					<COMMAND-BUTTONS>
+						<BUTTONS-FILTER>
+							<EDIT><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></EDIT>
+							<DELETE><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></DELETE>
+							<VIEW><![CDATA[({$ctx,row})=>{return row["node_type"] !== "C"}]]></VIEW>
+						</BUTTONS-FILTER>
+					</COMMAND-BUTTONS>
+				</FIELDS>
+				<FOOTER SHOW="Y"/>
+				<SCRIPT>
+					<INITIALIZE>
+						<![CDATA[
+						(ctx)=> {
+						    ctx.sum_of = {};
+							console.log("init grid-budget");
+							const fieldFormat = (field,value,row) => {
+								if (row["node_type"] === "D" || field === "pbgi_total") {
+									return formatNumber(value, 0);
+								} else {
+									return  "";
+								}
+							}
+
+							const summary = (field, data) => {
+								let total = 0;
+								for (const row of data) {
+									total += (+row[field])||0;
+								}
+								ctx.sum_of[field] = total;
+
+								if (ctx.$dataGrid && ctx.$dataGrid.load && !ctx.$dataGrid.reload) {
+									ctx.$dataGrid.reload = true;
+									for (let id=data.length-1; id>=0; id--) {
+										let row = data[id];
+										if (row["node_type"] === "C") {
+											let grpTotal = 0;
+											let mainNode = row["bgm_code"];
+											let nodes = [];
+											nodes.push($$("main_node="+mainNode,data));
+											for (let node of nodes.flat()) {
+												grpTotal += +node[field];
+											}
+											data[id][field] = grpTotal;
+										}
+									}
+									ctx.$dataGrid.load(data);
+									ctx.$dataGrid.reload = false;
+								}
+
+								return formatNumber(total,0);
+							}
+
+							const fieldList = ["pbgi_freq","pbgi_qty","pbgi_acquire","pbgi_cost","pbgi_total"];
+							for (let field of fieldList) {
+								let column = $$(`field=${field}`,ctx.gridColumn.flat());
+								column.formatter = (value,row) => {
+									return fieldFormat(field, value, row);
+								}
+								column.footerFormatter = (data)=>{
+									return summary(field,data);
+								}
+							}
+
+							ctx.option.rowStyle = function (row, index) {
+								if (row["node_type"] === "C") {
+									return {classes : `group-level-${row["node_level"]}`};
+								}
+								return {}; // Default style for other rows
+							}
+
+						}
+						]]>
+					</INITIALIZE>
+				</SCRIPT>
+			</GRID-LIST>
+
+			<GRID-EDITOR DATAID="DS-PROJECT_BUDGET_ITEMS">
+				<FIELDS>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="BGM_NAME" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-BUDGET-02" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div><label class="offset-${data.node_level}">[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+
+					<FIELD NAME="PBGI_FREQ" CAPTION="pbgz.freq" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_QTY" CAPTION="pbgz.qty" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"  CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_ACQUIRE" CAPTION="pbgz.acquire" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_COST" CAPTION="pbgz.cost" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" CLASS-NAME="budget-data"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="pbgz.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT CLASS="block-layout-form">
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="16"/>
+					</ROW>
+					<ROW ID="ROW-BUDGET-DATA">
+						<FIELD NAME="PBGI_FREQ" LAYOUT_WIDTH="3" OFFSET="6"/>
+						<FIELD NAME="PBGI_QTY" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_ACQUIRE" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_COST" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 350px"></div>]]>
+					</ROW>
+				</LAYOUT>
+				<SCRIPT>
+					<INITIALIZE><![CDATA[
+						console.log("sum budget value");
+						let budgetField = $$("input.budget-data");
+						const sumBudget = ()=>{
+							$$("PBGI_TOTAL").setValue(budgetField.multiply());
+						}
+						budgetField.on("change",sumBudget);
+						]]></INITIALIZE>
+				</SCRIPT>
+			</GRID-EDITOR>
+		</DATA-GRID>
+	</DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt06/view/frm/grids/grid-stratigy-item.frml b/DevResources/full-examples/bdgt06/view/frm/grids/grid-stratigy-item.frml
new file mode 100644
index 0000000..c581893
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/frm/grids/grid-stratigy-item.frml
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+    <DATASETS>
+        <DATASET ID="DS-PROJECT-STTGYS-ITEMS">
+            <SCHEMA>APP</SCHEMA>
+            <TABLENAME>PROJECT_STTGYS_ITEMS</TABLENAME>
+            <KEYFIELDS>PROJ_ID,PSTG_CODE,PSTI_GROUP</KEYFIELDS>
+            <SQL>
+                <SELECT>
+                    SELECT PSTI.PROJ_ID
+                         , PSTI.PSTG_CODE
+                         , PSTI.PSTI_GROUP
+                         , RFGP.RFC_DESC GROUP_DESC
+                         , PSTI.PSTI_CODE
+                         , RFCI.RFC_DESC ITEM_DESC
+                         , PSTI_DETAIL
+                </SELECT>
+                <FROM>FROM PROJECT_STTGYS_ITEMS PSTI
+                        INNER JOIN BGT.REFER_CODE RFGP ON RFGP.RFG_GRP='STG-ITEMS' AND RFC.RFC_CODE=STTG.PSTI_CODE
+                        INNER JOIN BGT.REFER_CODE RFCI ON RFC.RFG_GRP=PSTI.PSTI_GROUP AND RFC.RFC_CODE=STTG.PSTI_CODE
+                </FROM>
+                <ORDER>ORDER BY PSTI_GROUP, PSTI_CODE</ORDER>
+            </SQL>
+            <FIELDS>
+                <FIELD NAME="PROJ_ID" TYPE="VARCHAR" WIDTH="50" LABEL="project.id" />
+                <FIELD NAME="PSTG_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="pstg.code" />
+                <FIELD NAME="PSTI_GROUP" TYPE="VARCHAR" WIDTH="15" LABEL="psti.group" />
+                <FIELD NAME="PSTI_CODE" TYPE="VARCHAR" WIDTH="15" LABEL="psti.code" />
+                <FIELD NAME="PSTI_DETAIL" TYPE="VARCHAR" WIDTH="250" LABEL="psti.detail" />
+                <FIELD NAME="CREATE_BY" TYPE="VARCHAR" WIDTH="50" LABEL="sys.create_by" />
+                <FIELD NAME="CREATE_TIME" TYPE="DATE" WIDTH="0" LABEL="sys.create_time" />
+                <FIELD NAME="UPDATE_BY" TYPE="VARCHAR" WIDTH="50" LABEL="sys.update_by" />
+                <FIELD NAME="UPDATE_TIME" TYPE="DATE" WIDTH="0" LABEL="sys.update_time" />
+            </FIELDS>
+        </DATASET>
+    </DATASETS>
+
+    <DATA-GRIDS>
+        <DATA-GRID ID="GRID-PROJECT-STTGYS-ITEMS">
+            <MASTER-DATA DATASET-ID="DS-PROJECT-STTGYS" MASTER-FIELDS="PROJ_ID,PSTG_CODE" DETAIL-FIELDS="PROJ_ID,PSTG_CODE"/>
+            <UNIQ-CHECK CHECK-FIELDS="PSTI_GROUP" MESSAGE="psti.group duplicate !"></UNIQ-CHECK>
+            <GRID-LIST DATAID="DS-PROJECT-STTGYS-ITEMS" EDIT="Y" DELETE="Y" ADD="Y">
+                <FIELDS>
+                    <FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+                    <FIELD NAME="GROUP_DESC" LABEL="psti.group" WIDTH="10em" ALIGN="left" />
+                    <FIELD NAME="ITEM_DESC" LABEL="psti.code" ALIGN="left" />
+                </FIELDS>
+            </GRID-LIST>
+            <GRID-EDITOR DATAID="DS-PROJECT-STTGYS-ITEMS">
+                <FIELDS>
+                    <FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN" />
+                    <FIELD NAME="PSTG_CODE" INPUTTYPE="HIDDEN" />
+                    <FIELD NAME="GROUP_DESC" INPUTTYPE="HIDDEN" />
+                    <FIELD NAME="ITEM_DESC" INPUTTYPE="HIDDEN" />
+                    <FIELD NAME="PSTI_GROUP" CAPTION="psti.group" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+                        <AJAX-OPTION URL="/api-data.jbx" DATASET="DS-STTGY-GROUP-02" VALUE-FIELD="RFC_CODE" TEXT-FIELD="RFC_DESC" PARAMETERS="RFG_GRP=PSTI_GROUP" CHILD-FIELD="PSTI_CODE" ON-EMPTY="LOAD-ALL">
+                            <UPDATE-FIELDS>
+                                <FIELD TARGET="GROUP_DESC" SRC="RFC_DESC"/>
+                            </UPDATE-FIELDS>
+                        </AJAX-OPTION>
+                    </FIELD>
+                    <FIELD NAME="PSTI_CODE" CAPTION="psti.code" INPUTTYPE="COMBOBOX" REQUIRE="Y">
+                        <AJAX-OPTION URL="/api-data.jbx" DATASET="DS-STTGY-ITEMS-02" VALUE-FIELD="RFC_CODE" TEXT-FIELD="RFC_DESC" PARAMETERS="RFG_GRP=PSTI_GROUP">
+                            <UPDATE-FIELDS>
+                                <FIELD TARGET="ITEM_DESC" SRC="RFC_DESC"/>
+                            </UPDATE-FIELDS>
+                        </AJAX-OPTION>
+                    </FIELD>
+                    <FIELD NAME="PSTI_DETAIL" CAPTION="psti.detail" INPUTTYPE="TEXTAREA" ROWS="3" />
+                </FIELDS>
+                <LAYOUT CLASS="block-layout-form">
+                    <ROW>
+                        <FIELD NAME="PSTI_GROUP" LAYOUT_WIDTH="6"/>
+                        <FIELD NAME="PSTI_CODE" LAYOUT_WIDTH="18"  />
+                    </ROW>
+                    <ROW>
+                        <FIELD NAME="PSTI_DETAIL" LAYOUT_WIDTH="18" OFFSET="6" />
+                    </ROW>
+                    <ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 200px"></div>]]>
+					</ROW>
+                </LAYOUT>
+            </GRID-EDITOR>
+        </DATA-GRID>
+    </DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt06/view/frm/grids/grid-stratigy.frml b/DevResources/full-examples/bdgt06/view/frm/grids/grid-stratigy.frml
new file mode 100644
index 0000000..7fcc58e
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/frm/grids/grid-stratigy.frml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+    <DATASETS>
+        <DATASET ID="DS-PROJECT-STTGYS">
+            <SCHEMA>APP</SCHEMA>
+            <TABLENAME>PROJECT_STTGYS</TABLENAME>
+            <KEYFIELDS>PROJ_ID,PSTG_CODE</KEYFIELDS>
+            <SQL>
+                <SELECT>
+                    SELECT STTG.PROJ_ID
+                         , STTG.PSTG_CODE
+                         , RFC.RFC_DESC PSTG_DESC
+                         , STTG.PSTG_CONCEPT
+
+                </SELECT>
+                <FROM>FROM PROJECT_STTGYS STTG
+                           INNER JOIN BGT.REFER_CODE RFC ON RFC.RFG_GRP='STG-MAIN' AND RFC.RFC_CODE=STTG.PSTG_CODE
+                    </FROM>
+                <ORDER>ORDER BY PSTG_CODE</ORDER>
+            </SQL>
+            <FIELDS>
+                <FIELD NAME="PROJ_ID" TYPE="VARCHAR" WIDTH="50" LABEL="project.id" />
+                <FIELD NAME="PSTG_CODE" TYPE="VARCHAR" WIDTH="20" LABEL="pstg.code" />
+                <FIELD NAME="PSTG_CONCEPT" TYPE="VARCHAR" WIDTH="500" LABEL="pstg.concept" />
+                <FIELD NAME="CREATE_BY" TYPE="VARCHAR" WIDTH="50" LABEL="sys.create_by" />
+                <FIELD NAME="CREATE_TIME" TYPE="DATE" WIDTH="0" LABEL="sys.create_time" />
+                <FIELD NAME="UPDATE_BY" TYPE="VARCHAR" WIDTH="50" LABEL="sys.update_by" />
+                <FIELD NAME="UPDATE_TIME" TYPE="DATE" WIDTH="0" LABEL="sys.update_time" />
+            </FIELDS>
+        </DATASET>
+    </DATASETS>
+
+    <DATA-GRIDS>
+        <DATA-GRID ID="GRID-PROJECT-STTGYS">
+            <MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID" DETAIL-FIELDS="PROJ_ID"/>
+            <UNIQ-CHECK CHECK-FIELDS="PSTG_CODE" MESSAGE="pstg.code duplicate !"></UNIQ-CHECK>
+            <GRID-LIST DATAID="DS-PROJECT-STTGYS" EDIT="Y" DELETE="Y" ADD="Y">
+                <FIELDS>
+                    <FIELD NAME="$itemno" LABEL="no" ALIGN="right" WIDTH="5em"/>
+                    <FIELD NAME="PSTG_CODE" LABEL="pstg.code" WIDTH="12em" ALIGN="center" />
+                    <FIELD NAME="PSTG_DESC" LABEL="pstg.desc" ALIGN="left" />
+                </FIELDS>
+            </GRID-LIST>
+            <GRID-EDITOR DATAID="DS-PROJECT-STTGYS">
+                <FIELDS>
+                    <FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN" />
+                    <FIELD NAME="PSTG_CODE" CAPTION="pstg.desc" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+                        <LIST-OPTION TABLE="BGT.REFER_CODE" TEXT="#RFC_DESC" VALUE="RFC_CODE" FILTER="RFG_GRP='STG-MAIN'" FIRSTLIST="@{CAPTION}"/>
+                    </FIELD>
+                    <FIELD NAME="PSTG_CONCEPT" CAPTION="pstg.concept" INPUTTYPE="TEXTAREA" ROWS="2" />
+                    <FIELD NAME="GRID-STTGYS-ITEMS" INPUTTYPE="DATA-GRID" GRID-ID="GRID-PROJECT-STTGYS-ITEMS" CAPTION="psti.header"/>
+                </FIELDS>
+                <LAYOUT CLASS="block-layout-form">
+                    <ROW>
+                        <FIELD NAME="PSTG_CODE" LAYOUT_WIDTH="16" OFFSET="4" />
+                    </ROW>
+                    <SECTION>
+                        <HEADER CLASS="form-section-header col-24 mg-b-n30 mg-t-16 border-top-1">
+                        <![CDATA[<h4 class="ml-3 col-24">@M{pstg.header}</h4>]]>
+					</HEADER>
+                        <ROW>
+                            <FIELD NAME="GRID-STTGYS-ITEMS" LAYOUT_WIDTH="20" OFFSET="4"/>
+                        </ROW>
+                    </SECTION>
+                    <ROW>
+                        <FIELD NAME="PSTG_CONCEPT" LAYOUT_WIDTH="16" OFFSET="4" />
+                    </ROW>
+                    <ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 200px"></div>]]>
+					</ROW>
+                </LAYOUT>
+            </GRID-EDITOR>
+        </DATA-GRID>
+    </DATA-GRIDS>
+</FORMS>
diff --git a/DevResources/full-examples/bdgt06/view/frm/grids/grid-work-budget.frml b/DevResources/full-examples/bdgt06/view/frm/grids/grid-work-budget.frml
new file mode 100644
index 0000000..26b37e8
--- /dev/null
+++ b/DevResources/full-examples/bdgt06/view/frm/grids/grid-work-budget.frml
@@ -0,0 +1,174 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FORMS xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="xsd/#dynf_form_def.xsd">
+	<DATASETS>
+		<DATASET ID="DS-PROJECT_BUDGET_ITEMS">
+			<SCHEMA>APP</SCHEMA>
+			<TABLENAME>PROJECT_BUDGET_ITEMS</TABLENAME>
+			<KEYFIELDS>PROJ_ID,BGM_CODE,PBDG_ID</KEYFIELDS>
+			<SQL>
+				<SELECT>SELECT PROJ_ID
+					, PBDG_ID
+					, BGM_CODE
+				    , BUD.GET_BUDGET (BGM_CODE) BGM_NAME
+					, PBGI_QT_01
+					, PBGI_QT_02
+					, PBGI_QT_03
+					, PBGI_QT_04
+					, PBGI_QTY
+					, PBGI_COST
+					, PBGI_FREQ
+					, PBGI_ASSET_TYPE
+					, PBGI_REPLACE
+					, PBGI_ADDITION
+					, PBGI_ACQUIRE
+					, PBGI_TOTAL
+					, PBGI_REASON
+				</SELECT>
+				<FROM>FROM PROJECT_BUDGET_ITEMS</FROM>
+				<ORDER>ORDER BY PROJ_ID,BGM_CODE</ORDER>
+			</SQL>
+			<FIELDS>
+				<FIELD NAME="PROJ_ID" TYPE="TEXT" LABEL="รหัสอ้างอิงโครงการ" WIDTH="32"/>
+				<FIELD NAME="PBDG_ID" TYPE="TEXT" LABEL="รหัสงบประมาณโครงการ" WIDTH="32"/>
+				<FIELD NAME="BGM_CODE" TYPE="TEXT" LABEL="รหัสหมวดงบประมาณ" WIDTH="20"/>
+				<FIELD NAME="PBGI_QT_01" TYPE="NUMBER" LABEL="จำนวนไตรมาส 1" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_02" TYPE="NUMBER" LABEL="จำนวนไตรมาส 2" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_03" TYPE="NUMBER" LABEL="จำนวนไตรมาส 3" WIDTH="15"/>
+				<FIELD NAME="PBGI_QT_04" TYPE="NUMBER" LABEL="จำนวนไตรมาส 4" WIDTH="15"/>
+				<FIELD NAME="PBGI_QTY" TYPE="NUMBER" LABEL="จำนวน" WIDTH="10"/>
+				<FIELD NAME="PBGI_COST" TYPE="NUMBER" LABEL="ราคาต่อหน่วย" WIDTH="15"/>
+				<FIELD NAME="PBGI_FREQ" TYPE="NUMBER" LABEL="ความถี่/จำนวนครั้ง" WIDTH="10"/>
+				<FIELD NAME="PBGI_ASSET_TYPE" TYPE="TEXT" LABEL="ประเภทสินทรัพย์" WIDTH="10"/>
+				<FIELD NAME="PBGI_REPLACE" TYPE="NUMBER" LABEL="ทดแทนของเดิม" WIDTH="10"/>
+				<FIELD NAME="PBGI_ADDITION" TYPE="NUMBER" LABEL="เพิ่มเติม" WIDTH="10"/>
+				<FIELD NAME="PBGI_ACQUIRE" TYPE="NUMBER" LABEL="จัดหาใหม่" WIDTH="10"/>
+				<FIELD NAME="PBGI_TOTAL" TYPE="NUMBER" LABEL="รวมเป็นเงิน" WIDTH="15"/>
+				<FIELD NAME="PBGI_REASON" TYPE="TEXT" LABEL="เหตุผลความจำเป็น" WIDTH="4000"/>
+			</FIELDS>
+		</DATASET>
+	</DATASETS>
+
+	<DATA-GRIDS>
+		<DATA-GRID ID="GRID-WORK-BUDGET">
+			<MASTER-DATA DATASET-ID="DS-MASTER" MASTER-FIELDS="PROJ_ID,PBDG_ID" DETAIL-FIELDS="PROJ_ID,PBDG_ID"/>
+			<UNIQ-CHECK CHECK-FIELDS="BGM_CODE" MESSAGE="pwbg.bgm_code duplicate !"></UNIQ-CHECK>
+			<GRID-LIST DATAID="DS-PROJECT_BUDGET_ITEMS" EDIT="Y" DELETE="Y" CLASS="table-primary">
+				<KEYFIELDS>PROJ_ID,BGM_CODE</KEYFIELDS>
+				<TITLES>
+					<ROW>
+						<FIELD NAME="BGM_CODE" LABEL="pwbg.bgm_code" WIDTH="10em" ALIGN="center" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_NAME" LABEL="pwbg.bgm_name" ALIGN="left" ROWS-SPAN="2"/>
+						<FIELD NAME="BGM_QUOTERS" LABEL="pwbg.quoter" ALIGN="center" COLS-SPAN="4"/>
+						<FIELD NAME="PBGI_TOTAL" LABEL="pwbg.total" WIDTH="6em" ALIGN="right" ROWS-SPAN="2"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_QT_01" LABEL="1" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_QT_02" LABEL="2" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_QT_03" LABEL="3" WIDTH="6em" ALIGN="right"/>
+						<FIELD NAME="PBGI_QT_04" LABEL="4" WIDTH="6em" ALIGN="right"/>
+					</ROW>
+				</TITLES>
+				<FIELDS>
+					<FIELD NAME="BGM_CODE" LABEL="pwbg.bgm_code" WIDTH="15em" ALIGN="center"/>
+					<FIELD NAME="BGM_NAME" LABEL="pwbg.bgm_name" ALIGN="left"/>
+					<FIELD NAME="PBGI_QT_01" LABEL="pwbg.quotr_01" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_QT_02" LABEL="pwbg.quotr_02" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_QT_03" LABEL="pwbg.quotr_03" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_QT_04" LABEL="pwbg.quotr_04" WIDTH="5em" ALIGN="right"/>
+					<FIELD NAME="PBGI_TOTAL" LABEL="pwbg.total" WIDTH="10em" ALIGN="right"/>
+				</FIELDS>
+				<FOOTER SHOW="Y"/>
+				<SCRIPT>
+					<INITIALIZE>
+						<![CDATA[
+						(ctx)=> {
+						    ctx.sum_of = {};
+							console.log("init grid-budget");
+							const fieldFormat = (value) => {
+								return formatNumber(value, 0);
+							}
+							const summary = (field, data) => {
+								let total = 0;
+								for (const row of data) {
+									total += (+row[field])||0;
+								}
+								ctx.sum_of[field] = total;
+								return formatNumber(total,0);
+							}
+
+							const quoterFields = $$("field^pbgi_qt_",ctx.gridColumn.flat());
+							for (let field of quoterFields) {
+								field.formatter = fieldFormat;
+								let fieldName = field.field;
+								field.footerFormatter = (data)=>{
+									return summary(fieldName,data);
+								}
+							}
+
+							let fieldName = "pbgi_total";
+							$$("field=pbgi_total",ctx.gridColumn.flat()).formatter = fieldFormat;
+							$$("field=pbgi_total",ctx.gridColumn.flat()).footerFormatter = (data)=>{
+								return summary(fieldName,data);
+							};
+						}
+						]]>
+					</INITIALIZE>
+				</SCRIPT>
+			</GRID-LIST>
+
+			<GRID-EDITOR DATAID="DS-PROJECT_BUDGET_ITEMS">
+				<FIELDS>
+					<FIELD NAME="PROJ_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="PBDG_ID" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="BGM_NAME" INPUTTYPE="HIDDEN"/>
+					<FIELD NAME="VBGM_CODE" CAPTION="pwbg.bgm_code" INPUTTYPE="TEXT" READONLY="Y"/>
+					<FIELD NAME="BGM_CODE" CAPTION="pwbg.bgm_name" INPUTTYPE="COMBOBOX" REQUIRE="Y" EDIT-READONLY="Y">
+						<AJAX-OPTION URL="/api-data.jbx" DATASET="DS-BUDGET-01" VALUE-FIELD="BGM_CODE" TEXT-FIELD="BGM_NAME">
+							<UPDATE-FIELDS>
+								<FIELD SRC="BGM_CODE" TARGET="VBGM_CODE"></FIELD>
+								<FIELD SRC="BGM_NAME" TARGET="BGM_NAME"></FIELD>
+							</UPDATE-FIELDS>
+						</AJAX-OPTION>
+						<LIST-OPTION>
+							<FORMATTER><![CDATA[
+								(data) => {
+									console.log("call formater with ", data);
+									return $(`<div><label>[${data.bgm_code}]</label> : <label>${data.bgm_name}</label></div>`);
+								}
+								]]></FORMATTER>
+						</LIST-OPTION>
+					</FIELD>
+					<FIELD NAME="PBGI_QT_01" CAPTION="pwbg.quotr_01" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"/>
+					<FIELD NAME="PBGI_QT_02" CAPTION="pwbg.quotr_02" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"/>
+					<FIELD NAME="PBGI_QT_03" CAPTION="pwbg.quotr_03" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"/>
+					<FIELD NAME="PBGI_QT_04" CAPTION="pwbg.quotr_04" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0"/>
+					<FIELD NAME="PBGI_TOTAL" CAPTION="pwbg.total" INPUTTYPE="TEXT" DATATYPE="NUMBER" DECIMAL="0" READONLY="Y"/>
+				</FIELDS>
+				<LAYOUT CLASS="block-layout-form">
+					<ROW>
+						<FIELD NAME="VBGM_CODE" LAYOUT_WIDTH="6"/>
+						<FIELD NAME="BGM_CODE" LAYOUT_WIDTH="16"/>
+					</ROW>
+					<ROW>
+						<FIELD NAME="PBGI_QT_01" LAYOUT_WIDTH="3" OFFSET="6"/>
+						<FIELD NAME="PBGI_QT_02" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_QT_03" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_QT_04" LAYOUT_WIDTH="3"/>
+						<FIELD NAME="PBGI_TOTAL" LAYOUT_WIDTH="3"/>
+					</ROW>
+					<ROW TYPE="CONTENT">
+						<![CDATA[<div style="height: 350px"></div>]]>
+					</ROW>
+				</LAYOUT>
+				<SCRIPT>
+					<INITIALIZE><![CDATA[
+						const quoterTotal = ()=>{
+							$$("PBGI_TOTAL").setValue($$("^PBGI_QT_").sum());
+						}
+						$$("^PBGI_QT_").on("change",quoterTotal);
+						]]></INITIALIZE>
+				</SCRIPT>
+			</GRID-EDITOR>
+		</DATA-GRID>
+	</DATA-GRIDS>
+</FORMS>
diff --git a/build.gradle.kts b/build.gradle.kts
index 1abcc2c..75c14ee 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -115,4 +115,4 @@ tasks {
 //  publishPlugin {
 //    token.set(System.getenv("PUBLISH_TOKEN"))
 //  }
-}
\ No newline at end of file
+}
diff --git a/entities.json b/entities.json
new file mode 100644
index 0000000..4352d8c
--- /dev/null
+++ b/entities.json
@@ -0,0 +1,6 @@
+{
+  "people": [],
+  "projects": [
+    "Java"
+  ]
+}
\ No newline at end of file
diff --git a/mempalace.yaml b/mempalace.yaml
new file mode 100644
index 0000000..8176e1f
--- /dev/null
+++ b/mempalace.yaml
@@ -0,0 +1,10 @@
+wing: dynamicform
+rooms:
+- name: devresources
+  description: Files from DevResources/
+- name: gradle
+  description: Files from gradle/
+- name: src
+  description: Files from src/
+- name: general
+  description: Files that don't fit other rooms
diff --git a/src/main/java/com/sdk/dynform/tools/helper/DynFormCompletionContributor.java b/src/main/java/com/sdk/dynform/tools/helper/DynFormCompletionContributor.java
index bf32f8e..af1acc8 100644
--- a/src/main/java/com/sdk/dynform/tools/helper/DynFormCompletionContributor.java
+++ b/src/main/java/com/sdk/dynform/tools/helper/DynFormCompletionContributor.java
@@ -3,15 +3,22 @@ package com.sdk.dynform.tools.helper;
 import com.intellij.codeInsight.completion.*;
 import com.intellij.codeInsight.lookup.LookupElementBuilder;
 import com.intellij.patterns.PlatformPatterns;
+import com.intellij.patterns.XmlPatterns;
 import com.intellij.psi.*;
 import com.intellij.psi.util.PsiTreeUtil;
+import com.intellij.psi.xml.XmlAttribute;
+import com.intellij.psi.xml.XmlFile;
+import com.intellij.psi.xml.XmlTag;
 import com.intellij.util.ProcessingContext;
 import org.jetbrains.annotations.NotNull;
 
+import java.util.HashSet;
 import java.util.List;
+import java.util.Set;
 
 public class DynFormCompletionContributor extends CompletionContributor {
     public DynFormCompletionContributor() {
+        // Java completion
         extend(CompletionType.BASIC, PlatformPatterns.psiElement().withParent(PsiLiteralExpression.class),
                 new CompletionProvider<CompletionParameters>() {
                     @Override
@@ -27,7 +34,6 @@ public class DynFormCompletionContributor extends CompletionContributor {
                             PsiExpressionList argList = newExp.getArgumentList();
                             if (argList != null) {
                                 PsiExpression[] args = argList.getExpressions();
-                                // Suggest modules at index 3
                                 if (args.length >= 4 && args[3] == literal) {
                                     List<String> modules = DynFormPathUtils.getAllModules(position.getProject());
                                     for (String module : modules) {
@@ -35,7 +41,6 @@ public class DynFormCompletionContributor extends CompletionContributor {
                                                 .withIcon(com.intellij.icons.AllIcons.Nodes.Module));
                                     }
                                 }
-                                // Suggest frml files at index 4
                                 if (args.length >= 5 && args[4] == literal) {
                                     String moduleName = getArgumentValue(args, 3);
                                     if (moduleName != null) {
@@ -50,6 +55,191 @@ public class DynFormCompletionContributor extends CompletionContributor {
                         }
                     }
                 });
+
+        // XML completion for Field/Section NAME/ID/TARGET
+        extend(CompletionType.BASIC, XmlPatterns.psiElement()
+                        .inside(XmlPatterns.xmlAttributeValue()
+                                .withParent(XmlPatterns.xmlAttribute().withName("NAME", "ID", "TARGET")
+                                        .withParent(XmlPatterns.xmlTag().withName("FIELD", "SECTION")))),
+                new CompletionProvider<CompletionParameters>() {
+                    @Override
+                    protected void addCompletions(@NotNull CompletionParameters parameters,
+                                                  @NotNull ProcessingContext context,
+                                                  @NotNull CompletionResultSet resultSet) {
+                        PsiElement position = parameters.getPosition();
+                        XmlAttribute attr = PsiTreeUtil.getParentOfType(position, XmlAttribute.class);
+                        if (attr == null) return;
+
+                        if ("TARGET".equals(attr.getName())) {
+                            // เสนอฟิลด์ในฟอร์มปัจจุบัน
+                            XmlTag formContainer = PsiTreeUtil.getParentOfType(position, XmlTag.class);
+                            while (formContainer != null && !"FORM_ENTRY".equals(formContainer.getName()) && !"FORM_BROWSE".equals(formContainer.getName())) {
+                                formContainer = formContainer.getParentTag();
+                            }
+                            
+                            if (formContainer == null) {
+                                XmlFile file = (XmlFile) parameters.getOriginalFile();
+                                formContainer = file.getRootTag();
+                            }
+                            
+                            if (formContainer != null) {
+                                addFieldsInTagRecursive(formContainer, resultSet);
+                            }
+                        } else {
+                            // เสนอฟิลด์ภายใต้ LAYOUT container เดียวกัน
+                            XmlTag layoutTag = PsiTreeUtil.getParentOfType(position, XmlTag.class);
+                            while (layoutTag != null && !"LAYOUT".equals(layoutTag.getName())) {
+                                layoutTag = layoutTag.getParentTag();
+                            }
+                            if (layoutTag == null) return;
+                            XmlTag containerTag = layoutTag.getParentTag();
+                            if (containerTag == null) return;
+                            XmlTag fieldsTag = containerTag.findFirstSubTag("FIELDS");
+                            if (fieldsTag != null) {
+                                addFieldsInTagRecursive(fieldsTag, resultSet);
+                            }
+                        }
+                    }
+                });
+
+        // XML completion for Dataset ID
+        extend(CompletionType.BASIC, XmlPatterns.psiElement()
+                        .inside(XmlPatterns.xmlAttributeValue()
+                                .withParent(XmlPatterns.xmlAttribute().withName("DATAID", "DATASET", "DATASET-ID"))),
+                new CompletionProvider<CompletionParameters>() {
+                    @Override
+                    protected void addCompletions(@NotNull CompletionParameters parameters,
+                                                  @NotNull ProcessingContext context,
+                                                  @NotNull CompletionResultSet resultSet) {
+                        addDatasetsInFile(parameters.getOriginalFile(), resultSet);
+                        PsiFile ajaxFile = DynFormPathUtils.findAjaxXml(parameters.getOriginalFile());
+                        if (ajaxFile != null) {
+                            addDatasetsInFile(ajaxFile, resultSet);
+                        }
+                    }
+                });
+
+        // XML completion for SRC in UPDATE-FIELDS
+        extend(CompletionType.BASIC, XmlPatterns.psiElement()
+                        .inside(XmlPatterns.xmlAttributeValue()
+                                .withParent(XmlPatterns.xmlAttribute().withName("SRC")
+                                        .withParent(XmlPatterns.xmlTag().withName("FIELD")
+                                                .withParent(XmlPatterns.xmlTag().withName("UPDATE-FIELDS"))))),
+                new CompletionProvider<CompletionParameters>() {
+                    @Override
+                    protected void addCompletions(@NotNull CompletionParameters parameters,
+                                                  @NotNull ProcessingContext context,
+                                                  @NotNull CompletionResultSet resultSet) {
+                        PsiElement position = parameters.getPosition();
+                        XmlTag ajaxOptionTag = PsiTreeUtil.getParentOfType(position, XmlTag.class);
+                        while (ajaxOptionTag != null && !"AJAX-OPTION".equals(ajaxOptionTag.getName())) {
+                            ajaxOptionTag = ajaxOptionTag.getParentTag();
+                        }
+                        if (ajaxOptionTag == null) return;
+                        
+                        String datasetId = ajaxOptionTag.getAttributeValue("DATASET");
+                        if (datasetId == null) return;
+
+                        PsiFile ajaxFile = DynFormPathUtils.findAjaxXml(parameters.getOriginalFile());
+                        if (ajaxFile instanceof XmlFile xmlFile) {
+                            XmlTag rootTag = xmlFile.getRootTag();
+                            if (rootTag != null) {
+                                XmlTag datasetsContainer = rootTag.findFirstSubTag("DATASETS");
+                                if (datasetsContainer == null) datasetsContainer = rootTag;
+                                
+                                for (XmlTag datasetTag : datasetsContainer.findSubTags("DATASET")) {
+                                    if (datasetId.equals(datasetTag.getAttributeValue("ID"))) {
+                                        XmlTag fieldsTag = datasetTag.findFirstSubTag("FIELDS");
+                                        if (fieldsTag != null) {
+                                            addFieldsInTagRecursive(fieldsTag, resultSet);
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                });
+
+        // XML completion for GRID-ID
+        extend(CompletionType.BASIC, XmlPatterns.psiElement()
+                        .inside(XmlPatterns.xmlAttributeValue()
+                                .withParent(XmlPatterns.xmlAttribute().withName("GRID-ID"))),
+                new CompletionProvider<CompletionParameters>() {
+                    @Override
+                    protected void addCompletions(@NotNull CompletionParameters parameters,
+                                                  @NotNull ProcessingContext context,
+                                                  @NotNull CompletionResultSet resultSet) {
+                        addGridsInFileRecursive(parameters.getOriginalFile(), resultSet, new HashSet<>());
+                    }
+                });
+    }
+
+    private void addFieldsInTagRecursive(XmlTag container, @NotNull CompletionResultSet resultSet) {
+        for (XmlTag subTag : container.getSubTags()) {
+            if ("FIELD".equals(subTag.getName())) {
+                String name = subTag.getAttributeValue("NAME");
+                if (name != null && !name.isEmpty()) {
+                    resultSet.addElement(LookupElementBuilder.create(name)
+                            .withIcon(com.intellij.icons.AllIcons.Nodes.Field)
+                            .withTypeText(subTag.getAttributeValue("TYPE")));
+                }
+            } else {
+                if (("SECTION".equals(subTag.getName()) || "FIELDS".equals(subTag.getName())) && subTag.getAttributeValue("ID") != null) {
+                    String id = subTag.getAttributeValue("ID");
+                    resultSet.addElement(LookupElementBuilder.create(id)
+                            .withIcon(com.intellij.icons.AllIcons.Nodes.Package)
+                            .withItemTextForeground(java.awt.Color.BLUE));
+                }
+                addFieldsInTagRecursive(subTag, resultSet);
+            }
+        }
+    }
+
+    private void addDatasetsInFile(PsiFile file, @NotNull CompletionResultSet resultSet) {
+        if (!(file instanceof XmlFile xmlFile)) return;
+        XmlTag rootTag = xmlFile.getRootTag();
+        if (rootTag == null) return;
+        
+        XmlTag datasetsContainer = rootTag.findFirstSubTag("DATASETS");
+        if (datasetsContainer == null) datasetsContainer = rootTag;
+
+        for (XmlTag datasetTag : datasetsContainer.findSubTags("DATASET")) {
+            String id = datasetTag.getAttributeValue("ID");
+            if (id != null && !id.isEmpty()) {
+                resultSet.addElement(LookupElementBuilder.create(id)
+                        .withIcon(com.intellij.icons.AllIcons.Nodes.DataTables)
+                        .withTypeText(datasetTag.getAttributeValue("TABLENAME")));
+            }
+        }
+    }
+
+    private void addGridsInFileRecursive(PsiFile file, @NotNull CompletionResultSet resultSet, Set<PsiFile> visited) {
+        if (file == null || !visited.add(file)) return;
+        if (!(file instanceof XmlFile xmlFile)) return;
+        XmlTag rootTag = xmlFile.getRootTag();
+        if (rootTag == null) return;
+
+        XmlTag dataGridsTag = rootTag.findFirstSubTag("DATA-GRIDS");
+        if (dataGridsTag != null) {
+            for (XmlTag gridTag : dataGridsTag.findSubTags("DATA-GRID")) {
+                String id = gridTag.getAttributeValue("ID");
+                if (id != null && !id.isEmpty()) {
+                    resultSet.addElement(LookupElementBuilder.create(id)
+                            .withIcon(com.intellij.icons.AllIcons.Nodes.DataTables));
+                }
+            }
+        }
+
+        XmlTag includesTag = rootTag.findFirstSubTag("INCLUDES");
+        if (includesTag != null) {
+            for (XmlTag includeTag : includesTag.findSubTags("INCLUDE")) {
+                String path = includeTag.getAttributeValue("FILE");
+                if (path != null) {
+                    PsiFile includedFile = DynFormPathUtils.findIncludedFile(file, path);
+                    addGridsInFileRecursive(includedFile, resultSet, visited);
+                }
+            }
+        }
     }
 
     private PsiNewExpression getNewDynFormExpression(PsiLiteralExpression literal) {
diff --git a/src/main/java/com/sdk/dynform/tools/helper/DynFormPathUtils.java b/src/main/java/com/sdk/dynform/tools/helper/DynFormPathUtils.java
index b60107f..aebfdf2 100644
--- a/src/main/java/com/sdk/dynform/tools/helper/DynFormPathUtils.java
+++ b/src/main/java/com/sdk/dynform/tools/helper/DynFormPathUtils.java
@@ -5,13 +5,10 @@ import com.intellij.openapi.vfs.VirtualFile;
 import com.intellij.psi.PsiDirectory;
 import com.intellij.psi.PsiFile;
 import com.intellij.psi.PsiManager;
-import com.intellij.psi.search.FilenameIndex;
-import com.intellij.psi.search.GlobalSearchScope;
 import org.jetbrains.annotations.NotNull;
 import org.jetbrains.annotations.Nullable;
 
 import java.util.ArrayList;
-import java.util.Collection;
 import java.util.List;
 
 public class DynFormPathUtils {
@@ -20,12 +17,75 @@ public class DynFormPathUtils {
 
     @Nullable
     public static VirtualFile getModuleBaseDir(@NotNull Project project) {
-        // ค้นหาจาก project root โดยตรง
         VirtualFile baseDir = project.getBaseDir();
         if (baseDir == null) return null;
         return baseDir.findFileByRelativePath(MODULE_BASE_PATH);
     }
 
+    @Nullable
+    public static VirtualFile findModuleDir(@NotNull PsiFile file) {
+        VirtualFile vFile = file.getVirtualFile();
+        if (vFile == null) return null;
+        
+        VirtualFile current = vFile.getParent();
+        while (current != null) {
+            if (current.getParent() != null && "module".equals(current.getParent().getName())) {
+                return current;
+            }
+            current = current.getParent();
+        }
+        return null;
+    }
+
+    @Nullable
+    public static PsiFile findAjaxXml(@NotNull PsiFile file) {
+        VirtualFile moduleDir = findModuleDir(file);
+        if (moduleDir != null) {
+            VirtualFile ajaxFile = moduleDir.findFileByRelativePath("defs/ajax.xml");
+            if (ajaxFile != null) {
+                return PsiManager.getInstance(file.getProject()).findFile(ajaxFile);
+            }
+        }
+        return null;
+    }
+
+    @Nullable
+    public static PsiFile findIncludedFile(@NotNull PsiFile contextFile, @NotNull String path) {
+        // จัดการกรณี typo (ิ แทน /)
+        path = path.replace("ิ", "/");
+        
+        VirtualFile moduleBase = getModuleBaseDir(contextFile.getProject());
+        if (moduleBase == null) return null;
+
+        VirtualFile targetVFile = null;
+        if (path.startsWith("#")) {
+            // ภายในโมดูลเดียวกัน: #grids/file.frml -> currentModule/view/frm/grids/file.frml
+            VirtualFile moduleDir = findModuleDir(contextFile);
+            if (moduleDir != null) {
+                String relativePath = "view/frm/" + path.substring(1);
+                targetVFile = moduleDir.findFileByRelativePath(relativePath);
+            }
+        } else if (path.startsWith("/")) {
+            // ข้ามโมดูล: /bdgt04/grids/file.frml -> module/bdgt04/view/frm/grids/file.frml
+            String cleanPath = path.substring(1);
+            int firstSlash = cleanPath.indexOf("/");
+            if (firstSlash > 0) {
+                String targetModule = cleanPath.substring(0, firstSlash);
+                String subPath = cleanPath.substring(firstSlash + 1);
+                String fullPath = targetModule + "/view/frm/" + subPath;
+                targetVFile = moduleBase.findFileByRelativePath(fullPath);
+            }
+        } else {
+            // สัมพัทธ์กับไฟล์ปัจจุบัน
+            targetVFile = contextFile.getVirtualFile().getParent().findFileByRelativePath(path);
+        }
+
+        if (targetVFile != null) {
+            return PsiManager.getInstance(contextFile.getProject()).findFile(targetVFile);
+        }
+        return null;
+    }
+
     @NotNull
     public static List<String> getAllModules(@NotNull Project project) {
         List<String> modules = new ArrayList<>();
diff --git a/src/main/java/com/sdk/dynform/tools/helper/DynFormReferenceContributor.java b/src/main/java/com/sdk/dynform/tools/helper/DynFormReferenceContributor.java
index e99eb88..34f871e 100644
--- a/src/main/java/com/sdk/dynform/tools/helper/DynFormReferenceContributor.java
+++ b/src/main/java/com/sdk/dynform/tools/helper/DynFormReferenceContributor.java
@@ -2,14 +2,24 @@ package com.sdk.dynform.tools.helper;
 
 import com.intellij.openapi.util.TextRange;
 import com.intellij.patterns.PlatformPatterns;
+import com.intellij.patterns.XmlPatterns;
 import com.intellij.psi.*;
+import com.intellij.psi.util.PsiTreeUtil;
+import com.intellij.psi.xml.XmlAttribute;
+import com.intellij.psi.xml.XmlAttributeValue;
+import com.intellij.psi.xml.XmlFile;
+import com.intellij.psi.xml.XmlTag;
 import com.intellij.util.ProcessingContext;
 import org.jetbrains.annotations.NotNull;
 import org.jetbrains.annotations.Nullable;
 
+import java.util.HashSet;
+import java.util.Set;
+
 public class DynFormReferenceContributor extends PsiReferenceContributor {
     @Override
     public void registerReferenceProviders(@NotNull PsiReferenceRegistrar registrar) {
+        // Java Reference Provider
         registrar.registerReferenceProvider(PlatformPatterns.psiElement(PsiLiteralExpression.class),
                 new PsiReferenceProvider() {
                     @NotNull
@@ -24,11 +34,9 @@ public class DynFormReferenceContributor extends PsiReferenceContributor {
                             PsiExpressionList argList = newExp.getArgumentList();
                             if (argList != null) {
                                 PsiExpression[] args = argList.getExpressions();
-                                // Argument index 3 is moduleName
                                 if (args.length >= 4 && args[3] == literal) {
                                     return new PsiReference[]{new DynFormModuleReference(element, new TextRange(1, value.length() + 1), value)};
                                 }
-                                // Argument index 4 is frmlName
                                 if (args.length >= 5 && args[4] == literal) {
                                     String moduleName = getArgumentValue(args, 3);
                                     if (moduleName != null) {
@@ -40,6 +48,109 @@ public class DynFormReferenceContributor extends PsiReferenceContributor {
                         return PsiReference.EMPTY_ARRAY;
                     }
                 });
+
+        // XML Reference Provider for Field/Section NAME/ID
+        registrar.registerReferenceProvider(XmlPatterns.xmlAttributeValue()
+                        .withParent(XmlPatterns.xmlAttribute().withName("NAME", "ID", "TARGET")
+                                .withParent(XmlPatterns.xmlTag().withName("FIELD", "SECTION"))),
+                new PsiReferenceProvider() {
+                    @NotNull
+                    @Override
+                    public PsiReference @NotNull [] getReferencesByElement(@NotNull PsiElement element, @NotNull ProcessingContext context) {
+                        XmlAttributeValue attrValue = (XmlAttributeValue) element;
+                        String value = attrValue.getValue();
+                        if (value == null || value.isEmpty()) return PsiReference.EMPTY_ARRAY;
+                        
+                        XmlAttribute attr = (XmlAttribute) attrValue.getParent();
+                        XmlTag tag = (XmlTag) attr.getParent();
+                        String attrName = attr.getName();
+                        
+                        if ("TARGET".equals(attrName)) {
+                            return new PsiReference[]{new DynFormLocalFieldReference(attrValue, new TextRange(1, value.length() + 1), value)};
+                        }
+                        
+                        // เคส 1: อยู่ใน LAYOUT หรือ TITLES -> ลิงก์ไปหา FIELDS (นิยาม)
+                        if (hasAncestorWithName(tag, "LAYOUT") || hasAncestorWithName(tag, "TITLES")) {
+                            return new PsiReference[]{new DynFormFieldDefinitionReference(attrValue, new TextRange(1, value.length() + 1), value)};
+                        }
+                        
+                        // เคส 2: อยู่ใน FIELDS (นิยาม) -> ลิงก์กลับไปหา LAYOUT หรือ TITLES (การใช้งาน)
+                        if (hasAncestorWithName(tag, "FIELDS")) {
+                            return new PsiReference[]{new DynFormFieldUsageReference(attrValue, new TextRange(1, value.length() + 1), value)};
+                        }
+                        
+                        return PsiReference.EMPTY_ARRAY;
+                    }
+                });
+
+        // XML Reference for Dataset ID (DATAID, DATASET, DATASET-ID)
+        registrar.registerReferenceProvider(XmlPatterns.xmlAttributeValue()
+                        .withParent(XmlPatterns.xmlAttribute().withName("DATAID", "DATASET", "DATASET-ID")),
+                new PsiReferenceProvider() {
+                    @NotNull
+                    @Override
+                    public PsiReference @NotNull [] getReferencesByElement(@NotNull PsiElement element, @NotNull ProcessingContext context) {
+                        XmlAttributeValue attrValue = (XmlAttributeValue) element;
+                        String value = attrValue.getValue();
+                        if (value == null || value.isEmpty()) return PsiReference.EMPTY_ARRAY;
+                        return new PsiReference[]{new DynFormDatasetReference(attrValue, new TextRange(1, value.length() + 1), value)};
+                    }
+                });
+
+        // XML Reference for Grid ID
+        registrar.registerReferenceProvider(XmlPatterns.xmlAttributeValue()
+                        .withParent(XmlPatterns.xmlAttribute().withName("GRID-ID")),
+                new PsiReferenceProvider() {
+                    @NotNull
+                    @Override
+                    public PsiReference @NotNull [] getReferencesByElement(@NotNull PsiElement element, @NotNull ProcessingContext context) {
+                        XmlAttributeValue attrValue = (XmlAttributeValue) element;
+                        String value = attrValue.getValue();
+                        if (value == null || value.isEmpty()) return PsiReference.EMPTY_ARRAY;
+                        return new PsiReference[]{new DynFormGridReference(attrValue, new TextRange(1, value.length() + 1), value)};
+                    }
+                });
+
+        // XML Reference for SRC in UPDATE-FIELDS
+        registrar.registerReferenceProvider(XmlPatterns.xmlAttributeValue()
+                        .withParent(XmlPatterns.xmlAttribute().withName("SRC")
+                                .withParent(XmlPatterns.xmlTag().withName("FIELD")
+                                        .withParent(XmlPatterns.xmlTag().withName("UPDATE-FIELDS")))),
+                new PsiReferenceProvider() {
+                    @NotNull
+                    @Override
+                    public PsiReference @NotNull [] getReferencesByElement(@NotNull PsiElement element, @NotNull ProcessingContext context) {
+                        XmlAttributeValue attrValue = (XmlAttributeValue) element;
+                        String value = attrValue.getValue();
+                        if (value == null || value.isEmpty()) return PsiReference.EMPTY_ARRAY;
+                        return new PsiReference[]{new DynFormAjaxSrcFieldReference(attrValue, new TextRange(1, value.length() + 1), value)};
+                    }
+                });
+
+        // XML Reference for Include File
+        registrar.registerReferenceProvider(XmlPatterns.xmlAttributeValue()
+                        .withParent(XmlPatterns.xmlAttribute().withName("FILE")
+                                .withParent(XmlPatterns.xmlTag().withName("INCLUDE")
+                                        .withParent(XmlPatterns.xmlTag().withName("INCLUDES")))),
+                new PsiReferenceProvider() {
+                    @NotNull
+                    @Override
+                    public PsiReference @NotNull [] getReferencesByElement(@NotNull PsiElement element, @NotNull ProcessingContext context) {
+                        XmlAttributeValue attrValue = (XmlAttributeValue) element;
+                        String value = attrValue.getValue();
+                        if (value == null || value.isEmpty()) return PsiReference.EMPTY_ARRAY;
+                        return new PsiReference[]{new DynFormFileIncludeReference(attrValue, new TextRange(1, value.length() + 1), value)};
+                    }
+                });
+    }
+
+    private static boolean hasAncestorWithName(XmlTag tag, String name) {
+        XmlTag current = tag.getParentTag();
+        while (current != null) {
+            if (name.equals(current.getName())) return true;
+            current = current.getParentTag();
+        }
+        return false;
     }
 
     @Nullable
@@ -68,15 +179,11 @@ public class DynFormReferenceContributor extends PsiReferenceContributor {
 
     private static class DynFormModuleReference extends PsiReferenceBase<PsiElement> {
         private final String moduleName;
-
         public DynFormModuleReference(@NotNull PsiElement element, TextRange textRange, String moduleName) {
             super(element, textRange);
             this.moduleName = moduleName;
         }
-
-        @Nullable
-        @Override
-        public PsiElement resolve() {
+        @Nullable @Override public PsiElement resolve() {
             return DynFormPathUtils.findModuleDirectory(myElement.getProject(), moduleName);
         }
     }
@@ -84,17 +191,256 @@ public class DynFormReferenceContributor extends PsiReferenceContributor {
     private static class DynFormFrmlReference extends PsiReferenceBase<PsiElement> {
         private final String moduleName;
         private final String frmlName;
-
         public DynFormFrmlReference(@NotNull PsiElement element, TextRange textRange, String moduleName, String frmlName) {
             super(element, textRange);
             this.moduleName = moduleName;
             this.frmlName = frmlName;
         }
-
-        @Nullable
-        @Override
-        public PsiElement resolve() {
+        @Nullable @Override public PsiElement resolve() {
             return DynFormPathUtils.findFrmlFile(myElement.getProject(), moduleName, frmlName);
         }
     }
+
+    private static class DynFormLocalFieldReference extends PsiReferenceBase<XmlAttributeValue> {
+        private final String fieldName;
+        public DynFormLocalFieldReference(@NotNull XmlAttributeValue element, TextRange range, String fieldName) {
+            super(element, range);
+            this.fieldName = fieldName;
+        }
+        @Nullable @Override public PsiElement resolve() {
+            XmlTag container = PsiTreeUtil.getParentOfType(myElement, XmlTag.class);
+            while (container != null && !"FORM_ENTRY".equals(container.getName()) && !"FORM_BROWSE".equals(container.getName()) && !"GRID-LIST".equals(container.getName())) {
+                container = container.getParentTag();
+            }
+            if (container == null) {
+                XmlFile file = (XmlFile) myElement.getContainingFile();
+                container = file.getRootTag();
+            }
+            if (container == null) return null;
+            return findFieldInTag(container, fieldName);
+        }
+    }
+
+    /**
+     * ลิงก์จาก Layout หรือ Titles ไปหา FIELDS
+     */
+    private static class DynFormFieldDefinitionReference extends PsiReferenceBase<XmlAttributeValue> {
+        private final String fieldName;
+        public DynFormFieldDefinitionReference(@NotNull XmlAttributeValue element, TextRange range, String fieldName) {
+            super(element, range);
+            this.fieldName = fieldName;
+        }
+        @Nullable @Override public PsiElement resolve() {
+            XmlTag tag = PsiTreeUtil.getParentOfType(myElement, XmlTag.class);
+            if (tag == null) return null;
+            
+            // หา container (FORM_ENTRY, FORM_BROWSE, GRID-LIST หรือ FILTERS)
+            XmlTag container = tag;
+            while (container != null && 
+                   !"LAYOUT".equals(container.getName()) && 
+                   !"TITLES".equals(container.getName()) && 
+                   !"FORM_ENTRY".equals(container.getName()) && 
+                   !"FORM_BROWSE".equals(container.getName()) && 
+                   !"GRID-LIST".equals(container.getName()) &&
+                   !"FILTERS".equals(container.getName())) {
+                container = container.getParentTag();
+            }
+            
+            if (container != null && ("LAYOUT".equals(container.getName()) || "TITLES".equals(container.getName()))) {
+                container = container.getParentTag();
+            }
+            
+            if (container == null) return null;
+            
+            XmlTag fieldsTag = container.findFirstSubTag("FIELDS");
+            if (fieldsTag == null) return null;
+
+            return findFieldInTag(fieldsTag, fieldName);
+        }
+    }
+
+    /**
+     * ค้นหาย้อนกลับจากนิยามฟิลด์ (FIELDS) ไปยังการใช้งานใน LAYOUT หรือ TITLES
+     */
+    private static class DynFormFieldUsageReference extends PsiReferenceBase<XmlAttributeValue> {
+        private final String fieldName;
+        public DynFormFieldUsageReference(@NotNull XmlAttributeValue element, TextRange range, String fieldName) {
+            super(element, range);
+            this.fieldName = fieldName;
+        }
+        @Nullable @Override public PsiElement resolve() {
+            XmlTag tag = PsiTreeUtil.getParentOfType(myElement, XmlTag.class);
+            if (tag == null) return null;
+            
+            // หา FIELDS container
+            XmlTag fieldsTag = tag;
+            while (fieldsTag != null && !"FIELDS".equals(fieldsTag.getName())) {
+                fieldsTag = fieldsTag.getParentTag();
+            }
+            if (fieldsTag == null) return null;
+            
+            XmlTag containerTag = fieldsTag.getParentTag();
+            if (containerTag == null) return null;
+            
+            // หาใน LAYOUT ก่อน
+            XmlTag layoutTag = containerTag.findFirstSubTag("LAYOUT");
+            if (layoutTag != null) {
+                PsiElement found = findFieldInTag(layoutTag, fieldName);
+                if (found != null) return found;
+            }
+            
+            // ถ้าไม่เจอใน LAYOUT ให้หาใน TITLES
+            XmlTag titlesTag = containerTag.findFirstSubTag("TITLES");
+            if (titlesTag != null) {
+                PsiElement found = findFieldInTag(titlesTag, fieldName);
+                if (found != null) return found;
+            }
+
+            return null;
+        }
+    }
+
+    @Nullable
+    private static PsiElement findFieldInTag(XmlTag container, String name) {
+        for (XmlTag subTag : container.getSubTags()) {
+            if ("FIELD".equals(subTag.getName()) && name.equals(subTag.getAttributeValue("NAME"))) {
+                XmlAttribute nameAttr = subTag.getAttribute("NAME");
+                return nameAttr != null ? nameAttr.getValueElement() : subTag;
+            }
+            if (("SECTION".equals(subTag.getName()) || "ROW".equals(subTag.getName())) && name.equals(subTag.getAttributeValue("ID"))) {
+                XmlAttribute idAttr = subTag.getAttribute("ID");
+                return idAttr != null ? idAttr.getValueElement() : subTag;
+            }
+            PsiElement found = findFieldInTag(subTag, name);
+            if (found != null) return found;
+        }
+        return null;
+    }
+
+    private static class DynFormDatasetReference extends PsiReferenceBase<XmlAttributeValue> {
+        private final String datasetId;
+        public DynFormDatasetReference(@NotNull XmlAttributeValue element, TextRange range, String datasetId) {
+            super(element, range);
+            this.datasetId = datasetId;
+        }
+        @Nullable @Override public PsiElement resolve() {
+            PsiElement found = findDatasetInFile(myElement.getContainingFile(), datasetId);
+            if (found != null) return found;
+
+            PsiFile ajaxFile = DynFormPathUtils.findAjaxXml(myElement.getContainingFile());
+            if (ajaxFile != null) {
+                return findDatasetInFile(ajaxFile, datasetId);
+            }
+            return null;
+        }
+
+        @Nullable
+        private PsiElement findDatasetInFile(PsiFile file, String id) {
+            if (!(file instanceof XmlFile xmlFile)) return null;
+            XmlTag rootTag = xmlFile.getRootTag();
+            if (rootTag == null) return null;
+            
+            XmlTag datasetsContainer = rootTag.findFirstSubTag("DATASETS");
+            if (datasetsContainer == null) datasetsContainer = rootTag;
+
+            for (XmlTag datasetTag : datasetsContainer.findSubTags("DATASET")) {
+                if (id.equals(datasetTag.getAttributeValue("ID"))) {
+                    XmlAttribute idAttr = datasetTag.getAttribute("ID");
+                    return idAttr != null ? idAttr.getValueElement() : datasetTag;
+                }
+            }
+            return null;
+        }
+    }
+
+    private static class DynFormGridReference extends PsiReferenceBase<XmlAttributeValue> {
+        private final String gridId;
+        public DynFormGridReference(@NotNull XmlAttributeValue element, TextRange range, String gridId) {
+            super(element, range);
+            this.gridId = gridId;
+        }
+        @Nullable @Override public PsiElement resolve() {
+            return findGridInFileRecursive(myElement.getContainingFile(), gridId, new HashSet<>());
+        }
+
+        @Nullable
+        private PsiElement findGridInFileRecursive(PsiFile file, String id, Set<PsiFile> visited) {
+            if (file == null || !visited.add(file)) return null;
+            if (!(file instanceof XmlFile xmlFile)) return null;
+            XmlTag rootTag = xmlFile.getRootTag();
+            if (rootTag == null) return null;
+
+            XmlTag dataGridsTag = rootTag.findFirstSubTag("DATA-GRIDS");
+            if (dataGridsTag != null) {
+                for (XmlTag gridTag : dataGridsTag.findSubTags("DATA-GRID")) {
+                    if (id.equals(gridTag.getAttributeValue("ID"))) {
+                        XmlAttribute idAttr = gridTag.getAttribute("ID");
+                        return idAttr != null ? idAttr.getValueElement() : gridTag;
+                    }
+                }
+            }
+
+            XmlTag includesTag = rootTag.findFirstSubTag("INCLUDES");
+            if (includesTag != null) {
+                for (XmlTag includeTag : includesTag.findSubTags("INCLUDE")) {
+                    String path = includeTag.getAttributeValue("FILE");
+                    if (path != null) {
+                        PsiFile includedFile = DynFormPathUtils.findIncludedFile(file, path);
+                        PsiElement found = findGridInFileRecursive(includedFile, id, visited);
+                        if (found != null) return found;
+                    }
+                }
+            }
+            return null;
+        }
+    }
+
+    private static class DynFormAjaxSrcFieldReference extends PsiReferenceBase<XmlAttributeValue> {
+        private final String fieldName;
+        public DynFormAjaxSrcFieldReference(@NotNull XmlAttributeValue element, TextRange range, String fieldName) {
+            super(element, range);
+            this.fieldName = fieldName;
+        }
+        @Nullable @Override public PsiElement resolve() {
+            XmlTag ajaxOptionTag = PsiTreeUtil.getParentOfType(myElement, XmlTag.class);
+            while (ajaxOptionTag != null && !"AJAX-OPTION".equals(ajaxOptionTag.getName())) {
+                ajaxOptionTag = ajaxOptionTag.getParentTag();
+            }
+            if (ajaxOptionTag == null) return null;
+            
+            String datasetId = ajaxOptionTag.getAttributeValue("DATASET");
+            if (datasetId == null) return null;
+
+            PsiFile ajaxFile = DynFormPathUtils.findAjaxXml(myElement.getContainingFile());
+            if (!(ajaxFile instanceof XmlFile xmlFile)) return null;
+            
+            XmlTag rootTag = xmlFile.getRootTag();
+            if (rootTag == null) return null;
+            
+            XmlTag datasetsContainer = rootTag.findFirstSubTag("DATASETS");
+            if (datasetsContainer == null) datasetsContainer = rootTag;
+
+            for (XmlTag datasetTag : datasetsContainer.findSubTags("DATASET")) {
+                if (datasetId.equals(datasetTag.getAttributeValue("ID"))) {
+                    XmlTag fieldsTag = datasetTag.findFirstSubTag("FIELDS");
+                    if (fieldsTag != null) {
+                        return findFieldInTag(fieldsTag, fieldName);
+                    }
+                    return datasetTag;
+                }
+            }
+            return null;
+        }
+    }
+
+    private static class DynFormFileIncludeReference extends PsiReferenceBase<XmlAttributeValue> {
+        private final String path;
+        public DynFormFileIncludeReference(@NotNull XmlAttributeValue element, TextRange range, String path) {
+            super(element, range);
+            this.path = path;
+        }
+        @Nullable @Override public PsiElement resolve() {
+            return DynFormPathUtils.findIncludedFile(myElement.getContainingFile(), path);
+        }
+    }
 }
diff --git a/src/main/resources/META-INF/pluginIcon.svg b/src/main/resources/META-INF/pluginIcon.svg
index 7799969..821b1ad 100644
--- a/src/main/resources/META-INF/pluginIcon.svg
+++ b/src/main/resources/META-INF/pluginIcon.svg
@@ -1,11 +1,23 @@
 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M32.0845 7.94025V4H24.0203V7.9896H16.029V4H7.91553V7.94025H4V36H16.0044V32.0045C16.0058 30.9457 16.4274 29.9308 17.1766 29.1826C17.9258 28.4345 18.9412 28.0143 20 28.0143C21.0588 28.0143 22.0743 28.4345 22.8234 29.1826C23.5726 29.9308 23.9942 30.9457 23.9956 32.0045V36H36V7.94025H32.0845Z"
-          fill="url(#paint0_linear)"/>
-    <defs>
-        <linearGradient id="paint0_linear" x1="2.94192" y1="4.89955" x2="37.7772" y2="39.7345" gradientUnits="userSpaceOnUse">
-            <stop offset="0.15937" stop-color="#3BEA62"/>
-            <stop offset="0.5404" stop-color="#3C99CC"/>
-            <stop offset="0.93739" stop-color="#6B57FF"/>
-        </linearGradient>
-    </defs>
-</svg>
\ No newline at end of file
+    <!-- Form Background and Outline (IntelliJ Blue) -->
+    <rect x="6" y="4" width="28" height="32" rx="3" fill="#389FD6" fill-opacity="0.05" stroke="#389FD6" stroke-width="2"/>
+    
+    <!-- Abstract Form Fields (Lines) -->
+    <rect x="10" y="9" width="20" height="1.5" rx="0.75" fill="#389FD6" fill-opacity="0.3"/>
+    <rect x="10" y="13" width="14" height="1.5" rx="0.75" fill="#389FD6" fill-opacity="0.3"/>
+
+    <!-- XML Brackets < > in the Center -->
+    <path d="M15 19L11 23L15 27" stroke="#389FD6" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M25 19L29 23L25 27" stroke="#389FD6" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+    
+    <!-- Database Icon at Bottom Right (Action Orange) -->
+    <!-- Base Cylinder -->
+    <path d="M24 28V34C24 35.3807 26.6863 36.5 30 36.5C33.3137 36.5 36 35.3807 36 34V28" fill="#F4AF3D" fill-opacity="0.2"/>
+    <path d="M24 28V34C24 35.3807 26.6863 36.5 30 36.5C33.3137 36.5 36 35.3807 36 34V28" stroke="#F4AF3D" stroke-width="1.5" stroke-linejoin="round"/>
+    
+    <!-- Top Ellipse -->
+    <ellipse cx="30" cy="28" rx="6" ry="2.5" fill="#F4AF3D" stroke="#F4AF3D" stroke-width="1.5"/>
+    
+    <!-- Mid Line of Cylinder -->
+    <path d="M24 31C24 32.3807 26.6863 33.5 30 33.5C33.3137 33.5 36 32.3807 36 31" stroke="#F4AF3D" stroke-width="1.5" stroke-linecap="round"/>
+</svg>