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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

147128 Sep 2,2019 03:26 PM UTC Sep 4,2019 06:30 AM UTC Blazor 3
loading
Tags: Button
Ryan
Asked On September 2, 2019 03:26 PM UTC

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

Sangeetha Priya Murugan [Syncfusion]
Replied On 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 


Ryan
Replied On September 3, 2019 10:50 AM UTC

Thank you, that fixed it.

Sangeetha Priya Murugan [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon