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

셀 내부에 버튼 문의 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

ReactJS 셀 내부에 버튼 문의

페이지 정보

작성자 MESCIUSMAN 작성일 2023-03-03 09:20 조회 1,132회 댓글 0건
제품 버전 : test
컨트롤 이름 : 그리드 및 셀 내부 버튼

본문


그리드 셀 내부에 위와 같이 버튼을 넣고 싶습니다

튜토리얼을 참고하였는데 내부 버튼 스타일은 바꿀수 있었으나 헤더 네임이 버튼으로 지정되서,,,,,

한번 살펴봐 주세요~

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

댓글목록

등록된 댓글이 없습니다.

5 답변

ReactJS Re: 셀 내부에 버튼 문의

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

페이지 정보

작성자 GCK루시 작성일 2023-03-06 14:33 댓글 0건

본문

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


문의하신 Wijmo 헤더 네임이 버튼으로 지정된다는 말씀이 셀 영역 전체가 버튼이 된다는 말씀이실까요? 만약 맞으시다면 CellMaker를 이용하여 버튼을 생성하는 경우, 셀 자체가 버튼이 되므로 별도 버튼 요소를 formatItem 내에서 추가 및 설정해보시기 바랍니다. 아래 간단한 샘플을 공유드리오니 참고 부탁드립니다.



[프리미엄 회원 전환 안내]
라이선스를 보유하고 계신다면, 누구나 추가 비용 없이 그레이프시티 포럼 프리미엄 회원이 될 수 있습니다.
프리미엄 회원으로 전환 시, 기술 문의에 대하여 우선 지원 받으실 수 있습니다.
아래 링크를 통해 프리미엄 회원 전환 방법 및 혜택 안내를 살펴보시길 바랍니다.

다른 궁금한 점이 생기면, 문의주시기 바랍니다.

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

댓글목록

등록된 댓글이 없습니다.

ReactJS Re: 셀 내부에 버튼 문의

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

페이지 정보

작성자 MESCIUSMAN 작성일 2023-03-16 14:29 댓글 1건

본문

먼저 답변에 감사드립니다.


위에 설명 주신데로 버튼은 생성하였지만 버튼 위에 div 안의 내용도 그리드 소스 데이타가 뿌려지듯 되어야합니다.

5236378c1bb56a7dc8920ad9a6e037c6_1678944376_408.png
우측 부분에 more info 버튼처럼 만들 수는 있으나 데이타 소스를 뿌려주는 것에서 어려움이 있습니다

다시 한번 도움 요청 드립니다.

프리미엄은 도메인 확정 후 요청하겠습니다

댓글목록

MESCIUSMAN님의 댓글

MESCIUSMAN 작성일

아 그리고 컬럼을 date 형태 2023/03/16 이런 식으로 변경하려고 하는데 어떻게 해야하나요? 튜토리얼에 나온데로 적용해봤는데 바뀌질 않습니다.

ReactJS Re: 셀 내부에 버튼 문의

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

페이지 정보

작성자 GCK루시 작성일 2023-03-20 10:11 댓글 0건

본문

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


문의하신 내용에 대해 확인 요청 및 답변 드립니다.

1. 버튼 데이터 바인딩 문의

=> 문의 하신 내용의 경우, 기존 셀에 바인딩되어야 할 데이터 접근이 안된다는 말씀이실까요? 이슈와 관련하여 디테일한 단계 및 기존에 공유드렸던 샘플에 해당 이슈를 재현 후, 해당 샘플을 회신 주신다면 재현 및 디버깅 후 답변 드릴 수 있도록 하겠습니다.


2. date 형식 문의

=> 공유해주신 화면 상으로는 해당 셀의 타입이 Date가 아닌 String 또는 Number 형식으로 인식되어 포맷 설정이 원활하게 진행되지 않는 것으로 파악됩니다. 이전에 안내드린 것과 같이 데이터의 형식을 Date 타입으로 먼저 설정해보시고 포맷을 설정해보시기 바랍니다. 아래 데모페이지를 방문하셔서 데이터의 타입을 참고하여 주시기 바랍니다. 


- 사용자 정의 편집기 데모


다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다.

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

ReactJS Re: 셀 내부에 버튼 문의

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

