Resizing Palette programmatically

[Manuel]

Hi,

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

            this.Refresh();

            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

            { 

                requiredPalette,

                optionalPalette

            };

            base.SymbolWidth = 60;

            base.SymbolHeight = 60;

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

            this.AdjustSize();

        }

[Naganathan Ganesh Babu]

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" 

                      SymbolHeight="60" 

                      SymbolWidth="60" SymbolInfo="@SymbolInfo"> 

        <SymbolMargin Left="15" Right="15" Bottom="15" Top="15"></SymbolMargin> 

        <SymbolPalettePalettes> 

            <SymbolPalettePalette Id="flowShapePalette" Expanded="true" Symbols="@FlowShapeList" IconCss="e-ddb-icons e-flow" Title="Flow Shapes"> 

            </SymbolPalettePalette> 

            <SymbolPalettePalette Id="connectorPalette" Expanded="true" Symbols="@ConnectorList" IconCss="e-ddb-icons e-connector" Title="Connectors"> 

            </SymbolPalettePalette> 

        </SymbolPalettePalettes> 

    </EjsSymbolPalette> 

 

@code{ 

    //Set width for the palette 

    string width = "20%"; 

    //Set height for the palette 

    string height = "700px"; 

 

private void UpdateSize() 

    { 

        width = "30%"; 

    } 

} 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/151160/ze/DiagramBlazor-93082156 

 

Regards, 

 

Naganathan K G 

[Manuel]

Thank you, it works as expected :)

[Shyam G]

Hi Manuel, 

Thanks for your update. 

Regards, 

Shyam G