We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Error compiling button click sample code: The type already contains a definition for 'ToggleBtn'

I get a compile error when running the button click sample code from this page: https://ej2.syncfusion.com/blazor/documentation/button/native-event/

The error is: The type 'ButtonSample' already contains a definition for 'ToggleBtn'.  

This is the code:

@page "/ButtonSample"

@using Syncfusion.EJ2.Blazor.Buttons

    <EjsButton @ref="ToggleBtn" onclick="onToggleClick" CssClass="e-flat" IsToggle="true" IsPrimary="true" Content="@Content"></EjsButton>

@code {
    EjsButton ToggleBtn;
    public string Content = "Play";
    private void onToggleClick(UIMouseEventArgs args)
    {
        if (ToggleBtn.Content == "Play")
        {
            this.Content = "Pause";
        }
        else
        {
            this.Content = "Play";
        }
    }
}

If I remove the @ref attribute from the button component, the compile error goes away.  However, that leads to the following runtime error:

InvalidOperationException: Unable to set property 'onclick' on object of type 'Syncfusion.EJ2.Blazor.Buttons.EjsButton'. The error was: Unable to cast object of type 'System.String' to type 'Microsoft.AspNetCore.Components.EventCallback`1[Microsoft.AspNetCore.Components.UIMouseEventArgs]'.

SyncFusion Version: 17.2.0.47-beta
.NET Core Version: 3.0 preview 8

3 Replies

SP Sangeetha Priya Murugan Syncfusion Team September 3, 2019 07:24 AM UTC

Hi Ryan, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your reported issue and we are able to reproduce it in our end, based on your provided codes. And the cause of this issue is due to breaking changes in @ref functionality in Blazor with Preview8. However, we have already mentioned this in our release notes itself. Please refer the below links for more details. 
 
 
 
For your convenience, to avoid this issue we would suggest you to use “suppressField” as like in the below code example. 
 
CODE EXAMPLE: 
 
@using Syncfusion.EJ2.Blazor.Buttons 
 
<EjsButton CssClass="e-flat" IsToggle="true" IsPrimary="true" Content="@Content" @ref="ToggleBtn" @ref:suppressField @onclick="onToggleClick"></EjsButton> 
 
@code { 
    EjsButton ToggleBtn; 
    public string Content = "Play"; 
    private void onToggleClick(UIMouseEventArgs args) 
    { 
        if (ToggleBtn.Content == "Play") 
        { 
            this.Content = "Pause"; 
        } 
        else 
        { 
            this.Content = "Play"; 
        } 
    } 
} 
 
For more details, please refer the below demo link for toggle button functionality. 
 
 
Could you please check the above details and get back to us, if you need any further assistance on this? 
 
Regards, 
Sangeetha M 



RY Ryan September 3, 2019 10:50 AM UTC

Thank you, that fixed it.


SP Sangeetha Priya Murugan Syncfusion Team September 4, 2019 06:30 AM UTC

Hi Ryan, 
 
Thanks for your update. 
 
We are happy to hear that your issue has been resolved. Kindly get back to us if you need any further assistance. 
 
Regards, 
Sangeetha Priya M 


Loader.
Live Chat Icon For mobile
Up arrow icon