LongText (textarea)

• Editor Options

• Custom Validator

• See the Editors - Wiki for more general info about Editors (validators, event handlers, ...)

Demo

Demo Page | Demo Component - ("Title" column to be more specific)

Editor Options

You can change button texts, textarea size (cols, rows) and also change position of the textarea (auto is the default which will try to automatically find best place to position the textarea).

LongTextEditorOption Interface.

<script setup lang="ts">
import { type Column, Filters, Formatters, SlickgridVue, type VanillaCalendarOption } from 'slickgrid-vue';
import { onBeforeMount, type Ref } from 'vue';

const gridOptions = ref<GridOption>();
const columnDefinitions: Ref<Column[]> = ref([]);
const dataset = ref<any[]>([]);

onBeforeMount(() => {
  defineGrid();
});

function defineGrid() {
  columnDefinitions.value = [
    {
      id: 'title', name: 'Title', field: 'title',
      editor: {
        model: Editors.longText,
        required: true, maxLength: 12,
        // previously known as `editorOptions` for < 9.0
        options: {
          cols: 45,
          rows: 6,
          position: 'auto', // defaults to "auto" but you can change to "top", "bottom", "left" or "right"
          buttonTexts: {
            // you can change the button texts
            cancel: 'Close',
            save: 'Done'

            // or if you use translation you can use the properties with `Key` suffix
            // cancelKey: 'CANCEL',
            // saveKey: 'SAVE',
          }
        } as LongTextEditorOption,
      },
    },
  ];
}
</script>

Grid Option `defaultEditorOptions

You could also define certain options as a global level (for the entire grid or even all grids) by taking advantage of the defaultEditorOptions Grid Option. Note that they are set via the editor type as a key name (autocompleter, date, ...) and then the content is the same as editor options (also note that each key is already typed with the correct editor option interface), for example

gridOptions.value = {
  defaultEditorOptions: {
    longText: { cols: 50, rows: 5 }, // typed as LongTextEditorOption
  }
}

Custom Validator

You can add a Custom Validator, from an external function or inline.

// you can create custom validator to pass to an inline editor
const myCustomTitleValidator = (value, args) => {
  if ((value === null || value === undefined || !value.length) && (args.compositeEditorOptions?.modalType === 'create' || args.compositeEditorOptions.modalType === 'edit')) {
    // we will only check if the field is supplied when it's an inline editing OR a composite editor of type create/edit
    return { valid: false, msg: 'This is a required field.' };
  } else if (!/^(task\s\d+)*$/i.test(value)) {
    return { valid: false, msg: 'Your title is invalid, it must start with "Task" followed by a number.' };
  }
  return { valid: true, msg: '' };
};

function defineGrid() {
  columnDefinitions.value = [
    {
      id: 'title', name: 'Title', field: 'title',
      editor: {
        model: Editors.longText,
        required: true,
        validator: myCustomTitleValidator,
      },
    },
  ];
}