Default/Primary button changed with selected item

[Aaron Prohaska]

Can you please tell me if it's possible to change the primary button to whichever button is selected in the drop down? I need a split button that has different actions/buttons in the drop down that can be used to change the selected/default action of the primary button.

The Telerik SplitButton in their example looks like it does exactly what I want. You can see an example of what I want here:  Telerik Web UI Button Split Button Demo | Telerik UI for ASP.NET AJAX

I have also found that not being able to change the SfSplitButton Content or use the ChildContent properties to dynamically change content is a problem as well. Why do I get the following error message when trying to use a Button object for the primary button? Is it possible to use objects for child content?

There is an ItemSelected event that is a blanket event for all drop down menu items. I need to specify a different event for each item. Can this be done?

<SfSplitButton @ref="splitButtonRef" Content="Default">

    <SplitButtonEvents Clicked="DefaultClicked" ItemSelected="ItemSelected"></SplitButtonEvents>

    <DropDownMenuItems>

        <DropDownMenuItem Text="Default"></DropDownMenuItem>

        <DropDownMenuItem Text="Action 1"></DropDownMenuItem>

        <DropDownMenuItem Text="Action 2"></DropDownMenuItem>

        <DropDownMenuItem Text="Action 3"></DropDownMenuItem>

    </DropDownMenuItems>

</SfSplitButton>

@code {

    private SfSplitButton splitButtonRef;

    private RenderFragment Button1 = @<SprbrkButton>Action 1</SprbrkButton>;

    private RenderFragment Button2 = @<SprbrkButton>Action 2</SprbrkButton>;

    private RenderFragment Button3 = @<SprbrkButton>Action 3</SprbrkButton>;

    protected override void OnInitialized()

    {

        //

    }

    private void DefaultClicked(Syncfusion.Blazor.SplitButtons.ClickEventArgs args)

    {

        //

    }

    private void ItemSelected(Syncfusion.Blazor.SplitButtons.MenuEventArgs args)

    {

        //

    }

}

[YuvanShankar Arunagiri]

Hi Aaron,

We have validated your reported query and prepared the sample based on your requirement. please refer the below code snippet. We can achieve your requirement by using the property bind to Content and CssClass property of the spit button. Please follow the below code for standard property binding of blazor, now we can dynamically changing the content and Cssclass(primary button to other button). And the ItemSelected was not blank event, using the args we got selected item data, using that data we can perform specific operation for each item selected in dropdown like below code.

@using Syncfusion.Blazor.SplitButtons

 

<SfSplitButton @ref="splitButtonRef" Content="@content" CssClass="@cssbtn">

    <SplitButtonEvents Clicked="DefaultClicked" ItemSelected="ItemSelected"></SplitButtonEvents>

    <DropDownMenuItems>

        <DropDownMenuItem Text="Default"></DropDownMenuItem>

        <DropDownMenuItem Text="Action 1"></DropDownMenuItem>

        <DropDownMenuItem Text="Action 2"></DropDownMenuItem>

        <DropDownMenuItem Text="Action 3"></DropDownMenuItem>

    </DropDownMenuItems>

</SfSplitButton>

 

@code{

    private SfSplitButton splitButtonRef;

    private string content = "Default";

    private string cssbtn = "e-primary";

    private void DefaultClicked(Syncfusion.Blazor.SplitButtons.ClickEventArgs args)

    {

 

    }

 

    private void ItemSelected(Syncfusion.Blazor.SplitButtons.MenuEventArgs args)

    {

        switch(args.Item.Text)

        {

            case "Default":

                cssbtn = "e-primary";

                content = "Default";

                break;

            case "Action 1":

                content = "Action 1";

                cssbtn = "e-success";

                break;

            case "Action 2":

                content = "Action 2";

                cssbtn = "e-success";

                break;

            case "Action 3":

                content = "Action 3";

                cssbtn = "e-success";

                break;

        }

    }

}

Could you please check the above code and get back to us, if you need any further assistance on this. 

 

Regards, 

YuvanShankar A

[Aaron Prohaska]

I did get this working.

Thank you

[YuvanShankar Arunagiri]

You are welcome, Aaron. We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any further assistance on this.