Problems that occur when using editing mode in treegrid.

This topic has 1 reply, 2 voices, and was last updated 1 week, 6 days ago by Markov.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts

May 30, 2025 at 7:02 am #112545

Participant

I'm using editing mode in treegrid and I'm having some issues.

1. When using the checkBoxes option, when the checkbox of the parent node is checked, the checkboxes of the child nodes are checked normally, but the checkboxes of the child nodes are not selected at all.
2. When you enter and exit editing mode in the grid, the grid is automatically re-rendered and the entire tree is closed.
3. There is a column in the grid's columns with template:'checkBox', editor:'checkBox' called useYn. When using a tree grid, even though editing.action is click, the checkbox works only when you click the cell twice. Also, when the checkbox works, the grid re-renders and all trees are closed.

What I want is to freely edit the cells in the grid with editing.batch: true and then click the save button to save them all to the server.

I've attached the source I'm working on.

=====================================================================

import React, { useEffect, useRef, useState } from 'react';
import { Grid } from 'smart-webcomponents-react/grid';
import { Button } from 'smart-webcomponents-react/button';
import { menuApi } from '@api';
import * as utils from "@/assets/js/common/index.js";

export default function MenusManagement() {
    const gridRef = useRef();
    const menuDataSource = useRef();

    const fetchMenus = async () => {
       try {
          const json = await menuApi.getMenus();
          if (!json.success || !json.data) return;

          const flatData = json.data.map(item => ({
             ...item,
             menuId: String(item.menuId),
             parentMenuId: item.parentMenuId === null || item.parentMenuId === undefined ? null : String(item.parentMenuId),
             leaf: item.hasChildren === false
          }));

          const nested = utils.buildNestedTree(flatData, {
             idKey: 'menuId',
             parentIdKey: 'parentMenuId',
             childrenKey: 'children'
          });

          menuDataSource.current = nested;
          gridRef.current.nativeElement.dataSource = nested;
       } catch (e) {
          console.error('메뉴 조회 실패:', e);
       }
    };

    const saveMenus = async () => {
       try {
          const updatedData = gridRef.current.nativeElement.rows.map(row => row.data);
          const res = await fetch('/api/menus', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(updatedData)
          });
          const json = await res.json();
          if (json.success) {
             alert('저장 완료');
             fetchMenus();
          }
       } catch (e) {
          console.error('저장 실패:', e);
       }
    };

    useEffect(() => {
       fetchMenus();
    }, []);

    // 그리드 설정 상수
    const GRID_CONFIG = {
       appearance: {
          showRowHeaderFocusIcon: false,
          showRowHeaderEditIcon: false
       },
       selection: {
          enabled: true,
          mode: 'extended',
       },
       editing: {
          enabled: true,
          mode: 'cell',
          batch: true,
          command: (settings) => {
             // ✅ 사용자 편집은 허용하지만 실제 데이터는 수정 안 함
             // 이걸 return false 하면 변경이 무시됨
             return false;
          }
       },
       checkBoxes: {
          visible: true,
          hasThreeStates: true
       }
    };

    const columns = [
       { label: '메뉴 ID', dataField: 'menuId', dataType: 'string', visible: false },
       { label: '부모 ID', dataField: 'parentMenuId', dataType: 'string', visible: false },
       { label: '메뉴명', dataField: 'menuName', dataType: 'string' },
       { label: '정렬순서', dataField: 'displayOrder', dataType: 'number' },
       { label: '사용여부', dataField: 'useYn', dataType: 'boolean', template: 'checkBox', editor: 'checkBox', width: '70px' },
       { label: '경로(path)', dataField: 'path', dataType: 'string' },
       { label: '컴포넌트', dataField: 'component', dataType: 'string' },
       { label: '다국어 키', dataField: 'localeKey', dataType: 'string' },
    ];

    return (
          <div className="p-4">
             <div className="flex justify-between items-center mb-4">
                <h2 className="text-xl font-bold">📁 메뉴 관리</h2>
                <Button onClick={saveMenus}>저장</Button>
             </div>
             <Grid
                   ref={gridRef}
                   dataSourceSettings={{
                      id: 'menuId',
                      childrenDataField: 'children'
                   }}
                   editing={GRID_CONFIG.editing}
                   checkBoxes={GRID_CONFIG.checkBoxes}
                   selection={GRID_CONFIG.selection}
                   columns={columns}
                   style={{width: '100%', height: 'calc(100vh - 180px)'}}
             />
          </div>
    );
}
==============================================================================