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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add connector to palette

Thread ID:

Created:

Updated:

Platform:

Replies:

127589 Nov 25,2016 03:28 PM UTC Jan 6,2017 06:51 AM UTC JavaScript 3
loading
Tags: ejDiagram
Gareth Brown
Asked On November 25, 2016 03:28 PM UTC

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 11:36 AM UTC

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 11:06 AM UTC

Thanks, this work well

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

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.

Warning Icon 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.Close Icon

;