! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!
제품 버전 확인하기

props로 받아온 데이터 itemsSource에 넣었는데 grid 갱신이 안됩니다. > Q&A | 토론

본문 바로가기
로그인

로그인후 이용해주세요

아직 회원이 아니신가요?

회원가입
로그인
MESCIUS 카카오톡 채널 추가
메시어스 +
카카오톡 채널 추가를 통해 MESCIUS의 최신 정보, 이벤트, 세미나 정보를 빠르게 받아 보실수 있습니다
홈 링크 페이스북 링크 유튜브 링크

Wijmo

Q&A | 토론

ReactJS props로 받아온 데이터 itemsSource에 넣었는데 grid 갱신이 안됩니다.

페이지 정보

작성자 enffriend
프로필 보기 쪽지 보내기
작성일 2023-09-14 13:46 조회 452회 댓글 0건
제품 버전 : Wijmo Library 5.20231.888
컨트롤 이름 : flexGrid

본문

안녕하세요.


props로 받아온 데이터 itemsSource에 넣었는데 grid 갱신이 안됩니다.


grid 행 클릭 시 데이터를 자식컴포넌트에 props로 넘기고


자식컴포넌트에서는 useEffect로 해당데이터에 의존성을 걸어두고 있습니다.


 

해당 데이터를 flexGrid에 바인딩하기 위한 설정입니다.


위 처럼 하였을 때 콘솔은 잘찍히지만 grid는 갱신이 되지않는 상황입니다.



 

#itemsSource #flexGrid #grid
  • 페이스북으로 공유
  • 트위터로 공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

2 답변

ReactJS Re: props로 받아온 데이터 itemsSource에 넣었는데 grid 갱신이 안됩니다.

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 GCK루시
프로필 보기 쪽지 보내기
작성일 2023-09-18 15:26 댓글 6건

본문

안녕하세요 그레이프시티입니다.


문의하신 내용과 관련하여 상위 컴포넌트(App)에 존재하는 그리드의 행 클릭하고 해당 행의 상세 데이터를 하위 컴포넌트(DetailGrid)에 전달한 뒤, 데이터를 바인딩했을 때 문제없이 새롭게 적용되었습니다. 


아래 저희 쪽 샘플을 공유드리오니 샘플과 비교하여 저희 쪽으로 재현 가능한 샘플을 공유해주신다면 재현 및 디버깅 후 안내드릴 수 있도록 하겠습니다.


※ 상단 그리드의 다른 행을 클릭 시 하단 그리드 데이터가 변하는 것을 확인하실 수 있습니다.


 


- selectionChanged API 문서 

- getCellData API 문서


관련 API 문서를 공유드리며 다른 궁금한 점이 생기면 문의주시기 바랍니다.


감사합니다.

그레이프시티 드림

댓글목록

삭제된 댓글

enffriend
프로필 보기 쪽지 보내기
작성일

삭제된 댓글 입니다.

삭제된 댓글

enffriend
프로필 보기 쪽지 보내기
작성일

삭제된 댓글 입니다.

enffriend님의 댓글

enffriend
프로필 보기 쪽지 보내기
작성일

자세한 답변 감사합니다. 참고해서 적용해보았습니다만 해당 소스와 다르게 getData처럼 정의되 있는 데이터가 아닌 api를 호출하여 값을 업데이트해야하도록 구현했을 때는 detail grid가 업데이트 되지않습니다