페이지 정보

작성자 MESCIUSMAN 작성일 2023-03-21 09:17 댓글 0건

본문

3bdcc08a7bd2a5ae56f2db0c65539ffd_1679357122_5568.png
3bdcc08a7bd2a5ae56f2db0c65539ffd_1679357122_6557.png
 

화면 전체 소스--------------------

import '@grapecity/wijmo.styles/wijmo.css';
import 'bootstrap/dist/css/bootstrap.css';
import '@grapecity/wijmo.react.grid';

import React, {useState, useEffect} from 'react';
import axios from 'axios';
import {Card, Grid, makeStyles, CardHeader, Typography} from '@material-ui/core';
import {FlexGrid, FlexGridColumn} from '@grapecity/wijmo.react.grid';
import {CellMaker} from '@grapecity/wijmo.grid.cellmaker';
import OrdvdTRFproductPopup from '../../popup/OrdvdTRFproductPopup';
import OrdvdTRFcustomerPopup from '../../popup/OrdvdTRFcustomerPopup';
import {useSelector} from 'react-redux';
import {gridSpacing} from '../../../store/constant';

const useStyles = makeStyles((theme) => ({
    card: {
        backgroundColor: theme.palette.grey[300],
        position: 'relative'
    },
    inquiryBtn: {
        width: '100%'
    },
    pagePst: {
        position: 'absolute',
        top: '30px',
        right: '5px'
    },
    flexGrid: {
        height: 600
    }
}));

