Skip to main content

Integration with Editor

This guide will show you how to integrate an external Editor into Grid for data editing.

Setting up the Editor fields​

To assign fields to the external editor, use the getEditorConfig helper function. This helper will generate the editor configuration for each column based on the column definitions you specify in Grid. You should define a control type within the same column setting (editor) that is used for built-in editors. 

<script>
import { Grid, getEditorConfig } from "wx-svelte-grid";

const columns = [
  { id: "id", width: 50 },
  {
    id: "firstName",
    header: "Name",
    editor: "text", //Editor control that will be used for this field
    width: 160,
  },
  {
    id: "country",
    header: "Country",
    editor: "richselect",  
    options: countries,
    width: 160,
  },

];

const items = getEditorConfig(columns);
let dataToEdit = $state(null);

</script>

<Grid {data} {columns} />
{#if dataToEdit}
    <Editor values={dataToEdit} {items} />
{/if}

Registering custom editor types​

Editor provides built-in controls like "text", "checkbox", "textarea" that do not require additional setup. You just need to define them in the editor field of the columns array. For custom editor types (e.g., datepicker, richselect), you need to import the registerEditorItem from Editor and register the required editor type.

import { DatePicker, RichSelect } from "wx-svelte-core";
import { Editor, registerEditorItem } from "wx-svelte-editor";

// Register custom editor types
registerEditorItem("richselect", RichSelect);
registerEditorItem("datepicker", DatePicker);

Opening and closing Editor​

Since editor fields are defined on the column level, you need to intercept default behaviour (opening an inline editor) and show Editor instead. 

<script>
    const init = api => {
        api.intercept("open-editor", ({ id }) => {
            dataToEdit = api.getRow(id);  // Retrieve data for the selected row
            return false;  // Prevent the default editor from opening
        });
    }
</script>
<Grid {data} {columns} {init}/>

You can also update the Editor field when it's open using the select-row action:

  • Listen for the select-row action via the api.on() method to capture the row data whenever a new row is selected.
  • Ensure that if Editor is already open (dataToEdit is not null), it gets updated with the newly selected row data.
// Intercept the open-editor action and store data to be edited
api.intercept("open-editor", ({ id }) => {
    dataToEdit = api.getRow(id);
    return false;
});

// Handle row selection and update editor if it's open
api.on("select-row", ({ id }) => {
    if (dataToEdit) {
    dataToEdit = id ? api.getRow(id) : null;  // Update editor data or reset
    }
});

To handle the click on the "close" icon in Editor and close it (by resetting the dataToEdit), you can use the onaction event.

<Editor
    onaction={({ item }) => {
        if (item.icon) dataToEdit = null;
    }}
/>

Saving changes to Grid​

When editing data in Editor, you need to use the appropriate events to update the Grid data. The event you subscribe to depends on the autoSave settings:

  • If autoSave is true, changes are saved automatically as you edit individual fields. In this case, use the onchange event (fires when a single field is updated) to update the corresponding cell in Grid via update-cell.

  • If autoSave is false, changes are saved only when the user clicks the "Save" button. In this case, use the onsave event (fires when the entire form is saved) to update the entire row in Grid via update-row.

<script>
    let api = $state;
</script>

<Editor
  values={dataToEdit}
  items={getEditorConfig(columns)}
  placement="sidebar"
  autoSave={true}
  onchange={({ key, value }) => {
    api.exec("update-cell", {  // Update individual cell data
      id: dataToEdit.id,
      column: key,
      value,
    });
  }}
  onsave={({ values }) => {
    api.exec("update-row", {  // Update the entire row
      id: dataToEdit.id,
      row: values,
    });
  }}
/>
<Grid {data} {columns} bind:this=api/>

Related articles: