editor question

[Maino]

        {
          title: '코드도메인',
          dataIndx: 'codeDomainNm',
          width: 150,
          dataType: 'string',
          editor: {
            type: 'select',
            valueIndx: 'codeDomainCd',
            labelIndx: 'codeDomainNm',
            mapIndices: {
              codeDomainNm: 'codeDomainNm',
              codeDomainCd: 'codeDomainCd',
            },
            options: [],
          },
          validations: [{ type: 'minLen', value: 1, msg: 'Required' }],
        }, // 코드도메인

The source currently coded as vue.js.

If I double click on that column, I get a select, can't I get a select even if I click once? And if I change from '공통' to '환경', can't I make the data value of the 'codeDomainCd' column also change??

[paramvir]

1) set editModel.clicksToEdit = 1 to activate editor on 1st click.

Code: [Select]

editModel: {
     clicksToEdit: 1
},

Example: https://paramquery.com/pro/demos/edit_select

2) Add codeDomainCd column in colModel.

Example: https://paramquery.com/pro/demos/editing_custom ( "Shipping Via", "ShipViaId" columns )

[Maino]

Thank you for your answer.

But once I click, I get into fix mode, but the select window doesn't immediately pop up. Also, when coding "cls: 'pq-drop-icon pq-side-icon'", I don't see the icon. And I have to make the fix and press the grid once to release the fix mode. Can I make the fix mode release even if I click somewhere other than the grid??

        {
          title: '코드도메인',
          dataIndx: 'codeDomainNm',
          width: 150,
          dataType: 'string',
          cls: 'pq-drop-icon pq-side-icon',
          editor: {
            type: 'select',
            valueIndx: 'codeDomainCd',
            labelIndx: 'codeDomainNm',
            mapIndices: {
              codeDomainNm: 'codeDomainNm',
              codeDomainCd: 'codeDomainCd',
            },
            options: [],
          },
          validations: [{ type: 'minLen', value: 1, msg: 'Required' }],
        }, // 코드도메인

[paramvir]

1) To open the select list popup on first click, you have to use pqselect or any js select plugin, pqselect has been used in this example:

https://paramquery.com/pro/demos/edit_select

2) css is also required to show the icon in cell:

Code: [Select]

.pq-grid-cell.pq-side-icon > div:before {       
        width: 20px;
        height: 20px;
        color: #ccc;
        float: right;
    }

    .pq-grid-cell.pq-drop-icon > div:before {
        content: "▼";
    }

Example: https://paramquery.com/pro/demos/editing_custom

[Maino]

Thank you for your answer.

If I use 'pqSelect', it comes out as shown in the picture, what is wrong? And once I click on the grid, it goes into modification mode, but even if I click on a mouse somewhere other than the grid, I want to end modification mode.

I know how to get a radio box or a checkbox when I click using the 'editor' attribute. However, I used the 'render' attribute to code in html, and I made the radio box checkbox appear on the default screen, and if it's that value, it's checked. But when a change event like onchange occurs, can I change the value of that row??

[Maino]

Thank you for your answer.

If I use 'pqSelect', it comes out as shown in the picture, what is wrong? And once I click on the grid, it goes into modification mode, but even if I click on a mouse somewhere other than the grid, I want to end modification mode.

        {
          title: '코드도메인',
          dataIndx: 'codeDomainNm',
          width: 150,
          dataType: 'string',
          cls: 'pq-drop-icon pq-side-icon',
          editor: {
            type: 'select',
            valueIndx: 'codeDomainCd',
            labelIndx: 'codeDomainNm',
            mapIndices: {
              codeDomainNm: 'codeDomainNm',
              codeDomainCd: 'codeDomainCd',
            },
            init: function (ui) {
              ui.$cell.find('select').pqSelect();
              setTimeout(function () {
                ui.$cell.find('select').pqSelect('open');
              });
            },
            options: [],
          },
        }, // 코드도메인


I know how to get a radio box or a checkbox when I click using the 'editor' attribute. However, I used the 'render' attribute to code in html, and I made the radio box checkbox appear on the default screen, and if it's that value, it's checked. But when a change event like onchange occurs, can I change the value of that row??

[paramvir]

To use pqselect in Vuejs app, please follow these basic steps:

a) add "pqselect" in the package.json dependencies section.

b) In PqGrid.Vue add

Code: [Select]

import 'pqselect'

2) use column.postRender (similar to reply to your previous post ) to attach change event to radio buttons and use grid.updateRow() method to update the row in the event listener

[Maino]

Code: [Select]

this.gridOptions.header = [ {
          title: '작성자' /* 작성자 */,
          dataIndx: 'createUserNm',
          width: 120,
          dataType: 'string',
        },
        {
          title: '작성일' /* 작성일 */,
          dataIndx: 'createDt',
          width: 120,
          dataType: 'string',
        },

        {
          title: 'Order Date2',
          width: '150',
          dataIndx: 'updateDt',
          dataType: 'date',
          format: 'yy-mm-dd',
          cls: 'pq-calendar pq-side-icon',
          editor: {
            type: 'textbox',
            init: function (ui) {
              var $inp = ui.$cell.find('input');
              var grid = this;
              var format = ui.column.format;
              var vald = $inp.val();
              var val = vald
                ? $.datepicker.formatDate(format, new Date(vald))
                : '';

              // initialize the editor
              $inp
                .attr('readonly', 'readonly')
                .val(val)
                .datepicker({
                  changeMonth: true,
                  changeYear: true,
                  dateFormat: format,
                  showAnim: '',
                  onSelect: function () {
                    this.firstOpen = true;
                  },
                  beforeShow: function (input, inst) {
                    setTimeout(function () {
                      $('.ui-datepicker').css('z-index', 999999999999);
                    });
                  },
                  onClose: function () {
                    this.focus();
                  },
                });
            },
          },
          validations: [
            {
              type: 'regexp',
              value: '^[0-9]{2}/[0-9]{2}/[0-9]{4}$',
              msg: '날짜형식에 맞게 입력하세요.',
            },
          ],
        },
      ];
Grid header code.

You can copy/paste just one cell for the "DataType:" header 'date', but an error occurs when you copy/paste by clicking one row. What should I do?

Code: [Select]

  editModel: {
        clicksToEdit: 2,
      },2) Through the code above, I can do "clicksToEdit: 2" throughout the header, but can I set "clicksToEdit" separately for each header??

[paramvir]

1) I'm unable to reproduce the error in similar pqgrid example and not sure what's causing the error in your case. Kindly share a small test case reproducing the error on stackblitz so that I can check it.

2) clicksToEdit works for all the columns and can't be set separately for different columns.

[Maino]

When the grid is in modification mode, instead of clicking the grid, is it possible to release modification mode when the 'register new' and 'search' buttons are pressed outside the grid? Currently, if it is modification mode, you must click the value inside the grid to release the modification mode.

[paramvir]

By default the editor is closed when you click anywhere outside the editor.

Example: https://paramquery.com/pro/demos/editing_custom

unless you have changed the default the value of editModel.onBlur

Please check: https://paramquery.com/pro/api#option-editModel -> onBlur suboption