group button selection bind to data

[Riccardo]

Hi,

i want have a group of buttons, and i have used this code:

                        <div class="btn-group" role="group">

                            <EjsButton @ref="bt1" type="button" CssClass="btn btn-secondary">Giorno</EjsButton>

                            <EjsButton @ref="bt2" type="button" CssClass="btn btn-secondary">Minuti</EjsButton>

                            <EjsButton @ref="bt3" type="button" CssClass="btn btn-secondary">Mese</EjsButton>

                            <EjsButton @ref="bt4" type="button" CssClass="btn btn-secondary">1o gg Lavorativo</EjsButton>

                        </div>

but selection of this group depend on the value of data binded (this code is inside an EditForm)

how to bind this group to data? is possible?

Thanks

[Arunkumar Devendiran]

Hi Riccardo, 

 

Thanks for your patience.  

 

We have checked your reported query and we would inform you that we have created the sample for your requirement. In this sample we have created the groupbutton and set to be type as radio. By initially we have set the checked property as false and by using model we have set the checked property as true. In this way you can achieve your requirement Please refer the sample link. 

 

Sample link: 

https://www.syncfusion.com/downloads/support/forum/151745/ze/BlazorApp868777945 

 

Could you please check the above sample and get back to us with more information if we misunderstood your requirement or need further assistance.  

 

Regards, 

Arunkumar D 

[Eric]

Ok, I am not the original author but let me write here. It works perfectly! I have been looking for something like this for quite some time and was able to easily extrapolate to multiple, independent button groups (which was what I needed). You guys rock!

[Saranya Dhayalan]

Hi Eric,

 

We are happy to hear that your requirement has been fulfilled with the above requirement. Kindly get back to us if you need any further assistance.

 

Regards,

Saranya D

[Eric]

Actually yes, if you guys could help with something on this matter. I was able to create multiple button groups that work fine, like this:

<EditForm Model="@StatementCheckedModel">

            @{

                if (this.StatementCheckedModel.Value == "Model")

                {

                    this.isStatementChecked = true;

                }

            }

            <div id="Statement" class="e-btn-group">

                <input type="radio" id="Income Statement" @onclick="@(() => ChangeTable("Income Statement"))" value="Income Statement" name="default" checked="@this.isStatementChecked" />

                <label for="Income Statement" class="e-btn">Income Statement</label>

                <input type="radio" id="Balance Sheet" @onclick="@(() => ChangeTable("Balance Sheet"))" value="Balance Sheet" name="default" />

                <label for="Balance Sheet" class="e-btn">Balance Sheet</label>

                <input type="radio" id="Cash Flow" @onclick="@(() => ChangeTable("Cash Flow"))" value="Cash Flow" name="default" />

                <label for="Cash Flow" class="e-btn">Cash Flow</label>

            </div>

        </EditForm>

        <EditForm Model="@calCheckedModel">

            @{

                if (this.calCheckedModel.Value == "Model")

                {

                    this.isCalcChecked = true;

                }

            }

            <div id="CalcType" class="e-btn-group">

                <input type="radio" id="Value" @onclick="@(() => ChangeMethodType("Value"))" value="Value" name="default" checked="@this.isCalcChecked" />

                <label for="Value" class="e-btn">Value</label>

                <input type="radio" id="Growth" @onclick="@(() => ChangeMethodType("Growth"))" value="Growth" name="default" />

                <label for="Growth" class="e-btn">Growth</label>

                @if (myTable == "Income Statement")

                {

                    <input type="radio" id="Margin" @onclick="@(() => ChangeMethodType("Margin"))" value="Margin" name="default" />

                    <label for="Margin" class="e-btn">Margin</label>

                }

            </div>

        </EditForm>

and then inside code, I have:

DefaultValue StatementCheckedModel = new DefaultValue();

    public class DefaultValue

    {

        public string Value { get; set; } = "Model";

    }

    private bool isStatementChecked { get; set; } = false;

    CalTypeValue calCheckedModel = new CalTypeValue();

    public class CalTypeValue

    {

        public string Value { get; set; } = "Model";

    }

    private bool isCalcChecked { get; set; } = false;

Everything works fine, however you can see, on the second button group, there is one of the buttons that would only appear on certain circumstances. How can change the button selected without pressing, so for instance, if this on in particular is selected when it would disappear, I can make it so another one in its group to become highlighted? Hope I was able to explain myself. Sorry for the confusion.

[Arunkumar Devendiran]

Hi Eric, 

 

We have checked your reported query and we would inform that you can achieve this by setting the checked property to button group. We have created the sample for your convenience in that we have changed the button group value without clicking the button group. Please refer the below sample link. 

 

Sample link: 

https://www.syncfusion.com/downloads/support/forum/151745/ze/BlazorApp11537420971 

 

Could you please check the above sample and get back to us with more information if we misunderstood your requirement or need further assistance.  

 

Regards, 

Arunkuar D