Category / Section
How to create a Symbol palette size in percentage
1 min read
Creation of Symbol palette with different types of unit.
SymbolPalette provides a support to set the symbol palette size in two ways either percentage or pixel. If you set the symbol palette size in percentage, it will automatically converted to pixel size based on the parent element and the same will be applied as a symbolpalette size.
The following code illustrates how to create a symbol palette size in percentage.
[JS]
<style>
.symbolPalette_section
{
width: 250px;
height: 600px;
float: left;
}
</style>
[Html]
<div class="symbolPalette_section">
<div id="symbolpalette">
</div>
</div>
<script>
$(function () {
//define the palettes.
var palettes = [{
name: "Flow Shapes",
expanded: true,
items: [
//add the flow shapes to the symbol palette
{
name: "Rectangle",
height: 45,
width: 70,
offsetX: 70 / 2,
offsetY: 45 / 2,
fillColor: "white",
borderWidth: 1.5,
type: "basic",
shape: "rectangle",
}, {
name: "Ellipse",
width: 70,
height: 70,
offsetX: 20,
offsetY: 20,
fillColor: "white",
borderWidth: 1.5,
type: "basic",
shape: "ellipse",
},
]
}];
$("#symbolpalette").ejSymbolPalette({
diagramId: "diagram",
palettes: palettes,
//set the SymbolPalette size in percentage.
height: "100%",
width: "100%",
paletteItemWidth: 50,
paletteItemHeight: 50,
previewWidth: 100,
previewHeight: 100,
});
});
</script>
The following code illustrates how to set the symbol palette size in pixel.
[JS]
$("#symbolpalette").ejSymbolPalette({
diagramId: "diagram",
palettes: palettes,
//set the SymbolPalette size in percentage.
height: "100px",
width: "100px",
paletteItemWidth: 50,
paletteItemHeight: 50,
previewWidth: 100,
previewHeight: 100,
});
Please refer the below JS Playground link for your reference.
http://jsplayground.syncfusion.com/aenbdqtn
