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. Image for the cookie policy date

Resizing Palette programmatically


i'd like to resize the diagram palette programmatically at runtime.
This is required because i'd like to offer a simple and an advanced toolset of shapes.

I tried all available state modifier for blazor, but no one seems to have an effect.

        public async Task AdjustPalette()
            optionalPalette.Expanded = !optionalPalette.Expanded;
            this.AdjustSize(); // recalculating size

            await this.Render();
            await this.InvokeAsync(this.StateHasChanged);

        protected void AdjustSize()
            var width = (requiredPalette.Symbols as List<object>)?.Count ?? 0;
            width += optionalPalette.Expanded ? (optionalPalette.Symbols as List<object>)?.Count ?? 0 : 0;

            base.Height = "70px";
            base.Width = $"{width * (base.SymbolWidth + 2)}px";

        protected override void OnInitialized()
            base.Palettes = new List

            base.SymbolWidth = 60;
            base.SymbolHeight = 60;

            base.SymbolMargin = new SymbolMargin { Left = 4, Right = 4, Top = 4, Bottom = 4 };


3 Replies

NG Naganathan Ganesh Babu Syncfusion Team February 3, 2020 06:56 AM

Hi Manuel, 
We need to bind the SymbolPalette’s Width/Height values to achieve your requirement in blazor component. Please refer to the below code example and sample. 
Code example: 
<input value="UpdateSize" type="button" @onclick="@UpdateSize" name="UpdateSize" /> 
  <EjsSymbolPalette id="symbolPalette" Width="@width" Height="@height" 
                      SymbolWidth="60" SymbolInfo="@SymbolInfo"> 
        <SymbolMargin Left="15" Right="15" Bottom="15" Top="15"></SymbolMargin> 
            <SymbolPalettePalette Id="flowShapePalette" Expanded="true" Symbols="@FlowShapeList" IconCss="e-ddb-icons e-flow" Title="Flow Shapes"> 
            <SymbolPalettePalette Id="connectorPalette" Expanded="true" Symbols="@ConnectorList" IconCss="e-ddb-icons e-connector" Title="Connectors"> 
    //Set width for the palette 
    string width = "20%"; 
    //Set height for the palette 
    string height = "700px"; 
private void UpdateSize() 
        width = "30%"; 
Naganathan K G 

MA Manuel February 5, 2020 05:39 AM

Thank you, it works as expected :)

SG Shyam G Syncfusion Team February 5, 2020 10:55 PM

Hi Manuel, 
Thanks for your update. 
Shyam G 

Live Chat Icon For mobile
Up arrow icon