[QUESTION] How to listen to trait value change directly from block add
Question
I'm passing following JSON to editor.BlockManager.add() function to define my block, load it's content from the server and populate select-type trait named defaultCategory in the same manner.
Everything works nice. Now I need to listen to onchange event of that select and execute some JS there.
I've consulted https://grapesjs.com/docs/modules/Traits.html#add-traits-to-components but can't fugure out how to do this.
Would you mind to quickly show how would I execute alert('test') when value of my trait is changed (by user selecting one of the options)? Thanks in advance.
{
label: '<img src="/Uploads/Lanbuilder/articlesRow.png" class="lanbuilderIcon" width="50" height="50"/><div>My block</div>',
category: c.category,
attributes: {
class:'gjs-fonts gjs-f-b4',
defaultCategory: ''
},
content: {
content: 'AJAX loading content of this block...',
script: function() {
moduleCommonFunctions.loadContentToDiv(this.id, '/topic/getTopicRow');
},
traits: [
{
type: 'select',
name: 'defaultCategory',
label: 'Default category',
options: JSON.parse(categoriesJson)
}
]
}
});

For the button there is an option we can assign our JS, it would be really usefull to have such event for all built in trait types.

Answers (3)
Did you solve this issue? If so, how?
guide please
@lofcz How do you fix this problem?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2189
[Question] How to add "Ordered/Unordered List" option in rte/custom block
Hi I'm trying to create an ordered list with grapesjs. I tried adding the following to the rte: And this works if my page is pre-filled wit...
Issue #1674
Render block after trait action .
I have created new block called sidebar that have dynamic updates by trait component ,trait contain checkboxes to dynamic change content by...
Issue #1059
[Question]: Load html content from a file dynamically
Hi, I need to load content from a html file from server onto editor after or while initializing editor. How this can be implemented? HTML w...
Issue #1611
Script tag create JSON error
Hi. I'm creating blocks in Grapesjs and I need to use JS on them for hover effect and more.. Everything works fine for the creation, store,...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.