2020/10: 2개의 글

[DevExtreme] datagrid 사용법 및 옵션 정리

Posted by 고 고특파원
2020. 10. 18. 23:34 프로그래밍/javascript
Devextreme datagrid

프로젝트를 진행하다 보면 반드시 사용하게 되는 datagrid에대해 정리한다.

 

프로젝트는 jQuery로 진행할 것이다.

 

html

<div id="grid"></div>

간단히 div tag에 id값을 사용하여 html Tag를 사용한다.

 

js

	var _dataGrid;  
    
    var _dataList = [{
        "ID": 1,
        "FirstName": "John",
        "LastName": "Heart",
        "Prefix": "Mr.",
        "Position": "CEO",
        "BirthDate": "1964/03/16",
        "HireDate": "1995/01/15",
        "Notes": "John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.",
        "Address": "351 S Hill St.",
        "StateID": 5,
        "Key":"1",

    }, {
        "ID": 2,
        "FirstName": "Olivia",
        "LastName": "Peyton",
        "Prefix": "Mrs.",
        "Position": "Sales Assistant",
        "BirthDate": "1981/06/03",
        "HireDate": "2012/05/14",
        "Notes": "Olivia loves to sell. She has been selling DevAV products since 2012. \r\n\r\nOlivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.",
        "Address": "807 W Paseo Del Mar",
        "StateID": 5,
        "Key":"2",
    },
    ];

_dataGrid = $("#grid").dxDataGrid({
            dataSource: _dataList,
            keyExpr: "Key",
            showBorders: true,              // DataGrid Border
            columnAutoWidth: true,          // 컬럼 자동 Width 설정
            wordWrapEnabled: false,         // DataGrid Text Wrap 여부
            rowAlternationEnabled: true,    // 짝수 Row 음영
            allowColumnResizing: true,      // 컬럼 사이즈 조절 여부
            allowColumnReordering: true,    // 컬럼 위치 조절 여부
            focusedRowEnabled: false,        // FocusedRow 포커싱 여부 (해당 옵션이 true이어야, onFocusedRowChanged Evnet 발생)
            filterRow: { visible: true },	// filter 및 Search row 
            pager: {
                showPageSizeSelector: true,
                allowedPageSizes: [5, 10, 20],
                showInfo: false
            },
            paging: {
                enabled: true,
                pageSize: 10
            },
            editing: {
                mode: 'cell', // 'batch' | 'cell' | 'form' | 'popup'
                allowUpdating: true
            },
            selection: {
                mode: "multiple"
            },
            onRowUpdating: function (e) {
                var row = e.oldData;
                console.log(row.STATE == "C" ? "C" : "U");
                row.ACTION = row.STATE == "C" ? "C" : "U";
            },
            onInitNewRow: function (e) {

                e.data.Key = "Key값 설정"
                e.data.STATE = "C";

                setTimeout(function () {
                    _dataGrid.option("focusedRowKey", e.data.Key);
                }, 10);
            },
            onEditingStart: function (e) {

            },
            onRowInserting: function (e) {

            },
            onRowInserted: function (e) {

                //새로 생성된 Row에 Focuse 되도록 변경
                _dataList.unshift(e.data);
                _dataList.splice((_dataList.length - 1), 1);

                _dataGrid.option({
                    dataSource: _dataList
                });

            },
            onFocusedRowChanged: function (e) {

                //const focusedRowKey = e.component.option("focusedRowKey");
                //console.log(focusedRowKey);

            },
            onRowValidating: function (e) {

                console.log("유효성 체크");
            },
            onContentReady: function (e) {

                e.component.option("pager.visible", !e.component.hasEditData());
                
            },
            columns: [
                {
                    dataField: "Key",
                    caption: "Key",
                    minWidth: 180,
                    allowEditing: false,
                    //width: 300
                },
                {
                    dataField: "ID",
                    caption: "ID",
                    minWidth: 180,
                    allowEditing: false,
                    //width: 300
                },
                {
                    dataField: "FirstName",
                    caption: "FirstName",
                    minWidth: 180,
                    //width: 300
                    validationRules: [{ type: "required", message: "FirstName을 입력하세요." }]
                }
            ]
        }).dxDataGrid("instance");

 

유료 컴포넌트 답게 devextreme에서 왠만한 datagrid 기능은 모두 제공되어진다.

문서화도 잘 되어 있어 사용하기 쉬울 것 같다.

 

Data Grid 관련 기능 Document

 

Overview - DevExtreme Data Grid: jQuery Widgets by DevExpress

--> Copy to CodePen Apply Reset $(function() { $("#gridContainer").dxDataGrid({ dataSource: { store: { type: "odata", url: "https://js.devexpress.com/Demos/SalesViewer/odata/DaySaleDtoes", beforeSend: function(request) { request.params.startDate = "2018-05

js.devexpress.com

완성 되어 보여지는 datagrid

 

완성된 datagrid

WindowForm으로 Devexpress를 사용해와서 그런지,, Web에서 사용하는 Datagrid 기능은 거이 비슷한 것 같다.

 
제 블로그의 내용이 도움이 되셨나요?

여러분의 공감댓글이 큰 힘이됩니다 :)

▼▼▼▼▼▼▼▼▼▼▼
이 댓글을 비밀 댓글로

[DevExtreme] 유료 js 컴포넌트 정리

Posted by 고 고특파원
2020. 10. 11. 12:21 프로그래밍/javascript

프로젝트를 진행하다 알게된 DevExtreme에 대해 정리를 하려고 한다.

 

이전에 DevExpress를 이용하여 프로젝트를 진행하곤 했었는데(윈폼, ASP.Net 등..)

DevExtreme은 javascript용 유료 컴포넌트이다.

 

이전에는 주로 C#(WinForm, WPF, WebForm, ASP.Net, ASP.Net Core) 등 의 컴포넌트를 제공하며 돈을 벌던 회사였는데.. 워낙 javascript가 강세이다 보니 이렇게 js용 컴포넌트도 제공하는건가 싶다.

 

Documentation 제공

js용 컴포넌트답게 다양한 javascript에 대해 샘플코드를 제공한다. (Angular, React, Vue, jQuery 등)

 

컴포넌트 별 다양한 데모 제공

DevExpress는 Demo 파일 및 매뉴얼 문서가 정말 잘 정리되어있어, 처음 프로젝트를 진행하더라도 웬만한 기능에 대해 Demo 및 문서가 정리되어 있으며, 프로젝트를 진행 중 궁금한 사항에 대해서 질문을 했을 때 최대 1주일 이내로 답변도 받아 볼 수 있어 좋은것 같다.

 

 

DevExtreme - HTML5 JavaScript UI Widgets for Angular, React, Vue and jQuery by DevExpress

From Angular and React, to ASP.NET Core or Vue, DevExtreme includes a comprehensive collection of high-performance and responsive UI widgets for use in traditional web and next-gen mobile applications. The suite ships with a feature-complete data�

js.devexpress.com

해당 링크를 통해 좀 더 자세한 내용이 확인 가능하다.

 

프로젝트를 진행하는데 있어 js 컴포넌트를 염두에 두고 있다면.. 한번쯤은 대안을 두고 사용해볼만한 컴포넌트라고 생각한다. 

 

다음 포스팅을 통해 DevExtreme을 이용하여 예제 소스를 하나씩 기록하도록 하겠다.

 

제 블로그의 내용이 도움이 되셨나요?

여러분의 공감댓글이 큰 힘이됩니다 :)

▼▼▼▼▼▼▼▼▼▼▼
이 댓글을 비밀 댓글로