How to disable the node text edit mode?

Question

Hi,I want to disable edit of node text. Problem I am having using the DiagramConstraints.PageEditable or NodeConstraints.ReadOnly, is I cannot open default context menu (right click does not work)I am populating my Diagram through data-binding as follows:this.diagram.dataSourceSettings.dataSource = this.items;Can you please give me the solution, that my Node should not be editable and my other functionality should work as it is.Thanks in advance.

Gobinath Dhamotharan · Answer

Hi,We
created a sample to achieve your requirement. You have to set the read-only property of annotation to
enable/disable the read-only constraints. Refer the
sample and documentation below.Code-snippet

constraints: AnnotationConstraints.ReadOnly,

Documentationhttps://ej2.syncfusion.com/angular/documentation/diagram/labels#read-only-annotationsSamplehttps://stackblitz.com/edit/angular-mgdinx-5nsxfc?file=src%2Fapp.component.tsRegards,Gobinath

Mohammed Papad · Answer

This is still not working, I am having the same issue, when I double click the node goes under edit mode.

Almost all code is same as given in your example, the difference or the function which I think will matter I am posting below:

getNodeDefaults(obj: NodeModel, diagram: Diagram): NodeModel {
        obj.shape = {
            type: 'Text',
            content: (obj.data as {
                name: 'string'
            }).name
        };
        obj.style = {
            fill: 'None',
            strokeColor: 'none',
            strokeWidth: 2,
            bold: true,
            color: 'white'
        };
        obj.borderColor = 'white';         
        obj.backgroundColor = (obj.data as any).color;
        obj.borderWidth = 1;
        obj.width = 120;
        obj.height = 40;
        (obj.shape as TextModel).margin = {
            left: 5,
            right: 5,
            top: 5,
            bottom: 5
        };
        obj.annotations = [ {
            constraints: AnnotationConstraints.ReadOnly,
            //content: obj.data['name']
        }];
        obj.constraints = NodeConstraints.Default & ~NodeConstraints.Rotate & ~NodeConstraints.Drag & ~NodeConstraints.Resize;
        return obj;
    }

Gobinath Dhamotharan · Answer

Hi,We modified the sample to achieve your requirement. In order
to prevent editing of the content in the node, we set NodeConstarints with
ReadOnly. Refer the sample below.Code-snippet

obj.constraints = NodeConstraints.Default | NodeConstraints.ReadOnly;

Samplehttps://stackblitz.com/edit/angular-hfxtx3-ulayv9?file=src%2Fapp.component.tsRegards,  Gobinath

Mohammed Papad · Answer

Hi Gobinath,Thank you very much. Your solution works fine.Regards,Mohammed.

Preethi Rajakandham · Answer

Hi Mohammed,You're welcome. We are glad to know that the reported problem has been resolved at
your end. Please let us know if you have any further queries on this. We are
happy to help.Regards,Preethi R

Mohammed Papad · Answer

Hi,If you can't reply on this thread it's ok. Don't create a separate thread because I have already created one.Tickets ID: 483181. Please check this ticket id and immediately reply on this thread. My issue is critical.I am working with Bold Reports, I am having scenario where two .RDL reports is to be display as one single report.For example, report1.rdl and report2.rdl, My first page in report will report1.rdl and remaining pages will be displayed from report2.rdl.Please tell me how to achieve this in Angular.My report component is shown below<bold-reportviewer id="reportViewer_Control" [reportServiceUrl]="serviceUrl"        (exportProgressChanged)="onExportProgressChanged($event)" [reportPath]="reportPath" [parameters]="parameters"        style="width: 100%;height: 750px" [toolbarSettings]="toolbarSettings"        (toolBarItemClick)="onToolBarItemClick($event)">bold-reportviewer>Thanks in advance.

Preethi Rajakandham · Answer

Hi Mohammed,Thank you for the update. Regarding your recent update, the same query has been addressed in the ticket. Please follow the ticket for further updates.Regards,Preethi R

Mohammed Papad · Answer

Hi,Regarding this ticket : How to disable the node text edit mode?After making your changes :

obj.constraints = NodeConstraints.Default | NodeConstraints.ReadOnly;

I found new issue rising which is to get context-menu of node I have to double click the right click of mouse.Normally it should open of single right click but mine is taking two right-clicks to open context-menu.Please guide to solve this issue.Thanks and regards,Mohammed.

Balasubramanian Manikandan · Answer

We can’t replicate the issue at
our end that you mentioned in the response. Still if you face any issue, share
us more details such as modify the below given sample. This will help us to
validate your requirement further. Refer to the below given video recording and
sample.Sample

https://stackblitz.com/edit/angular-hfxtx3-44aanq?file=src%2Findex.html

Attachment: ContextIssue_7e66a0d3.zip