Dynamic Toggle Switch Button to Enable/Disable other Dynamically Created Controls

[Raheel Ahmed Khan Lodhi]

Dear Team,

I am doing this code

<div class="content">

    @for (int i = 0; i <= 5; i++)

    {

    <div class="row">

        <SfSwitch @ref="statusSwitch[i]" OffLabel="OFF" OnLabel="ON" ValueChange="@Change" TChecked="bool"></SfSwitch>

        <SfTimePicker @ref="timeFrom[i]" TValue="DateTime" Value="DateTime.Now" Enabled="status[i]" Step=30 Format="HH:mm"></SfTimePicker>

        <h4>@status[i]</h4>

        <h4>@i</h4>

    </div>

    }

</div>

    @code{

        public Dictionary<int, SfTimePicker<DateTime>> timeFrom = new Dictionary<int, SfTimePicker<DateTime>>();

        public Dictionary<int, bool> status = new Dictionary<int, bool>();

        public Dictionary<int, SfSwitch<bool>> statusSwitch = new Dictionary<int, SfSwitch<bool>>();

        private bool isChecked = true;

        private void Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)

        {

            // Your code here.

        }

    }

I want to use toggle button to enable or disable the specific SfTimePicker. Please fix this code or advise how i can get the desired results ?

Thank You

[Gayathri KarunaiAnandam]

Hi Raheel, 

We have checked your reported query. We can achieve your requirement in sample level. Please check the below code snippet. 

<div> 

       @{ 

               

              @for (int i = 0; i < 5; i++) 

              { 

                      int j = i; 

         <SfSwitch OffLabel="OFF" OnLabel="ON" ValueChange="@((args) =>Change(args, j))" TChecked="bool"></SfSwitch> 

         <SfTimePicker TValue="DateTime" Value="DateTime.Now" Enabled="status[j]" Step=30 Format="HH:mm"></SfTimePicker> 

              } 

 

       } 

 

</div> 

@code{ 

 

 

       public Dictionary<int, bool> status = new Dictionary<int, bool>() 

       { 

       {0,true}, 

        {1,true}, 

        {2,true}, 

        {3,true}, 

        {4,true}, 

        {5,true} 

       }; 

 

 

       private void Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args, int index) 

       { 

              status[index] = !args.Checked; 

       } 

    } 

For your reference, we have prepared a sample based on this. Please check the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/165988/ze/Sample-1501660567 

Please get back to us, if you need further assistance. 

Regards, 

Gayathri K