Data editing is one of numerous powerful features implemented in the DHTMLX Grid widget. Combining it with other Grid strengths like high customizability and interoperability with Suite widgets, you can add custom editing options to cover specific use case scenarios. In this article, you will learn how to enrich the Grid configuration with a dataview editor.
Example of a JavaScript Grid Table with a Custom DataView Editor
DHTMLX Grid is shipped with a range of built-in column editors that make it much easier to add various editing forms to data tables in web apps. But what if you work on a dashboard or CMS that requires something more informative and visually appealing than basic input or dropdown editors? That’s where a dataview editor like in the sample below comes in handy.
Clicking any cell in the “Owner” column opens a popup editor featuring a card-style list of available options. You can visually browse and select an appropriate option, the content of the selected cell will be updated accordingly.
Step-by-Step Guide on Adding a Custom Dataview Editor in DHTMLX Grid
Let us proceed to concrete steps that will allow you to incorporate a custom dataview editor into a JavaScript grid table with DHTMLX. When using our Grid widget, you don’t need a third-party dataview component or build it from scratch. Instead, you can use the corresponding JavaScript DataView and Popup widgets from the Suite library that can be seamlessly integrated with Grid, saving you much time and effort. However, we still have to clarify some key points to make this integration more meaningful and straightforward.
Step 1: Initializing and Configuring the Grid Table
First of all, you initialize a JavaScript data table and specify its structure and behavior. The columns configuration property outlines each column’s id, type, formatting, and editing options, including the “Owner” column that will later be complemented with the DataView-based editor.
In preparation for that, you need to use the mark property to assign a special CSS class (dataview-editor) to cells in the “Owner” column to trigger a custom editor. You should also apply editable: false to prevent default editing in the column.
columns: [
{ id: "project", header: [{ text: "Project" }], width: 180 },
{
id: "owner",
header: [{ text: "Owner" }],
mark: () => "dataview-editor",
editable: false,
autoWidth: true
},
… // Config for other columns
],
selection: true,
editable: true,
keyNavigation: false,
data,
});
In this step, you also define how the Grid behaves by default – enabling editing, selection, disabling keyboard navigation, and loading initial data.
Step 2: Create the DataView Editor
Next, you initialize DHTMLX DataView and provide a custom HTML layout for cells in the “Owner” column that appears when a user edits them. This layout is defined via the template property and includes a visually rich card format displaying a person’s photo, name, position, phone number, birthday, and email.
selection: true,
itemsInRow: 2,
template: ({ name, photo, post, phone, birthday, mail }) => (`
... // Custom HTML layout for cards appearing in the editor
`),
`),
data: owner_data,
});
This improves the editing experience by offering structured and intuitive visuals. The styling of this layout will be detailed in the final step of the tutorial.
Step 3: Attach the DataView to a Popup
Now, you need to create a popup window using the JavaScript Popup widget from the Suite library:
css: "dhx_widget--border-shadow popup",
});
popup.attach(dataview);
You insert the previously created DataView layout into the popup via popup.attach(dataview). The popup lets you reveal a rich UI of the editor only when it’s needed i.e. when a user clicks on any cell of the “Owner” column. Extra styling with css: “dhx_widget–border-shadow popup” helps make the popup visually distinct and match the rest of the UI.
To make the popup appear when a user clicks on the Owner cell, you attach event hadlers to cells in the Owner column by targeting the dataview-editor class applied via the column’s HTML template.
onclick: {
"dataview-editor": (event, { row, col }) => {
const ownrer = dataview.data.find(item => item.name == row[col.id]);
dataview.selection.add(ownrer.id);// Highlights the selected card in the DataView
popup.show(event.target, { centering: false });// Opens the popup near the clicked element
}
}
},
Step 4: Update Grid Cell After Selection
When an item is selected in the dataview editor, you need to update the grid cell and hide the popup using the afterSelect event:
const owner = dataview.selection.getItem();
const { row } = grid.selection.getCell();
grid.data.update(row.id, { "owner": owner.name });
popup.hide();
});
This step makes the custom editor work the way it should – users click a cell, pick a card, and the grid updates in real time.
Step 5: Custom Styling of DataView Editor for Better User Experience
Once your custom dataview editor becomes fully functional, you can make it more visually appealing. When using DHTMLX widgets, you can apply one of the predefined CSS layout templates for the dataview items:
.dhx_dataview_template_d__picture {
width: 110px;
min-width: 110px;
background: center center/cover no-repeat #f7f7f7;
}
.dhx_dataview_template_d__picture:before {
content: "";
display: block;
padding-top: 100%;
}
.dhx_dataview_template_d__body {
padding-left: 12px;
width: 150px;
}
…
These styles are applied to structure and style the DataView item template provided in Step 2, when dhx.DataView is initialized.
Following the steps above, you can create a JavaScript data table with a custom dataview editor like in our sample.
Final Thoughts
This tutorial vividly demonstrates just one of many ways you can customize DHTMLX Grid. Its rich API empowers you to go far beyond default settings and extend Grid with new functional capabilities and design patterns. The widget offers a high degree of control over UI and data behavior. Whether you’re building a common dashboard or a complex enterprise app, DHTMLX Grid is a dependable tool for reaching your web development goals. Still on the fence? Try the 30-day trial version free of charge and see how our Grid widget fits your project.