const OrdVendorTransferGrid = ({gridData, gridStyle, selectGridtype, selectGridStyle}) => {
    const paraMeter = useSelector((state) => state.parameter);
    const classes = useStyles();

    const [grid, setGrid] = useState();
    const [trfCustomerCode, setTrfCustomerCode] = useState([]);
    const [trfProducCode, setTrfProducCode] = useState([]);
    function initializeGrid(flex) {
        setGrid(flex);
        // flex.rows.defaultSize = 60;
        // console.log('flex', flex);
        // flex.formatItem.addHandler((flex, e) => {
        //     if (e.panel == flex.cells) {
        //         let col = flex.columns[e.col];

        //         if (col.binding === 'buttons') {
        //             e.cell.innerHTML = document.getElementById('btnCell').innerHTML;
        //         }
        //     }
        // });

        flex.addEventListener(flex.hostElement, 'click', (e) => {
            let ht = flex.hitTest(e);
            if (ht.panel.cellType === 1) {
                let editItem = flex.rows[ht.row].dataItem;
                let clickProductCode = editItem.PRODUCT_CODE;
                let clickCustomerCode = editItem.DISTRIBUTOR_NO;
                setTrfCustomerCode(clickCustomerCode);
                setTrfProducCode(clickProductCode);
            }
            // if (e.target instanceof HTMLButtonElement) {
            //     // handle buttons
            //     switch (e.target.id) {
            //         // start editing this item
            //         case 'btnTest':
            //             alert('버튼을 클릭하셨습니다.');
            //             break;
            //     }
            // }
        });
    }

    //customer info(poppup)
    const [customerInfo, setCustomerInfo] = useState([]);
    async function SP_DP_MST_CUSTOMER_INFO() {
        const res = await axios.patch(process.env.REACT_APP_REST_SERVER, {
            p_language: paraMeter.language,
            p_company: sessionStorage.getItem('userCompanyData'),
            p_user: paraMeter.userid,
            p_userip: paraMeter.userip,
            p_pgm: 'SP_DP_MST_CUSTOMER_INFO',
            p_option: {
                in_custcode: trfCustomerCode
            }
        });
        setCustomerInfo(res.data.rows);
        console.log('SP_DP_MST_CUSTOMER_INFO.rows', res.data.rows);
        // console.log("SP_DP_MST_PRODUCT_INFO.rtnResult", res.data.rtnResult);
        // console.log("SP_DP_MST_PRODUCT_INFO.rtnMessage", res.data.rtnMessage);
    }
    useEffect(() => {
        if (trfCustomerCode.length > 0) {
            SP_DP_MST_CUSTOMER_INFO();
        }
        return () => {};
    }, [trfCustomerCode]);

    //product info(popup)
    const [producInfo, setProducInfo] = useState([]);
    async function SP_DP_MST_PRODUCT_INFO() {
        const res = await axios.patch(process.env.REACT_APP_REST_SERVER, {
            p_language: paraMeter.language,
            p_company: sessionStorage.getItem('userCompanyData'),
            p_user: paraMeter.userid,
            p_userip: paraMeter.userip,
            p_pgm: 'SP_DP_MST_PRODUCT_INFO',
            p_option: {
                in_productcode: trfProducCode
            }
        });
        setProducInfo(res.data.rows);
        console.log('SP_DP_MST_PRODUCT_INFO.rows', res.data.rows);

        // console.log("SP_DP_MST_PRODUCT_INFO.rtnResult", res.data.rtnResult);
        // console.log("SP_DP_MST_PRODUCT_INFO.rtnMessage", res.data.rtnMessage);
    }
    useEffect(() => {
        if (trfProducCode.length > 0) {
            SP_DP_MST_PRODUCT_INFO();
        }
        return () => {};
    }, [trfProducCode]);

    const [producPopup, setProducPopup] = useState();
    const productInfoPopup = () => {
        setProducPopup((isOpen) => !isOpen);
    };
    const [customerPopup, setCustomerPopup] = useState();
    const customerInfoPopup = () => {
        setCustomerPopup((isOpen) => !isOpen);
    };

    return (
        <div className="ordvendortransfergrid">
            <Grid container spacing={gridSpacing}>
                <Grid item xs={12}>
                    <Card className={classes.card}>
                        <CardHeader title={<Typography variant="h3">Order Status</Typography>} />
                        <div className={classes.pagePst}>
                            <div className="input-group input-group-sm">
                                <span className="label-span input-group-text" id="label-span">
                                    <Typography variant="h5">Row Count</Typography>
                                </span>
                                <select className="form-select" onChange={selectGridStyle} value={selectGridtype}>
                                    {gridStyle.map((el, i) => (
                                        <option value={el.children} key={i}>
                                            {el.title}
                                        </option>
                                    ))}
                                </select>
                            </div>
                        </div>
                        <FlexGrid
                            className={classes.flexGrid}
                            isReadOnly={true} // true일때 row값 수정안됨. false일때 row값 수정 가능.
                            // selectionMode="Row" 주석 해제시 한개의 row만 선택됨.
                            itemsSource={gridData}
                            initialized={initializeGrid}
                            allowSorting={false} // 컬럼 헤드 내림차순 오름차순
                            allowDragging={false} // 컬럼 헤드 전체 행 선택
                            stickyHeaders={true} // 컬럼 헤드 고정
                            // allowAddNew={true}
                            // allowDelete={true}
                            alternatingRowStep={0}
                            headersVisibility="Column"
                            autoGenerateColumns={false}
                        >
                            <FlexGridColumn
                                width={100}
                                binding="STATUS"
                                header="Status"
                                // format="d*"
                                align="center"
                            />
                            <FlexGridColumn width={90} binding="ISSUE_DATE" header="Issue Date" align="center" />
                            <FlexGridColumn width={90} binding="DELIVERY_NO" align="center" header="Delivery No" />
                            <FlexGridColumn width={100} binding="DELIVERY_DATE" align="center" format="d" header="Delivery Date" />
                            <FlexGridColumn
                                width={100}
                                binding="DISTRIBUTOR_NO"
                                align="center"
                                header="Distributor No"
                                cellTemplate={CellMaker.makeButton({
                                    click: (e, ctx) => customerInfoPopup()
                                })}
                            />
                            <FlexGridColumn width={110} binding="WAREHOUSE_NO" align="center" header="Warehouse No" />
                            <FlexGridColumn width={90} binding="RMA_PO_NO" align="center" header="RMA PO No" />
                            <FlexGridColumn width={100} binding="CAR_MAKER_NO" align="center" header="Car Maker No" />
                            <FlexGridColumn width={120} binding="CAR_DEALER_CODE" align="center" header="Car Dealer Code" />
                            <FlexGridColumn
                                minWidth={220}
                                binding="CAR_DEALER_NEXEN_ACCOUNT_CODE"
                                header="Car Dealer Nexen Account Code"
                                align="center"
                            />
                            <FlexGridColumn width={130} binding="PURCHASE_ORDER_NO" align="center" header="Purchase Order No" />
                            <FlexGridColumn
                                width={110}
                                padding={0}
                                align="center"
                                // binding="buttons"
                                isReadOnly={true}
                                allowSorting={false}
                                binding="PRODUCT_CODE"
                                header="Product Code"
                                // cellTemplate={CellMaker.makeButton({
                                //     click: (e, ctx) => productInfoPopup()
                                // })}
                                cellTemplate={CellMaker.makeButton({
                                    click: (e, ctx) => productInfoPopup()
                                })}
                            />
                            <FlexGridColumn width={100} binding="DELIVERY_QTY" align="center" header="Delivery Q'ty" />
                            <FlexGridColumn width="*" minWidth={120} binding="" align="center" header="Remark" />
                        </FlexGrid>

                        {/* <div id="btnCell">
                                <div>버튼</div>
                                <Button id="btnTest" className="bn btn-default btn-sm" style={{height: '20px'}}>
                                    <Typography variant="h6">More Info</Typography>
                                </Button>
                            </div> */}
                    </Card>
                </Grid>
                <div className={customerPopup ? 'customerpopup-show' : 'customerpopup-hide'}>
                    <OrdvdTRFcustomerPopup
                        trfCustomerCode={trfCustomerCode}
                        customerInfoPopup={customerInfoPopup}
                        customerInfo={customerInfo}
                    />
                </div>
                <div className={producPopup ? 'producinfopopup-show' : 'producinfopopup-hide'}>
                    <OrdvdTRFproductPopup producInfo={producInfo} trfProducCode={trfProducCode} productInfoPopup={productInfoPopup} />
                </div>
            </Grid>
        </div>
    );
};

