{"componentChunkName":"component---src-templates-example-page-js","path":"/tutorial-example03-custom-editor","result":{"data":{"examplePageJson":{"title":"3. Custom Editor","codeJs":"\n class CustomTextEditor {\n constructor(props) {\n const el = document.createElement('input');\n const { maxLength } = props.columnInfo.editor.options;\n\n el.type = 'text';\n el.maxLength = maxLength;\n el.value = String(props.value);\n\n this.el = el;\n }\n\n getElement() {\n return this.el;\n }\n\n getValue() {\n return this.el.value;\n }\n\n mounted() {\n this.el.select();\n }\n }\n\n const grid = new tui.Grid({\n el: document.getElementById('grid'),\n scrollX: false,\n scrollY: false,\n columns: [\n {\n header: 'Name',\n name: 'name',\n editor: 'text'\n },\n {\n header: 'Artist',\n name: 'artist',\n editor: {\n type: CustomTextEditor,\n options: {\n maxLength: 10\n }\n }\n },\n {\n header: 'Type',\n name: 'typeCode',\n formatter: 'listItemText',\n editor: {\n type: 'select',\n options: {\n listItems: [\n { text: 'Deluxe', value: '1' },\n { text: 'EP', value: '2' },\n { text: 'Single', value: '3' }\n ]\n }\n }\n },\n {\n header: 'Genre',\n name: 'genreCode',\n formatter: 'listItemText',\n editor: {\n type: 'checkbox',\n options: {\n listItems: [\n { text: 'Pop', value: '1' },\n { text: 'Rock', value: '2' },\n { text: 'R&B', value: '3' },\n { text: 'Electronic', value: '4' },\n { text: 'etc.', value: '5' }\n ]\n }\n },\n copyOptions: {\n useListItemText: true // when this option is used, the copy value is concatenated text\n }\n },\n {\n header: 'Grade',\n name: 'grade',\n copyOptions: {\n useListItemText: true\n },\n formatter: 'listItemText',\n editor: {\n type: 'radio',\n options: {\n listItems: [\n { text: '★☆☆', value: '1' },\n { text: '★★☆', value: '2' },\n { text: '★★★', value: '3' }\n ]\n }\n }\n }\n ]\n });\n grid.on('beforeChange', ev => {\n console.log('before change:', ev);\n });\n grid.on('afterChange', ev => {\n console.log('after change:', ev);\n })\n grid.resetData(gridData);\n ","codeHtml":"\n <div id=\"grid\"></div>\n "},"file":{"relativePath":"examples/example03-custom-editor.html"}},"pageContext":{"id":"tutorial-example03-custom-editor","filename":"example03-custom-editor"}},"staticQueryHashes":["1348573739","1897965698","2583274425","4108157242"]}