다시 문의 드리기 위하여 제공해주시는 샘플 수정하여 아래와 같이 js 코드를 작성했습니다.
아래 컬럼 중 date2 에 노출되는 컬럼의 경우 셀의 드롭다운 아이콘으로 달력을 표시하려고 하면 최초 문의했던 오류가 발생하면서 달력 UI 가 노출되지 않습니다.
추가로 확인해보면 데이터에 null 이 들어가는 경우에는 값이 나오지 않더라도 달력 UI 가 노출되는데 ''(공백문자) 로 입력되는 경우에는 UI 가 노출되지 않습니다.
확인 부탁드립니다.
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo-core.css';
import './styles.css';
import { FlexGrid } from '@grapecity/wijmo.grid';
import { InputDate } from '@grapecity/wijmo.input';
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
let data = [];
for (var i = 0; i < 30; i++) {
data.push({
id: i,
date: new Date(2015, Math.floor(i / 10) % 12, (Math.floor(i / 10) + 1) % 28),
date2: ''
});
}
new FlexGrid('#theGrid', {
autoGenerateColumns: false,
columns: [
{
header: 'Date', binding: 'date', width: 150,
format: 'yyyy-MM-dd',
editor: new InputDate(
document.createElement('div'),
{
format: 'yyyy-MM-dd',
mask: '0000-00-00',
placeholder: '____-__-__',
isRequired: false
}
)
},
{
header: 'Date2', binding: 'date2', width: 150,
format: 'yyyy-MM-dd',
editor: new InputDate(
document.createElement('div'),
{
format: 'yyyy-MM-dd',
mask: '0000-00-00',
placeholder: '____-__-__',
isRequired: false
}
)
}
],
itemsSource: data
});
}