export default OrdVendorTransferGrid;
 

end------------------------------


첫번째 스크린샷은 튜토리얼보고 적용한 버튼 형식입니다.

row의 cell 내부에 버튼이 한 공간을 모두 차지하지만 소스의 데이터 바인딩을 하여 버튼 내부에 데이터 값이 나옵니다.


3bdcc08a7bd2a5ae56f2db0c65539ffd_1679357519_1291.png


위 스크린샷은 문의사항에 제공해주신 소스입니다.

제가 원하는 형태의 모습을 갖추고 있으나 FlexGridColumn.내에 바인딩이 button으로 되어 있어 db에서 받아오는 데이터를 바인딩 해줄 수 없습니다.

button위에 한글로 적힌 버튼에 데이터 바인딩을 하고 싶은데 어떻게 해야하나요?


댓글목록

등록된 댓글이 없습니다.

ReactJS Re: 셀 내부에 버튼 문의

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

페이지 정보

작성자 GCK루시 작성일 2023-03-22 09:54 댓글 0건

본문

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


문의하신 내용의 경우 아래 코드와 같이 데이터 바인딩 후, 값에 접근하여 DOM에 설정해주시면 됩니다.


s.formatItem.addHandler((s, e) => {
	if (e.panel == s.cells) {
        let col = s.columns[e.col];

        if (col.binding === "buttons") {
          var str = e.cell.textContent; // 기존 데이터 값 가져오기
 
          e.cell.innerHTML = document.getElementById("btnCell").innerHTML;
          e.cell.firstChild.textContent = str; // 데이터 값 설정
        }
      }
});

(...)
// 데이터 바인딩
<wjcGrid.FlexGridColumn binding="buttons" header="buttons" isReadOnly={true} allowSorting={false} />

(...)


function getData() {
  // create some random data
  let countries = "US,Germany,UK,Japan,Italy,Greece".split(","),
    products = "Phones,Computers,Cameras,Stereos".split(","),
    codes = "GCK123,GCK234,GCK345,GCK456,GCK678,GCK1233".split(","),
    data = [];
  for (let i = 0; i < 20; i++) {
    data.push({
      id: i,
      country: countries[i % countries.length],
      product: products[i % products.length],
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000,
      buttons: codes[i % codes.length] // 데이터 값 설정
    });
  }
  return data;
}


다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다.

그레이프시티 드림

 

댓글목록

등록된 댓글이 없습니다.

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