From 5ddae907ae915d6bd197879350699a6920dd071c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 10 May 2026 15:27:13 +0000 Subject: [PATCH 1/5] Add KB article for Signature offset strokes in PanelBar ContentTemplate Agent-Logs-Url: https://github.com/telerik/blazor-docs/sessions/85cdce06-77ff-4275-a464-9186faf0edbf Co-authored-by: IvanDanchev <6611603+IvanDanchev@users.noreply.github.com> --- ...panelbar-contenttemplate-offset-strokes.md | 158 ++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md diff --git a/knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md b/knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md new file mode 100644 index 000000000..20097f949 --- /dev/null +++ b/knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md @@ -0,0 +1,158 @@ +--- +title: Signature Strokes Are Offset in PanelBar ContentTemplate +description: Learn how to render the Telerik Signature in a PanelBar ContentTemplate after the expand animation completes, so the Signature canvas initializes with correct dimensions. +type: troubleshooting +page_title: Signature Strokes Are Offset in PanelBar ContentTemplate +slug: signature-kb-panelbar-contenttemplate-offset-strokes +position: +tags: telerik, blazor, signature, panelbar, contenttemplate, animation +ticketid: +res_type: kb +components: ["signature","panelbar"] +--- +## Environment + + + + + + + + +
ProductUI for Blazor
+ +## Description + +This article answers the following questions: + +* Why does the Signature line look zoomed in when the component is inside a PanelBar item? +* Why is the Signature stroke offset from the pointer in a PanelBar `ContentTemplate`? +* How can you initialize Signature after PanelBar expand animation completes? + +## Cause + +When you place a `TelerikSignature` inside a PanelBar `ContentTemplate`, the Signature canvas can initialize while the PanelBar expand animation is still running. At that time, the container can have zero or partial height. The Signature JavaScript reads incorrect dimensions and the drawn line appears zoomed and offset from the cursor. + +## Solution + +Render the Signature only after the PanelBar animation ends: + +1. Keep a `ShowSignature` flag set to `false` while the PanelBar item expands or collapses. +1. In `OnAfterRenderAsync`, wait for the animation duration (`Task.Delay(400)` in this example), then set `ShowSignature` to `true`. +1. Use a version counter to ignore stale delayed completions if the user expands or collapses again before the delay finishes. + +>caption Delay Signature rendering until PanelBar animation completes + +````RAZOR +
+ + + + + @{ + var item = (PanelBarItem)context; + } + + @if (item.Text == "Sign Here") + { + if (ShowSignature) + { + + } + } + else + { +
@item.Text
+ } + + + + +
+ + + +@code { + private List PanelBarData { get; set; } = new(); + private IEnumerable ExpandedItems { get; set; } = new List(); + private string SignatureValue { get; set; } = string.Empty; + + private bool ShowSignature { get; set; } + private bool ShowSignaturePending { get; set; } + private int SignatureVersion { get; set; } + + private void OnExpandedItemsChanged(IEnumerable items) + { + ExpandedItems = items; + ShowSignature = false; + ShowSignaturePending = true; + } + + private void LoadData() + { + PanelBarData = new List + { + new() + { + Text = "Documents", + Items = new List + { + new() { Text = "Reports" }, + new() { Text = "Sign Here" } + } + }, + new() { Text = "Settings" } + }; + + ExpandedItems = new List { PanelBarData[0] }; + } + + protected override void OnInitialized() + { + LoadData(); + ShowSignature = false; + ShowSignaturePending = true; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender || ShowSignaturePending) + { + ShowSignaturePending = false; + + var version = ++SignatureVersion; + await Task.Delay(400); + + if (SignatureVersion == version) + { + ShowSignature = true; + StateHasChanged(); + } + } + } + + public class PanelBarItem + { + public string Text { get; set; } = string.Empty; + public List? Items { get; set; } + } +} +```` + +The `Task.Delay` value must match your PanelBar animation duration. If you use a different animation setup, increase or decrease the delay accordingly. + +## See Also + +* [Signature Overview](slug:signature-overview) +* [PanelBar Content Template](slug:panelbar-templates-content) +* [PanelBar Events](slug:panelbar-events) +* [Resize Signature with the Browser](slug:signature-kb-relative-width-height) From 8dcd3ef157f9975f0cc697a374e46a25576d8c1a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 10 May 2026 15:57:42 +0000 Subject: [PATCH 2/5] Expand Signature item by default in KB example Agent-Logs-Url: https://github.com/telerik/blazor-docs/sessions/b1d70c10-e9f8-4a80-a591-69869529bdd6 Co-authored-by: IvanDanchev <6611603+IvanDanchev@users.noreply.github.com> --- ...panelbar-contenttemplate-offset-strokes.md | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md b/knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md index 20097f949..23c26b1dd 100644 --- a/knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md +++ b/knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md @@ -99,21 +99,25 @@ Render the Signature only after the PanelBar animation ends: private void LoadData() { - PanelBarData = new List + var signatureItem = new PanelBarItem { Text = "Sign Here" }; + + var documentsItem = new PanelBarItem { - new() + Text = "Documents", + Items = new List { - Text = "Documents", - Items = new List - { - new() { Text = "Reports" }, - new() { Text = "Sign Here" } - } - }, + new() { Text = "Reports" }, + signatureItem + } + }; + + PanelBarData = new List + { + documentsItem, new() { Text = "Settings" } }; - ExpandedItems = new List { PanelBarData[0] }; + ExpandedItems = new List { documentsItem, signatureItem }; } protected override void OnInitialized() From 134dd831b0bbb1ce908924d7c48d58425f0ae422 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 10 May 2026 16:02:52 +0000 Subject: [PATCH 3/5] Update Signature PanelBar KB metadata values Agent-Logs-Url: https://github.com/telerik/blazor-docs/sessions/dedbabe5-5555-4029-acbc-54168cf70476 Co-authored-by: IvanDanchev <6611603+IvanDanchev@users.noreply.github.com> --- .../signature-panelbar-contenttemplate-offset-strokes.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md b/knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md index 23c26b1dd..d5478fd43 100644 --- a/knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md +++ b/knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md @@ -4,9 +4,8 @@ description: Learn how to render the Telerik Signature in a PanelBar ContentTemp type: troubleshooting page_title: Signature Strokes Are Offset in PanelBar ContentTemplate slug: signature-kb-panelbar-contenttemplate-offset-strokes -position: -tags: telerik, blazor, signature, panelbar, contenttemplate, animation -ticketid: +tags: telerik, blazor, signature, panelbar, contenttemplate +ticketid: 1712712 res_type: kb components: ["signature","panelbar"] --- From f48784dc7f77e5c23d3b07c00cdccff0c2864fdd Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 3 Jun 2026 10:20:36 +0000 Subject: [PATCH 4/5] Update Signature PanelBar KB example per review --- ...panelbar-contenttemplate-offset-strokes.md | 29 +++++++++++++------ 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md b/knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md index d5478fd43..c7e8e4de4 100644 --- a/knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md +++ b/knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md @@ -36,8 +36,8 @@ When you place a `TelerikSignature` inside a PanelBar `ContentTemplate`, the Sig Render the Signature only after the PanelBar animation ends: -1. Keep a `ShowSignature` flag set to `false` while the PanelBar item expands or collapses. -1. In `OnAfterRenderAsync`, wait for the animation duration (`Task.Delay(400)` in this example), then set `ShowSignature` to `true`. +1. Keep a `ShowSignature` flag set to `false` only when the user starts expanding the Signature item. +1. In `OnAfterRenderAsync`, wait for the animation duration (`Task.Delay(100)` in this example), then set `ShowSignature` to `true`. 1. Use a version counter to ignore stale delayed completions if the user expands or collapses again before the delay finishes. >caption Delay Signature rendering until PanelBar animation completes @@ -89,16 +89,27 @@ Render the Signature only after the PanelBar animation ends: private bool ShowSignaturePending { get; set; } private int SignatureVersion { get; set; } + private PanelBarItem? SignatureItem { get; set; } + private void OnExpandedItemsChanged(IEnumerable items) { - ExpandedItems = items; - ShowSignature = false; - ShowSignaturePending = true; + var expandedList = items.ToList(); + + bool signatureWasExpanded = ExpandedItems.Contains(SignatureItem); + bool signatureIsExpanding = SignatureItem != null && expandedList.Contains(SignatureItem); + + ExpandedItems = expandedList; + + if (!signatureWasExpanded && signatureIsExpanding) + { + ShowSignature = false; + ShowSignaturePending = true; + } } private void LoadData() { - var signatureItem = new PanelBarItem { Text = "Sign Here" }; + SignatureItem = new PanelBarItem { Text = "Sign Here" }; var documentsItem = new PanelBarItem { @@ -106,7 +117,7 @@ Render the Signature only after the PanelBar animation ends: Items = new List { new() { Text = "Reports" }, - signatureItem + SignatureItem } }; @@ -116,7 +127,7 @@ Render the Signature only after the PanelBar animation ends: new() { Text = "Settings" } }; - ExpandedItems = new List { documentsItem, signatureItem }; + ExpandedItems = new List { documentsItem, SignatureItem }; } protected override void OnInitialized() @@ -133,7 +144,7 @@ Render the Signature only after the PanelBar animation ends: ShowSignaturePending = false; var version = ++SignatureVersion; - await Task.Delay(400); + await Task.Delay(100); if (SignatureVersion == version) { From 875b8535d9967d82d2f8d2bb9369b797ef2f6c7e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 3 Jun 2026 12:50:27 +0000 Subject: [PATCH 5/5] Replace KB sample structure per review --- ...re-panelbar-contenttemplate-offset-strokes.md | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md b/knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md index c7e8e4de4..b65b58e1d 100644 --- a/knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md +++ b/knowledge-base/signature-panelbar-contenttemplate-offset-strokes.md @@ -111,23 +111,15 @@ Render the Signature only after the PanelBar animation ends: { SignatureItem = new PanelBarItem { Text = "Sign Here" }; - var documentsItem = new PanelBarItem - { - Text = "Documents", - Items = new List - { - new() { Text = "Reports" }, - SignatureItem - } - }; - PanelBarData = new List { - documentsItem, + new() { Text = "Documents" }, + new() { Text = "Reports" }, + SignatureItem, new() { Text = "Settings" } }; - ExpandedItems = new List { documentsItem, SignatureItem }; + ExpandedItems = new List { SignatureItem }; } protected override void OnInitialized()