React.useEffect(() => {
        if (theGrid.current && theGrid.current.control && theGrid.current.control.hostElement) {
                theGrid.current.control.hostElement.key = Math.random();
        }
    });

    useEffect(() => {
        const shippingListData = async () => {
            commonStore.loading = true;
            const result = await commonStore.handleApi({
                method: 'GET',
                url: '/slip-out-sales',
                data: {
                    company: 'G',
                    status: 1,
                    period: 1,
                    start_date: '2023-06-01',
                    end_date: '2024-06-01',
                },
            });
            if (result) {
                setSource(new wjCore.CollectionView(result.data, {}))
            }
            commonStore.loading = false;
        };
        shippingListData();
    }, []);


    const initGrid = (s) => {
        // state.grid = grid;        
        if (source && source.sourceCollection && source.sourceCollection.length > 0
            && source.sourceCollection[0].dataArr) {
            setDetailGrid(source.sourceCollection[0].dataArr); // 초기 데이터셋
        }      
       
        s.selectionChanged.addHandler(function (s, e) {
            // 이벤트 핸들러 내부에서도 null 체크
            // if (source === null || source.sourceCollection === null) return;
            const rowIndex = e.row;
            const colIndex = e.col;

            // getCellData를 사용하여 셀의 데이터를 가져온다.
            // const cellData = s.getCellData(rowIndex, colIndex, true);
            const selectedRowData = s.collectionView.currentItem;            
            // console.log("selectedRowData: ", selectedRowData)
            setDetailGrid(selectedRowData);

            // if (source !== null && source.sourceCollection !== null) {
                // var key = s.getCellData(rowIndex, colIndex);
                //console.log("key: ", key)
                // selectedRowData.forEach((item) => {
                //     if (item.id == key) {
                //         setDetailGrid(item.dataArr);
                //     }
                // });
            // }
        });



<Col span={24} style={{ height: 'calc(100% - 53px)', paddingBottom: 0 }} >
                <div className='scroll-box'>
                    <FlexGrid
                        className="scroll"
                        ref={theGrid}
                        // key={source ? 'initialized' : 'not-initialized'} // source상태가 변경될 때 FlexGrid가 다시 렌더링되도록 할 수 있습니다.
                        itemsSource={source} // {state.data}
                        initialized={(s) => initGrid(s)}
                        isReadOnly={true}
                        headersVisibility="Column"
                        selectionMode="Row"
                        //selectedItems={searchData[0]}
                        style={{ minHeight: `calc(100vh - ${gridHeight}px)`, maxHeight: `calc(100vh - ${gridHeight}px)` }}
                    >
                        <FlexGridColumn binding="id" header="ID"></FlexGridColumn>
                        <FlexGridColumn binding="slip_code" header="전표 코드"/>
                    </FlexGrid>
                </div>
                <div id="tplBtnViewMode">
                    <div className="btnLayoutWrap">
                        <button id="btnNew" className="btn-layout ant-btn ant-btn-circle">N</button>
                    </div>
                </div>
            </Col>            
            {detailGrid && <DetailsGridNew selectedRowData={detailGrid.details} />}


위 소스에서 result 결과값을 detail 컴포넌트에 전달합니다.

-detail-
const index = inject('commonStore')(observer(({ gridHeight, commonStore, selectedRowData }) => {
    // console.log("detail_selectedRowData: ", selectedRowData)
    //위 코드에서 inject('commonStore')로 commonStore를 주입하고,
    //observer로 컴포넌트를 관찰 가능하게 만들었습니다.
    //이제 commonStore의 함수와 상태에 접근할 수 있어야 합니다.
    //반드시 컴포넌트가 렌더링 될 때 commonStore를 주입해야 합니다.
    //이렇게 하면 commonStore에 정의된 함수 및 상태에 접근할 수 있게 됩니다.
   
    return (
        <Row className="table">
            <Col className="label" span={24} style={{ justifyContent: 'left' }}>
                <FlexGridSearch ref={theSearch} placeholder='검색' />
            </Col>
            <Col span={24}>
                <div className='scroll-box'>
                    {console.log("데이터 변경", gridData)}
                    <FlexGrid
                        ref={theGrid}
                        itemsSource={gridData}
                    >
                        <FlexGridColumn binding="id" header="ID" width={60} />
                        <FlexGridColumn binding="fixed_price" header="전표 코드" width={100} />
                         
                    </FlexGrid>
detail은 props로 받아 데이터를 바인딩하는 기능밖에 없습니다.
상위 컴포넌트에서 행 선택 시 이벤트가 잘 동작하여 전달되고 "데이터 변경, data" 로그로도 잘찍히는것까지 확인하였지만
flexGrid에 업데이트가 안됩니다.

주신 샘플예제에서 getData처럼 정적인 데이터 말고 통신해서 그 결과값을 바인딩하는 샘플 소스 요청드립니다.

enffriend님의 댓글

enffriend
프로필 보기 쪽지 보내기
작성일

전체 데이터(result.data) 입니다

{
    "data": [
        {
            "id": 4,
            "slip_code": "G230708S002",
            "company": "G",
            "company_name": "도서출판",
            "sales_account_id": 67890,
            "sales_account_code": null,
            "logistics_code": null,
            "sales_account_name": null,
            "sales_account_branch_name": null,
            "order_source_name": "서점 SCM",
            "order_type": "1",
            "order_type_name": "일반",
            "settlement_type": "1",
            "settlement_type_name": "위탁",
            "warehouse_name": "라임북(정품)",
            "order_quantity": null,
            "order_amount": null,
            "status_name": "주문 등록",
            "order_date": "2023-07-07 00:00:00",
            "ship_date": null,
            "slip_note": "Example slip note",
            "details": [
                {
                    "id": 3,
                    "product_id": 10504,
                    "product_name": "아이랑자동차여행코스북",
                    "product_code": "020194",
                    "isbn": "9791165218829",
                    "distribution_qty": 5,
                    "shipping_qty": 5,
                    "shipping_qty_1": 3,
                    "shipping_qty_2": 2,
                    "shipping_qty_3": 0,
                    "fixed_price": "100",
                    "rate": "1",
                    "unit_price": "200",
                    "order_amount": "1000"
                },
                {
                    "id": 4,
                    "product_id": 10504,
                    "product_name": "아이랑자동차여행코스북",
                    "product_code": "020194",
                    "isbn": "9791165218829",
                    "distribution_qty": 3,
                    "shipping_qty": 3,
                    "shipping_qty_1": 1,
                    "shipping_qty_2": 2,
                    "shipping_qty_3": 0,
                    "fixed_price": "150",
                    "rate": "1",
                    "unit_price": "300",
                    "order_amount": "900"
                }
            ]
        },
        {
            "id": 9,
            "slip_code": "G230710S001",
            "company": "G",
            "company_name": "도서출판",
            "sales_account_id": 2,
            "sales_account_code": null,
            "logistics_code": "k1234",
            "sales_account_name": "사업자명",
            "sales_account_branch_name": null,
            "order_source_name": "병합",
            "order_type": "1",
            "order_type_name": "일반",
            "settlement_type": "1",
            "settlement_type_name": "위탁",
            "warehouse_name": "라임북(정품)",
            "order_quantity": 40,
            "order_amount": "252450",
            "status_name": "주문 등록",
            "order_date": "2023-07-12 20:29:28",
            "ship_date": null,
            "slip_note": "Example slip note",
            "details": [
                {
                    "id": 7,
                    "product_id": 1,
                    "product_name": null,
                    "product_code": null,
                    "isbn": null,
                    "distribution_qty": 5,
                    "shipping_qty": 5,
                    "shipping_qty_1": 3,
                    "shipping_qty_2": 2,
                    "shipping_qty_3": 0,
                    "fixed_price": null,
                    "rate": "50",
                    "unit_price": "0",
                    "order_amount": "0"
                },
                {
                    "id": 8,
                    "product_id": 2,
                    "product_name": null,
                    "product_code": null,
                    "isbn": null,
                    "distribution_qty": 5,
                    "shipping_qty": 5,
                    "shipping_qty_1": 3,
                    "shipping_qty_2": 2,
                    "shipping_qty_3": 0,
                    "fixed_price": null,
                    "rate": "50",
                    "unit_price": "0",
                    "order_amount": "0"
                },
                {
                    "id": 37,
                    "product_id": 8004,
                    "product_name": "기적의영어동화10권(이상한나라의앨리스)",
                    "product_code": "300157",
                    "isbn": "9788990279910",
                    "distribution_qty": 15,
                    "shipping_qty": 15,
                    "shipping_qty_1": 9,
                    "shipping_qty_2": 6,
                    "shipping_qty_3": 0,
                    "fixed_price": "9000",
                    "rate": "55",
                    "unit_price": "4950",
                    "order_amount": "74250"
                },
                {
                    "id": 38,
                    "product_id": 10504,
                    "product_name": "아이랑자동차여행코스북",
                    "product_code": "020194",
                    "isbn": "9791165218829",
                    "distribution_qty": 15,
                    "shipping_qty": 15,
                    "shipping_qty_1": 9,
                    "shipping_qty_2": 6,
                    "shipping_qty_3": 0,
                    "fixed_price": "19800",
                    "rate": "60",
                    "unit_price": "11880",
                    "order_amount": "178200"
                }
            ]
        },
    ]
}

enffriend님의 댓글

enffriend
프로필 보기 쪽지 보내기
작성일

위 댓글을 정리하여 새로운 질문에 등록하였습니다.

GCK루시님의 댓글의 댓글

GCK루시
프로필 보기 쪽지 보내기
작성일

안녕하세요 그레이프시티입니다.

해당 문의와 관련하여 본사 개발팀에 리포팅하여 확인 중에 있습니다. 관련하여 업데이트가 있는대로 안내 드리도록 하겠습니다.

감사합니다.
그레이프시티 드림

ReactJS Re: props로 받아온 데이터 itemsSource에 넣었는데 grid 갱신이 안됩니다.

추천0 이 글을 추천하셨습니다 비추천0 채택채택

페이지 정보

작성자 GCK루시
프로필 보기 쪽지 보내기
작성일 2023-09-21 11:11 댓글 0건

본문

안녕하세요 그레이프시티입니다.


본사 개발팀에 확인해본 결과, 동적 혹은 정적인 데이터의 문제보다는 FlexGrid의 이벤트 핸들러 기능 내부에서 적절하게 업데이트되지 않은 useState Hook로 인해 해당 이슈가 발생된 것으로 보입니다. 따라서 해당 이슈를 해결하기 위해 'useEvent' Hook를 사용해보시기 바랍니다. 아래 간단한 샘플을 공유드리오니 참고 부탁드립니다.




감사합니다.

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

카테고리

인기글

더보기

최신글

더보기

셀럽

최근 7일 종합
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.