[ag-grid] checkbox 안보이게 / 체크안되게 하는 방법 (checkboxSelection / showDisabledCheckboxes)

UI

 

특정 값일때는 checkbox 미노출 되도록 작업하였다.

ag-grid disabled

 

 

아래 사진을 보면 전체선택시 클릭이 되지 않는 것을 볼 수 있다. 

ag-grid disabled 전체선택

 

 

code

 

showDisabledCheckBoxes 이용 !!

 

    var prd02_columnDefs = [
        { field: ' ', headerName:'', width:40, headerCheckboxSelection:true, checkboxSelection:true, showDisabledCheckboxes:true},
        { field: 'status', headerName: '상품오더 상태', width: 100, suppressSizeToFit: true, cellClass: ['align_center'] },
        { field: 'productId', headerName: '상품번호', width: 100, suppressSizeToFit: true, cellClass: ['align_left'], cellStyle:styleLink},
        { field: 'requestQuantity', headerName: 'MD 요청수량', width: 100, suppressSizeToFit: true, format:"#,###", cellClass: ['align_center']},
        { field: 'availableQuantity', headerName: '입고(가능)수량', width:120, cellClass:['align_right'], format:"#,###", editable:app_prd02_grid.is_modify_visible, cellStyle:app_prd02_grid.edit_cell},
        { field: 'barcode', headerName: '바코드', width:120, cellClass:['align_right'], editable:app_prd02_grid.is_modify_visible, cellStyle:app_prd02_grid.edit_cell},
        { field: 'dueDate', headerName: '입고예정일', width: 150, suppressSizeToFit: true, cellClass: ['align_center'], editable:app_prd02_grid.is_modify_visible, cellStyle:app_prd02_grid.edit_cell, cellEditor: 'agDateCellEditor', },
        { field: 'dueDate', headerName: '입고예정일2', width: 150, cell: 'agDateColumnFilter', },

        { field: 'stockDate', headerName: '입고처리일', width: 150, suppressSizeToFit: true, cellClass: ['align_center']},
        { field: 'none1', headerName: '실제입고수량\n제공불가', width: 80, suppressSizeToFit: true, format:"#,###", cellClass: ['align_center']},
        { field: 'stockIndex', headerName: '입고차수', width: 80, suppressSizeToFit: true, cellClass: ['align_left'], cellStyle:styleLink},\
    ];

 

중요한 부분은 체크박스 field에 해당값부분이다. 

eaderCheckboxSelection:true, checkboxSelection:true, showDisabledCheckboxes:true

 

 

그리고 columnDefs 아래에서 이와 같이 리스트내 특정값으로 disabled 처리 할 수 있다. 

prd02_gx.grid_options.isRowSelectable = function(rowNode) {
    var node_data = prd02_gx.getRowData(rowNode);
    var status = node_data.status;

    return status != "COMPLETE" ? true : false;
}

 

 

 

실패했던 방법 : ag-grid는  체크박스가 없어도 전체선택이 된다. 

처음에 실패했던 방법도 공유. 

나는 show 하지 않으면 전체 선택해서 checkbox가 없으니 전체선택시 걸러질줄 알았는데 체크박스가 없어도 선택이 된다. 

 

checkboxSelection 이용 !!

ag-grid nonshow

 

 

여기서 전체 선택을 하면 

ag-grid nonshow 전체선택

 

disabled 된것과 달리 체크박스가 없어도 파란색으로 체크가  된 것을 볼 수있다. 

 

nonshow checkbox code

 

    var prd02_columnDefs = [
        { field: ' ', headerName:'', width:40, headerCheckboxSelection:true, checkboxSelection:app_prd02_grid.is_modify_visible},
        { field: 'status', headerName: '상품오더 상태', width: 100, suppressSizeToFit: true, cellClass: ['align_center'] },
        { field: 'productId', headerName: '상품번호', width: 100, suppressSizeToFit: true, cellClass: ['align_left'], cellStyle:styleLink},
        { field: 'requestQuantity', headerName: 'MD 요청수량', width: 100, suppressSizeToFit: true, format:"#,###", cellClass: ['align_center']},
        { field: 'availableQuantity', headerName: '입고(가능)수량', width:120, cellClass:['align_right'], format:"#,###", editable:app_prd02_grid.is_modify_visible, cellStyle:app_prd02_grid.edit_cell},
        { field: 'barcode', headerName: '바코드', width:120, cellClass:['align_right'], editable:app_prd02_grid.is_modify_visible, cellStyle:app_prd02_grid.edit_cell},
        { field: 'dueDate', headerName: '입고예정일', width: 150, suppressSizeToFit: true, cellClass: ['align_center'], editable:app_prd02_grid.is_modify_visible, cellStyle:app_prd02_grid.edit_cell, cellEditor: 'agDateCellEditor', },
        { field: 'dueDate', headerName: '입고예정일2', width: 150, cell: 'agDateColumnFilter', },

    ];

 

여기서 주목해야할 건 

headerCheckboxSelection:true, checkboxSelection:app_prd02_grid.is_modify_visible

 

이부분이다. checkboxSelection에 function을 이용하여 show를 제어했다. 

 

// 출고완료 상태에서는 수정불가
is_modify_visible:function(params) {
    var row = prd02_gx.getRowIndex(params);
    var status = prd02_gx.getCellValue(row, 'status');
    if (status === 'COMPLETE') {
        return false;
    }else {
        return true;
    }
},

 

여기서는 function is_modify_visible 에서 넘겨주는 값에 따라

true : checkbox 노출

false : checkbox 비노출

 

비노출되어도 상단 전체선택시 해당 행이 선택되는 점 유의 필요 !!!

 

 

 

ag-grid document  Displaying Disabled checkboxes 도큐먼트

https://www.ag-grid.com/angular-data-grid/row-selection/#checkbox-selection