data-gjs-* attributes in json

[shelendravashishtha2]

Hi,

I'm trying to render this json on grapesjs editor

{ tagName: "div", attributes: { id: "random_id", draggable: false, "data-gjs-editable": false, "data-gjs-removable": false, }, components: [], }

but when the json is getting rendered on the editor all the attributes other than id are not getting rendered and I also can't find a way to do so .... can somebody please tell me how can we provide data-gjs-* attribs in json

[rajevar]

Hi,
The object syntax in your post looks incorrect, it could be a copy/paste issue. Since the key has - , the entire key needs to be in quotes. The value also needs to be in quote.
This worked for me.

attributes: { class: 'btn btn-primary', 'data-gjs-selected': 'true' },

generated HTML code
<a class="btn btn-primary" data-gjs-selected="true" id="ibg6">Button</a>

[shelendravashishtha2]

Thanks for the reply it's working now but now the issue is that if data-gjs-editable is false then also the component is editable.

[rajevar]

Hi,
changing the data attribute may not serve your purpose. You might need to update the component definition and set editable to false.
model: { defaults: { attributes: { ... }, editable: false, } }

You may find more info here. https://grapesjs.com/docs/api/component.html#component

[shelendravashishtha2]

Thanks you so much for the reply.....it really helped me

[rajevar]

please mark your question as answered (if it is an option )