We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Add connector to palette

Thread ID:

Created:

Updated:

Platform:

Replies:

127589 Nov 25,2016 10:28 AM Jan 6,2017 01:51 AM JavaScript 3
loading
Tags: ejDiagram
Gareth Brown
Asked On November 25, 2016 10:28 AM

I'm trying to add connector to the ejSymbolPalette, but there doesn't seem to be an obvious way. The following code errors, I'm using TypeScript.

let basicpalette = {
    name: "Basic Shapes",
    expanded: true,
    items: [{
        name: "Connector",
        height: 50,
        width: 50,
        shape: ej.datavisualization.Diagram.ConnectorShapes.Classifier
    }]
};


$(name).ejSymbolPalette({
    // Relates Diagram with SymbolPalette
    diagramId: "diagram",
    width: "400px",
    height: "200px",
    headerHeight: 30,
    expanded: true,
    palettes: [
        nixorpalette
    ],
    showPaletteItemText: true
});

Shyam G [Syncfusion]
Replied On November 28, 2016 06:36 AM

Hi Gareth, 

We have created a sample in which we have rendered the connector in the symbol palette. Please refer to the code example and sample below. 

Code example: 

function createPaletteConnectors(option: ej.datavisualization.SymbolPalette.Palette) { 
    . . . . . 
    . . . . . 
    option.items = [ 
        //create connector 
        createConnector1({ name: "Link1", segments: [{ type: ej.datavisualization.Diagram.Segments.Orthogonal }] }), 
        createConnector1({ name: "Link2", segments: [{ type: ej.datavisualization.Diagram.Segments.Straight }] }) 
    ]; 
    return option; 
} 
function createConnector1(option: ej.datavisualization.Diagram.Connector) { 
    option.sourcePoint = createPoint({ x: 0, y: 0 }); 
    option.targetPoint = createPoint({ x: 40, y: 40 }); 
    option.targetDecorator = { shape: "arrow", borderColor: "#A9A9A9", fillColor: "#A9A9A9" }, 
    option.lineWidth = 2; 
    option.lineColor = "#A9A9A9"; 
    return option; 
} 


Regards, 
Shyam G 


Gareth Brown
Replied On January 5, 2017 06:06 AM

Thanks, this work well

Shyam G [Syncfusion]
Replied On January 6, 2017 01:51 AM

Hi Gareth, 
We are happy to hear that your problem is resolved. 
Regards, 
Shyam G 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;