Resizing Palette programmatically

Manuel

Asked On February 2, 2020 11:45 AM UTC

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

}

Reply | Reply with quote

Naganathan Ganesh Babu [Syncfusion]

Replied On 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:

<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

Reply | Reply with quote

Manuel

Replied On February 5, 2020 10:39 AM UTC

Thank you, it works as expected :)

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On February 6, 2020 03:55 AM UTC

Hi Manuel,

Thanks for your update.

Regards,

Shyam G

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
151160	Feb 2,2020 11:41 AM UTC	Feb 6,2020 03:55 AM UTC	Blazor	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US