ninegrid2 6.243.0 → 6.245.0

package/dist/bundle.cjs.js

@@ -17991,7 +17991,7 @@ class ngFilterButton extends HTMLElement
 class ngFilterPanel extends HTMLElement
 {
 	#owner;
-	#target;
+	#button;
 	#timer;
 	
 	constructor () {
@@ -18002,7 +18002,6 @@ class ngFilterPanel extends HTMLElement
 	connectedCallback() {
 
 		this.#owner = this.getRootNode().host;
-		console.log("========================", this.#owner);
 
 		const cssPath = this.getRootNode().host.closest("nine-grid").getAttribute("css-path") || "";
 
@@ -18041,25 +18040,21 @@ class ngFilterPanel extends HTMLElement
 			</div>
 		`;
 		
-		$(this.shadowRoot).find("input[type=text]")		.on("input",	this.#onInput);
-		$(this.shadowRoot).find("input[type=checkbox]")	.on("change",	this.#onSelectAll);
-		$(this.shadowRoot).find("#btnOk")				.on("click",	this.#onOk);
-		$(this.shadowRoot).find("#btnCancel")			.on("click",	this.#onCancel);
-		
-		//$(this).on("mousedown", e => { e.preventDefault(); e.stopPropagation(); });
-		//$(this).on("mousedown", e => { e.stopPropagation(); });
+		this.shadowRoot.querySelector("input[type=text]").addEventListener("input", this.#onInput);
+		this.shadowRoot.querySelector("input[type=checkbox]").addEventListener("change", this.#onSelectAll);
+		this.shadowRoot.querySelector("#btnOk").addEventListener("click", this.#onOk);
+		this.shadowRoot.querySelector("#btnCancel").addEventListener("click", this.#onCancel);
 	};
 
 	#onOk = (e) => {
 
 		const grd = this.shadowRoot.querySelector("nine-grid");
 
-		//ninegrid.j.querySelectorAll(grd).addClass("loading");
-		//ninegrid.j.querySelectorAll(this.#target.owner).addClass("loading");
 		this.classList.add("loading");
 		
 		setTimeout(() => {
 
+			/**
 			const LVL_IDX	= grd.fields.indexOf("LVL");
 			const CHK_IDX	= grd.fields.indexOf("CHK");
 			const COLNM_IDX	= grd.fields.indexOf("COLNM");
@@ -18077,36 +18072,49 @@ class ngFilterPanel extends HTMLElement
 						data	: [...new Set(grd.data.getValidData().filter(m => { return m.v[CHK_IDX] == "Y" && m.v[COLNM_IDX] == v; }).map(m => { return m.v[DATA_IDX] || ''; }))].sort((a,b) => { return a > b ? 1 : -1; }),
 					});
 				});
-			}
+			} */
+			const [LVL_IDX, CHK_IDX, COLNM_IDX, DATA_IDX] = ["LVL", "CHK", "COLNM", "DATA"].map(k => grd.fields.indexOf(k));
+			const checked = grd.data.getValidDataNF().filter(m => m.v[LVL_IDX] === 2 && m.v[CHK_IDX] === "Y");
+			const filterOptions = checked.length > 0 ? [...new Set(checked.map(m => m.v[COLNM_IDX]))].map(v => ({
+				colnm: v,
+				data: [...new Set(grd.data.getValidData().filter(m => m.v[CHK_IDX] === "Y" && m.v[COLNM_IDX] === v).map(m => m.v[DATA_IDX] || ''))].sort()
+			})) : [];
 			
-			//console.log(filterOptions);
-			//console.log(this.#target, this.#target.button, filterOptions)
 			
-			this.#target.button.filterOptions = filterOptions;
+			this.#button.filterOptions = filterOptions;
 			
+			/**
 			var oParam = {};
 			
-			this.#target.owner.body.querySelectorAll("ng-filter-button").forEach(el => {
+			this.#owner.body.querySelectorAll("ng-filter-button").forEach(el => {
 				
 				//if (!el.filterOptions) return true;
 
 				el.filterOptions.forEach(filterOptions => {
 					if (filterOptions.data.length > 0) oParam[filterOptions.colnm] = filterOptions.data;
 				});
-			});
-			
-			this.#target.owner.filtering.set(oParam);
+			}); */
 
+			const oParam = Object.fromEntries(
+				[...this.#owner.body.querySelectorAll("ng-filter-button")]
+					.flatMap(el => el.filterOptions)
+					.filter(opt => opt.data.length > 0)
+					.map(opt => [opt.colnm, opt.data])
+			);
+			
+			this.#owner.filtering.set(oParam);
 			this.classList.remove("loading");
 		});
 		
-		$(this).hide();
+		//$(this).hide();
+		this.style.display = 'none';
 	};
 	
 	
 	
 	#onCancel = (e) => {
-		$(this).hide();
+		//$(this).hide();
+		this.style.display = 'none';
 	};
 
 	#onSelectAll = (e) => {
@@ -18159,13 +18167,13 @@ class ngFilterPanel extends HTMLElement
 
 	open = (filterButton) => {
 
-		const owner = this.shadow.closest("nine-grid");
+		//const owner = this.shadow.closest("nine-grid");
 
 		/** 위치 */
 		const cell = filterButton.closest("th,td");
 
 		const filterButtonRect = filterButton.getBoundingClientRect();
-		const ownerRect = owner.getBoundingClientRect();
+		const ownerRect = this.#owner.getBoundingClientRect();
 		const cellRect = cell.getBoundingClientRect();
 		const targetRect = this.getBoundingClientRect();
 
@@ -18185,12 +18193,7 @@ class ngFilterPanel extends HTMLElement
 		var col = filterButton.closest('th,td').dataset.col;
 		this.col = col;
 
-		this.#target = {
-			owner	: owner,
-			button	: filterButton,
-			uuid	: owner.uuid,
-			col		: col,
-		};
+		this.#button = filterButton;
 		
 		this.style.display = 'flex';
 		this.classList.add("loading");
@@ -18204,7 +18207,7 @@ class ngFilterPanel extends HTMLElement
 		setTimeout(() => {
 
 			
-			let data = owner.data.getValidDataNF();
+			let data = this.#owner.data.getValidDataNF();
 			
 			var ds = [];
 			filterButton.filterOptions.forEach((filterOption,i) => {
@@ -18216,22 +18219,22 @@ class ngFilterPanel extends HTMLElement
 				});
 
 				/**
-				var cell = $(`[data-col=${col}][data-bind=${filterOption.colnm}]`, owner.template);
+				var cell = $(`[data-col=${col}][data-bind=${filterOption.colnm}]`, this.#owner.template);
 				var expr = cell.attr("data-expr");
-				var exprFunc = (expr) ? owner.exprFunction(expr) : null;
+				var exprFunc = (expr) ? this.#owner.exprFunction(expr) : null;
 				*/
 				
-				const cell = ninegrid.j.querySelectorAll(`[data-col="${col}"][data-bind="${filterOption.colnm}"]`, owner.tmpl).elem();
+				const cell = ninegrid.j.querySelectorAll(`[data-col="${col}"][data-bind="${filterOption.colnm}"]`, this.#owner.tmpl).elem();
 				const expr = cell.getAttribute("data-expr");
-				const exprFunc = (expr) ? owner.exprFunction(expr) : null;
+				const exprFunc = (expr) ? this.#owner.exprFunction(expr) : null;
 
 				var data2 = [];
 				for (var rowData of data) {
-					var idx = owner.fields.indexOf(filterOption.colnm);
+					var idx = this.#owner.fields.indexOf(filterOption.colnm);
 					
 					if (expr) {
-						var o = owner.data.conv(rowData);
-						data2.push({v:o[filterOption.colnm],v2:exprFunc(o, rowData.__ng.rowidx, owner.data)});
+						var o = this.#owner.data.conv(rowData);
+						data2.push({v:o[filterOption.colnm],v2:exprFunc(o, rowData.__ng.rowidx, this.#owner.data)});
 					}
 					else {
 						data2.push({v:rowData.v[idx],v2:rowData.v[idx]});

package/dist/bundle.esm.js

@@ -17989,7 +17989,7 @@ class ngFilterButton extends HTMLElement
 class ngFilterPanel extends HTMLElement
 {
 	#owner;
-	#target;
+	#button;
 	#timer;
 	
 	constructor () {
@@ -18000,7 +18000,6 @@ class ngFilterPanel extends HTMLElement
 	connectedCallback() {
 
 		this.#owner = this.getRootNode().host;
-		console.log("========================", this.#owner);
 
 		const cssPath = this.getRootNode().host.closest("nine-grid").getAttribute("css-path") || "";
 
@@ -18039,25 +18038,21 @@ class ngFilterPanel extends HTMLElement
 			</div>
 		`;
 		
-		$(this.shadowRoot).find("input[type=text]")		.on("input",	this.#onInput);
-		$(this.shadowRoot).find("input[type=checkbox]")	.on("change",	this.#onSelectAll);
-		$(this.shadowRoot).find("#btnOk")				.on("click",	this.#onOk);
-		$(this.shadowRoot).find("#btnCancel")			.on("click",	this.#onCancel);
-		
-		//$(this).on("mousedown", e => { e.preventDefault(); e.stopPropagation(); });
-		//$(this).on("mousedown", e => { e.stopPropagation(); });
+		this.shadowRoot.querySelector("input[type=text]").addEventListener("input", this.#onInput);
+		this.shadowRoot.querySelector("input[type=checkbox]").addEventListener("change", this.#onSelectAll);
+		this.shadowRoot.querySelector("#btnOk").addEventListener("click", this.#onOk);
+		this.shadowRoot.querySelector("#btnCancel").addEventListener("click", this.#onCancel);
 	};
 
 	#onOk = (e) => {
 
 		const grd = this.shadowRoot.querySelector("nine-grid");
 
-		//ninegrid.j.querySelectorAll(grd).addClass("loading");
-		//ninegrid.j.querySelectorAll(this.#target.owner).addClass("loading");
 		this.classList.add("loading");
 		
 		setTimeout(() => {
 
+			/**
 			const LVL_IDX	= grd.fields.indexOf("LVL");
 			const CHK_IDX	= grd.fields.indexOf("CHK");
 			const COLNM_IDX	= grd.fields.indexOf("COLNM");
@@ -18075,36 +18070,49 @@ class ngFilterPanel extends HTMLElement
 						data	: [...new Set(grd.data.getValidData().filter(m => { return m.v[CHK_IDX] == "Y" && m.v[COLNM_IDX] == v; }).map(m => { return m.v[DATA_IDX] || ''; }))].sort((a,b) => { return a > b ? 1 : -1; }),
 					});
 				});
-			}
+			} */
+			const [LVL_IDX, CHK_IDX, COLNM_IDX, DATA_IDX] = ["LVL", "CHK", "COLNM", "DATA"].map(k => grd.fields.indexOf(k));
+			const checked = grd.data.getValidDataNF().filter(m => m.v[LVL_IDX] === 2 && m.v[CHK_IDX] === "Y");
+			const filterOptions = checked.length > 0 ? [...new Set(checked.map(m => m.v[COLNM_IDX]))].map(v => ({
+				colnm: v,
+				data: [...new Set(grd.data.getValidData().filter(m => m.v[CHK_IDX] === "Y" && m.v[COLNM_IDX] === v).map(m => m.v[DATA_IDX] || ''))].sort()
+			})) : [];
 			
-			//console.log(filterOptions);
-			//console.log(this.#target, this.#target.button, filterOptions)
 			
-			this.#target.button.filterOptions = filterOptions;
+			this.#button.filterOptions = filterOptions;
 			
+			/**
 			var oParam = {};
 			
-			this.#target.owner.body.querySelectorAll("ng-filter-button").forEach(el => {
+			this.#owner.body.querySelectorAll("ng-filter-button").forEach(el => {
 				
 				//if (!el.filterOptions) return true;
 
 				el.filterOptions.forEach(filterOptions => {
 					if (filterOptions.data.length > 0) oParam[filterOptions.colnm] = filterOptions.data;
 				});
-			});
-			
-			this.#target.owner.filtering.set(oParam);
+			}); */
 
+			const oParam = Object.fromEntries(
+				[...this.#owner.body.querySelectorAll("ng-filter-button")]
+					.flatMap(el => el.filterOptions)
+					.filter(opt => opt.data.length > 0)
+					.map(opt => [opt.colnm, opt.data])
+			);
+			
+			this.#owner.filtering.set(oParam);
 			this.classList.remove("loading");
 		});
 		
-		$(this).hide();
+		//$(this).hide();
+		this.style.display = 'none';
 	};
 	
 	
 	
 	#onCancel = (e) => {
-		$(this).hide();
+		//$(this).hide();
+		this.style.display = 'none';
 	};
 
 	#onSelectAll = (e) => {
@@ -18157,13 +18165,13 @@ class ngFilterPanel extends HTMLElement
 
 	open = (filterButton) => {
 
-		const owner = this.shadow.closest("nine-grid");
+		//const owner = this.shadow.closest("nine-grid");
 
 		/** 위치 */
 		const cell = filterButton.closest("th,td");
 
 		const filterButtonRect = filterButton.getBoundingClientRect();
-		const ownerRect = owner.getBoundingClientRect();
+		const ownerRect = this.#owner.getBoundingClientRect();
 		const cellRect = cell.getBoundingClientRect();
 		const targetRect = this.getBoundingClientRect();
 
@@ -18183,12 +18191,7 @@ class ngFilterPanel extends HTMLElement
 		var col = filterButton.closest('th,td').dataset.col;
 		this.col = col;
 
-		this.#target = {
-			owner	: owner,
-			button	: filterButton,
-			uuid	: owner.uuid,
-			col		: col,
-		};
+		this.#button = filterButton;
 		
 		this.style.display = 'flex';
 		this.classList.add("loading");
@@ -18202,7 +18205,7 @@ class ngFilterPanel extends HTMLElement
 		setTimeout(() => {
 
 			
-			let data = owner.data.getValidDataNF();
+			let data = this.#owner.data.getValidDataNF();
 			
 			var ds = [];
 			filterButton.filterOptions.forEach((filterOption,i) => {
@@ -18214,22 +18217,22 @@ class ngFilterPanel extends HTMLElement
 				});
 
 				/**
-				var cell = $(`[data-col=${col}][data-bind=${filterOption.colnm}]`, owner.template);
+				var cell = $(`[data-col=${col}][data-bind=${filterOption.colnm}]`, this.#owner.template);
 				var expr = cell.attr("data-expr");
-				var exprFunc = (expr) ? owner.exprFunction(expr) : null;
+				var exprFunc = (expr) ? this.#owner.exprFunction(expr) : null;
 				*/
 				
-				const cell = ninegrid.j.querySelectorAll(`[data-col="${col}"][data-bind="${filterOption.colnm}"]`, owner.tmpl).elem();
+				const cell = ninegrid.j.querySelectorAll(`[data-col="${col}"][data-bind="${filterOption.colnm}"]`, this.#owner.tmpl).elem();
 				const expr = cell.getAttribute("data-expr");
-				const exprFunc = (expr) ? owner.exprFunction(expr) : null;
+				const exprFunc = (expr) ? this.#owner.exprFunction(expr) : null;
 
 				var data2 = [];
 				for (var rowData of data) {
-					var idx = owner.fields.indexOf(filterOption.colnm);
+					var idx = this.#owner.fields.indexOf(filterOption.colnm);
 					
 					if (expr) {
-						var o = owner.data.conv(rowData);
-						data2.push({v:o[filterOption.colnm],v2:exprFunc(o, rowData.__ng.rowidx, owner.data)});
+						var o = this.#owner.data.conv(rowData);
+						data2.push({v:o[filterOption.colnm],v2:exprFunc(o, rowData.__ng.rowidx, this.#owner.data)});
 					}
 					else {
 						data2.push({v:rowData.v[idx],v2:rowData.v[idx]});

package/dist/etc/ngFiltering.js

@@ -168,7 +168,7 @@ class ngFilterButton extends HTMLElement
 class ngFilterPanel extends HTMLElement
 {
 	#owner;
-	#target;
+	#button;
 	#timer;
 	
 	constructor () {
@@ -179,7 +179,6 @@ class ngFilterPanel extends HTMLElement
 	connectedCallback() {
 
 		this.#owner = this.getRootNode().host;
-		console.log("========================", this.#owner)
 
 		const cssPath = this.getRootNode().host.closest("nine-grid").getAttribute("css-path") || "";
 
@@ -218,25 +217,21 @@ class ngFilterPanel extends HTMLElement
 			</div>
 		`;
 		
-		$(this.shadowRoot).find("input[type=text]")		.on("input",	this.#onInput);
-		$(this.shadowRoot).find("input[type=checkbox]")	.on("change",	this.#onSelectAll);
-		$(this.shadowRoot).find("#btnOk")				.on("click",	this.#onOk);
-		$(this.shadowRoot).find("#btnCancel")			.on("click",	this.#onCancel);
-		
-		//$(this).on("mousedown", e => { e.preventDefault(); e.stopPropagation(); });
-		//$(this).on("mousedown", e => { e.stopPropagation(); });
+		this.shadowRoot.querySelector("input[type=text]").addEventListener("input", this.#onInput);
+		this.shadowRoot.querySelector("input[type=checkbox]").addEventListener("change", this.#onSelectAll);
+		this.shadowRoot.querySelector("#btnOk").addEventListener("click", this.#onOk);
+		this.shadowRoot.querySelector("#btnCancel").addEventListener("click", this.#onCancel);
 	};
 
 	#onOk = (e) => {
 
 		const grd = this.shadowRoot.querySelector("nine-grid");
 
-		//ninegrid.j.querySelectorAll(grd).addClass("loading");
-		//ninegrid.j.querySelectorAll(this.#target.owner).addClass("loading");
 		this.classList.add("loading");
 		
 		setTimeout(() => {
 
+			/**
 			const LVL_IDX	= grd.fields.indexOf("LVL");
 			const CHK_IDX	= grd.fields.indexOf("CHK");
 			const COLNM_IDX	= grd.fields.indexOf("COLNM");
@@ -254,36 +249,49 @@ class ngFilterPanel extends HTMLElement
 						data	: [...new Set(grd.data.getValidData().filter(m => { return m.v[CHK_IDX] == "Y" && m.v[COLNM_IDX] == v; }).map(m => { return m.v[DATA_IDX] || ''; }))].sort((a,b) => { return a > b ? 1 : -1; }),
 					});
 				});
-			}
+			} */
+			const [LVL_IDX, CHK_IDX, COLNM_IDX, DATA_IDX] = ["LVL", "CHK", "COLNM", "DATA"].map(k => grd.fields.indexOf(k));
+			const checked = grd.data.getValidDataNF().filter(m => m.v[LVL_IDX] === 2 && m.v[CHK_IDX] === "Y");
+			const filterOptions = checked.length > 0 ? [...new Set(checked.map(m => m.v[COLNM_IDX]))].map(v => ({
+				colnm: v,
+				data: [...new Set(grd.data.getValidData().filter(m => m.v[CHK_IDX] === "Y" && m.v[COLNM_IDX] === v).map(m => m.v[DATA_IDX] || ''))].sort()
+			})) : [];
 			
-			//console.log(filterOptions);
-			//console.log(this.#target, this.#target.button, filterOptions)
 			
-			this.#target.button.filterOptions = filterOptions;
+			this.#button.filterOptions = filterOptions;
 			
+			/**
 			var oParam = {};
 			
-			this.#target.owner.body.querySelectorAll("ng-filter-button").forEach(el => {
+			this.#owner.body.querySelectorAll("ng-filter-button").forEach(el => {
 				
 				//if (!el.filterOptions) return true;
 
 				el.filterOptions.forEach(filterOptions => {
 					if (filterOptions.data.length > 0) oParam[filterOptions.colnm] = filterOptions.data;
 				});
-			});
+			}); */
+
+			const oParam = Object.fromEntries(
+				[...this.#owner.body.querySelectorAll("ng-filter-button")]
+					.flatMap(el => el.filterOptions)
+					.filter(opt => opt.data.length > 0)
+					.map(opt => [opt.colnm, opt.data])
+			);
 			
-			this.#target.owner.filtering.set(oParam);
-
+			this.#owner.filtering.set(oParam);
 			this.classList.remove("loading");
 		});
 		
-		$(this).hide();
+		//$(this).hide();
+		this.style.display = 'none';
 	};
 	
 	
 	
 	#onCancel = (e) => {
-		$(this).hide();
+		//$(this).hide();
+		this.style.display = 'none';
 	};
 
 	#onSelectAll = (e) => {
@@ -336,13 +344,13 @@ class ngFilterPanel extends HTMLElement
 
 	open = (filterButton) => {
 
-		const owner = this.shadow.closest("nine-grid");
+		//const owner = this.shadow.closest("nine-grid");
 
 		/** 위치 */
 		const cell = filterButton.closest("th,td");
 
 		const filterButtonRect = filterButton.getBoundingClientRect();
-		const ownerRect = owner.getBoundingClientRect();
+		const ownerRect = this.#owner.getBoundingClientRect();
 		const cellRect = cell.getBoundingClientRect();
 		const targetRect = this.getBoundingClientRect();
 
@@ -362,12 +370,7 @@ class ngFilterPanel extends HTMLElement
 		var col = filterButton.closest('th,td').dataset.col;
 		this.col = col;
 
-		this.#target = {
-			owner	: owner,
-			button	: filterButton,
-			uuid	: owner.uuid,
-			col		: col,
-		}
+		this.#button = filterButton;
 		
 		this.style.display = 'flex';
 		this.classList.add("loading");
@@ -381,7 +384,7 @@ class ngFilterPanel extends HTMLElement
 		setTimeout(() => {
 
 			
-			let data = owner.data.getValidDataNF();
+			let data = this.#owner.data.getValidDataNF();
 			
 			var ds = [];
 			filterButton.filterOptions.forEach((filterOption,i) => {
@@ -393,22 +396,22 @@ class ngFilterPanel extends HTMLElement
 				});
 
 				/**
-				var cell = $(`[data-col=${col}][data-bind=${filterOption.colnm}]`, owner.template);
+				var cell = $(`[data-col=${col}][data-bind=${filterOption.colnm}]`, this.#owner.template);
 				var expr = cell.attr("data-expr");
-				var exprFunc = (expr) ? owner.exprFunction(expr) : null;
+				var exprFunc = (expr) ? this.#owner.exprFunction(expr) : null;
 				*/
 				
-				const cell = ninegrid.j.querySelectorAll(`[data-col="${col}"][data-bind="${filterOption.colnm}"]`, owner.tmpl).elem();
+				const cell = ninegrid.j.querySelectorAll(`[data-col="${col}"][data-bind="${filterOption.colnm}"]`, this.#owner.tmpl).elem();
 				const expr = cell.getAttribute("data-expr");
-				const exprFunc = (expr) ? owner.exprFunction(expr) : null;
+				const exprFunc = (expr) ? this.#owner.exprFunction(expr) : null;
 
 				var data2 = [];
 				for (var rowData of data) {
-					var idx = owner.fields.indexOf(filterOption.colnm);
+					var idx = this.#owner.fields.indexOf(filterOption.colnm);
 					
 					if (expr) {
-						var o = owner.data.conv(rowData);
-						data2.push({v:o[filterOption.colnm],v2:exprFunc(o, rowData.__ng.rowidx, owner.data)});
+						var o = this.#owner.data.conv(rowData);
+						data2.push({v:o[filterOption.colnm],v2:exprFunc(o, rowData.__ng.rowidx, this.#owner.data)});
 					}
 					else {
 						data2.push({v:rowData.v[idx],v2:rowData.v[idx]});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninegrid2",
   "type": "module",
-  "version": "6.243.0",
+  "version": "6.245.0",
   "main": "dist/index.js",
   "exports": {
     "import": "./dist/index.js",

package/src/etc/ngFiltering.js

@@ -168,7 +168,7 @@ class ngFilterButton extends HTMLElement
 class ngFilterPanel extends HTMLElement
 {
 	#owner;
-	#target;
+	#button;
 	#timer;
 	
 	constructor () {
@@ -179,7 +179,6 @@ class ngFilterPanel extends HTMLElement
 	connectedCallback() {
 
 		this.#owner = this.getRootNode().host;
-		console.log("========================", this.#owner)
 
 		const cssPath = this.getRootNode().host.closest("nine-grid").getAttribute("css-path") || "";
 
@@ -218,25 +217,21 @@ class ngFilterPanel extends HTMLElement
 			</div>
 		`;
 		
-		$(this.shadowRoot).find("input[type=text]")		.on("input",	this.#onInput);
-		$(this.shadowRoot).find("input[type=checkbox]")	.on("change",	this.#onSelectAll);
-		$(this.shadowRoot).find("#btnOk")				.on("click",	this.#onOk);
-		$(this.shadowRoot).find("#btnCancel")			.on("click",	this.#onCancel);
-		
-		//$(this).on("mousedown", e => { e.preventDefault(); e.stopPropagation(); });
-		//$(this).on("mousedown", e => { e.stopPropagation(); });
+		this.shadowRoot.querySelector("input[type=text]").addEventListener("input", this.#onInput);
+		this.shadowRoot.querySelector("input[type=checkbox]").addEventListener("change", this.#onSelectAll);
+		this.shadowRoot.querySelector("#btnOk").addEventListener("click", this.#onOk);
+		this.shadowRoot.querySelector("#btnCancel").addEventListener("click", this.#onCancel);
 	};
 
 	#onOk = (e) => {
 
 		const grd = this.shadowRoot.querySelector("nine-grid");
 
-		//ninegrid.j.querySelectorAll(grd).addClass("loading");
-		//ninegrid.j.querySelectorAll(this.#target.owner).addClass("loading");
 		this.classList.add("loading");
 		
 		setTimeout(() => {
 
+			/**
 			const LVL_IDX	= grd.fields.indexOf("LVL");
 			const CHK_IDX	= grd.fields.indexOf("CHK");
 			const COLNM_IDX	= grd.fields.indexOf("COLNM");
@@ -254,36 +249,49 @@ class ngFilterPanel extends HTMLElement
 						data	: [...new Set(grd.data.getValidData().filter(m => { return m.v[CHK_IDX] == "Y" && m.v[COLNM_IDX] == v; }).map(m => { return m.v[DATA_IDX] || ''; }))].sort((a,b) => { return a > b ? 1 : -1; }),
 					});
 				});
-			}
+			} */
+			const [LVL_IDX, CHK_IDX, COLNM_IDX, DATA_IDX] = ["LVL", "CHK", "COLNM", "DATA"].map(k => grd.fields.indexOf(k));
+			const checked = grd.data.getValidDataNF().filter(m => m.v[LVL_IDX] === 2 && m.v[CHK_IDX] === "Y");
+			const filterOptions = checked.length > 0 ? [...new Set(checked.map(m => m.v[COLNM_IDX]))].map(v => ({
+				colnm: v,
+				data: [...new Set(grd.data.getValidData().filter(m => m.v[CHK_IDX] === "Y" && m.v[COLNM_IDX] === v).map(m => m.v[DATA_IDX] || ''))].sort()
+			})) : [];
 			
-			//console.log(filterOptions);
-			//console.log(this.#target, this.#target.button, filterOptions)
 			
-			this.#target.button.filterOptions = filterOptions;
+			this.#button.filterOptions = filterOptions;
 			
+			/**
 			var oParam = {};
 			
-			this.#target.owner.body.querySelectorAll("ng-filter-button").forEach(el => {
+			this.#owner.body.querySelectorAll("ng-filter-button").forEach(el => {
 				
 				//if (!el.filterOptions) return true;
 
 				el.filterOptions.forEach(filterOptions => {
 					if (filterOptions.data.length > 0) oParam[filterOptions.colnm] = filterOptions.data;
 				});
-			});
+			}); */
+
+			const oParam = Object.fromEntries(
+				[...this.#owner.body.querySelectorAll("ng-filter-button")]
+					.flatMap(el => el.filterOptions)
+					.filter(opt => opt.data.length > 0)
+					.map(opt => [opt.colnm, opt.data])
+			);
 			
-			this.#target.owner.filtering.set(oParam);
-
+			this.#owner.filtering.set(oParam);
 			this.classList.remove("loading");
 		});
 		
-		$(this).hide();
+		//$(this).hide();
+		this.style.display = 'none';
 	};
 	
 	
 	
 	#onCancel = (e) => {
-		$(this).hide();
+		//$(this).hide();
+		this.style.display = 'none';
 	};
 
 	#onSelectAll = (e) => {
@@ -336,13 +344,13 @@ class ngFilterPanel extends HTMLElement
 
 	open = (filterButton) => {
 
-		const owner = this.shadow.closest("nine-grid");
+		//const owner = this.shadow.closest("nine-grid");
 
 		/** 위치 */
 		const cell = filterButton.closest("th,td");
 
 		const filterButtonRect = filterButton.getBoundingClientRect();
-		const ownerRect = owner.getBoundingClientRect();
+		const ownerRect = this.#owner.getBoundingClientRect();
 		const cellRect = cell.getBoundingClientRect();
 		const targetRect = this.getBoundingClientRect();
 
@@ -362,12 +370,7 @@ class ngFilterPanel extends HTMLElement
 		var col = filterButton.closest('th,td').dataset.col;
 		this.col = col;
 
-		this.#target = {
-			owner	: owner,
-			button	: filterButton,
-			uuid	: owner.uuid,
-			col		: col,
-		}
+		this.#button = filterButton;
 		
 		this.style.display = 'flex';
 		this.classList.add("loading");
@@ -381,7 +384,7 @@ class ngFilterPanel extends HTMLElement
 		setTimeout(() => {
 
 			
-			let data = owner.data.getValidDataNF();
+			let data = this.#owner.data.getValidDataNF();
 			
 			var ds = [];
 			filterButton.filterOptions.forEach((filterOption,i) => {
@@ -393,22 +396,22 @@ class ngFilterPanel extends HTMLElement
 				});
 
 				/**
-				var cell = $(`[data-col=${col}][data-bind=${filterOption.colnm}]`, owner.template);
+				var cell = $(`[data-col=${col}][data-bind=${filterOption.colnm}]`, this.#owner.template);
 				var expr = cell.attr("data-expr");
-				var exprFunc = (expr) ? owner.exprFunction(expr) : null;
+				var exprFunc = (expr) ? this.#owner.exprFunction(expr) : null;
 				*/
 				
-				const cell = ninegrid.j.querySelectorAll(`[data-col="${col}"][data-bind="${filterOption.colnm}"]`, owner.tmpl).elem();
+				const cell = ninegrid.j.querySelectorAll(`[data-col="${col}"][data-bind="${filterOption.colnm}"]`, this.#owner.tmpl).elem();
 				const expr = cell.getAttribute("data-expr");
-				const exprFunc = (expr) ? owner.exprFunction(expr) : null;
+				const exprFunc = (expr) ? this.#owner.exprFunction(expr) : null;
 
 				var data2 = [];
 				for (var rowData of data) {
-					var idx = owner.fields.indexOf(filterOption.colnm);
+					var idx = this.#owner.fields.indexOf(filterOption.colnm);
 					
 					if (expr) {
-						var o = owner.data.conv(rowData);
-						data2.push({v:o[filterOption.colnm],v2:exprFunc(o, rowData.__ng.rowidx, owner.data)});
+						var o = this.#owner.data.conv(rowData);
+						data2.push({v:o[filterOption.colnm],v2:exprFunc(o, rowData.__ng.rowidx, this.#owner.data)});
 					}
 					else {
 						data2.push({v:rowData.v[idx],v2:rowData.v[idx]});