Resizing Palette programmatically

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();
        }

3 Replies

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

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%"; 
    } 
} 
 
 
Regards, 
 
Naganathan K G 



MA Manuel February 5, 2020 10:39 AM UTC

Thank you, it works as expected :)


SG Shyam G Syncfusion Team February 6, 2020 03:55 AM UTC

Hi Manuel, 
Thanks for your update. 
Regards, 
Shyam G 


Loader.
Up arrow icon