how to copy signature demo code to my project and run it on my VS without errors

[Steve]

I copied the below code to my Telerik C# blazor application and received many errors.

I must miss some components that need to be included in the project. Please help...

Thanks, Steve

https://demos.telerik.com/blazor-ui/signature/overview

 

@page "/signature/overview"

<DemoConfigurator>
    <DemoConfiguratorColumn Description="Color">
        <TelerikColorPicker Value="@Color"
                            ValueChanged="@OnColorValueChanged">
        </TelerikColorPicker>
    </DemoConfiguratorColumn>
    <DemoConfiguratorColumn Description="Background color">
        <TelerikColorPicker Value="@BackgroundColor"
                            ValueChanged="@OnBackgroundColorChanged">
        </TelerikColorPicker>
    </DemoConfiguratorColumn>
    <DemoConfiguratorColumn Description="Stroke width">
        <TelerikSlider @bind-Value="@StrokeWidth"
                       Min="1"
                       Max="5"
                       SmallStep="1"
                       LargeStep="1"
                       Width="450px">
        </TelerikSlider>
    </DemoConfiguratorColumn>

 <DemoConfiguratorColumn Description="Popup Scale">
        <TelerikSlider @bind-Value="@PopupScale"
                       Min="1"
                       Max="2"
                       SmallStep="0.5"
                       LargeStep="0.5"
                       Width="150px">
        </TelerikSlider>
    </DemoConfiguratorColumn>
    <DemoConfiguratorColumn Description="Hide line">
        <label>
            <TelerikCheckBox @bind-Value="@HideLine"></TelerikCheckBox>
            Hide line
        </label>
    </DemoConfiguratorColumn>
    <DemoConfiguratorColumn Description="Smooth">
        <label>
            <TelerikCheckBox @bind-Value="@Smooth"></TelerikCheckBox>
            Smooth
        </label>
    </DemoConfiguratorColumn>
</DemoConfigurator>

<div class="signature-wrapper">
    <TelerikSignature Width="500px"
                      Height="200px"
                      Color="@Color"
                      BackgroundColor="@BackgroundColor"
                      HideLine="@HideLine"
                      Smooth="@Smooth"
                      StrokeWidth="@StrokeWidth"
                      PopupScale="@PopupScale"
                      @bind-Value="@Value">
    </TelerikSignature>

    <div class="notes">
        By using the Telerik UI for Blazor Signature component,
        you can allow your end-users to draw their signatures
        using mouse or touch devices.
    </div>
</div>

<style>
    .signature-wrapper {
        width: 500px;
    }

    .notes {
        font-style: italic;
        padding: 1em;
        border-width: 1px;
        border-bottom-width: 0;
        border-style: solid;
        border-radius: 0;
        border-color: rgba(0, 0, 0, 0.08);
    }
</style>

 

 

[Nadezhda Tacheva]

Hi Steve,

It is possible that you are getting errors about the <DemoConfigurator>. This is an internal component that we are often using in our demos to allow the end user easily configure some component features.

You may get just the component code and configure its features by yourself to run it without using the <DemoConfigurator>. If you want to include such a configurator in your application you can create a similar custom component. You may use our demo code for reference - the offline version of the demos is available in the ZIP Archive.

Note: the Signature component was released in UI for Blazor 3.7. So, in order to use it, your application must reference at least 3.7. version of our product.

Regards,
Nadezhda Tacheva
Progress Telerik