How to place a toggle button inside the grid in blazor

Radzen Studio Blazor Server
1

Can anyone help me solve that


@timeslott.DisplayText


<RadzenTextBox @bind-Value="timeslott.DisplayText" Style="width:100%; display: block" Name="DisplayText" />


                @*<RadzenGridColumn TItem="TimeSlotModel" Property="@nameof(TimeSlotModel.IsEnabled)" Title="Is Enabled" />*@
                <RadzenGridColumn TItem="TimeSlotModel" Property="IsEnabled" Title="Is Enabled">
                    <Template Context="timeslott">
                        @timeslott.IsEnabled
                    </Template>
                    <EditTemplate Context="timeslott">
                    // want to place a toggle button to enable or disable.    
                    </EditTemplate>

I want to place a toggle button to enable or disable. . how could the code will appear.
Can anyone help me solve this.
And also how to change the Isenabled value according to database value.

Thank You!

2

Hi @jizi,

I am afraid I don't understand what you are trying to do, what you have tried so far etc. You can check the forum FAQ for tips how to improve your question.

1 Like
3

Hi @korchev , Sorry for my bad English.
i want to place a toggle button inside grid .i have a column named IsEnabled .so i want to show the Isenabled field as toggle button.when value from the database is true.it should be true otherwise false. and i could edit that toggle button when i click that. how could i achieve that.

Thank You!

4

Im working on Blazor .using Radzen Grid for the first time. i found it bit unfamiliar with the tools and its proprties.i dint find what i need.

5

What is a toggle button?

6

Untitled
Untitled1086×541 27.2 KB

like this. But the toggle button is not changing wen i tried to edit. Actually i dont know how to meet my requirements. even wen i tried to edit this I cant do that. And another problem i'm facing is i cant give the datetimepicker for the timespan fields. in this 2 fields are timespan(in sql server its declared as timespan) i dont know how to change that inside radzen grid. I dont know the option for that too.

7

My requirement is to add edit and delete the time slots accordingly . there should be an option to disable the time if there is any day off. i dont know how to achieve that. i tried this .

8 
>  
>  <RadzenButton Icon="add_circle_outline" style="margin-bottom: 10px" Text="Add" Click="@InsertRow" />
>         <span><RadzenButton Icon="edit" style="margin-bottom: 10px" Text="Edit" Click="@EditRow" /></span>
>         <span><RadzenButton Icon="close" style="margin-bottom: 10px" Text="Delete" Click="@DeleteRow" /></span>
> <RadzenGrid @ref="ordersGrid" AllowFiltering="true" AllowPaging="true" PageSize="10" AllowSorting="true" EditMode="Radzen.DataGridEditMode.Single"
>                     Data="@timeslotsmodel" TItem="TimeSlotModel" RowUpdate="@OnUpdateRow" RowCreate="@OnCreateRow">
> 
>             <Columns>
> 
> 
> 
>                 <RadzenGridColumn TItem="TimeSlotModel" Property="@nameof(TimeSlotModel.TimeSlotID)" Title="TimeSlot ID" />
> 
>                 <RadzenGridColumn TItem="TimeSlotModel" Property="FromTime" Title="From Time">
>                     <Template Context="timeslott">
>                         @String.Format("{0:t}", timeslott.FromTime)
>                     </Template>
>                     <EditTemplate Context="timeslott">
>                         <RadzenDatePicker DateFormat="HH:MM:SS" ShowTime="true" TimeOnly="true" @bind-Value="timeslott.FromTime" Style="width:100%" />
>                     </EditTemplate>
>                 </RadzenGridColumn>
> 
>                 <RadzenGridColumn TItem="TimeSlotModel" Property="ToTime" Title="To Time">
>                     <Template Context="timeslott">
>                         @String.Format("{0:t}", timeslott.ToTime)
>                     </Template>
>                     <EditTemplate Context="timeslott">
>                         @*Change=@(args => OnChange(args, "Time-only DatePicker", "HH:mm")) />*@
> 
>                         <RadzenDatePicker ShowTime="true"  DateFormat="HH:MM" TimeOnly="true" @bind-Value="timeslott.ToTime" Style="width:100%" />
> 
> 
>                     </EditTemplate>
>                 </RadzenGridColumn>
> 
> 
>                 <RadzenGridColumn TItem="TimeSlotModel" Property="DisplayText" Title="Display Text">
>                     <Template Context="timeslott">
>                         @timeslott.DisplayText
>                     </Template>
>                     <EditTemplate Context="timeslott">
>                         <RadzenTextBox @bind-Value="timeslott.DisplayText" Style="width:100%; display: block" Name="DisplayText" />
>                         <RadzenRequiredValidator Text="DisplayText is required" Component="DisplayText" Popup="true" />
>                     </EditTemplate>
>                 </RadzenGridColumn>
> 
>                 @*<RadzenGridColumn TItem="TimeSlotModel" Property="@nameof(TimeSlotModel.IsEnabled)" Title="Is Enabled" />*@
>                 <RadzenGridColumn TItem="TimeSlotModel" Property="IsActive" Title="Is Active">
>                     <Template Context="timeslott">
>                         @if (@timeslott.IsActive == true)
>                         {
>                             <label class="switch" for="checkbox">
>                                 <input type="checkbox" id="@timeslott.IsActive" checked />
>                                 <span class="slider round"></span>
>                             </label>
> 
>                         }
>                         else
>                         {
>                             <label class="switch" for="checkbox">
>                                 <input type="checkbox" id="@timeslott.IsActive" disabled />
>                                 <span class="slider round"></span>
>                             </label>
> 
>                         }
> 
>                         @*@timeslott.IsEnabled*@
>                     </Template>
>                     <EditTemplate Context="timeslott">
>                         <label class="switch" for="checkbox">
>                             <input type="checkbox" id="@timeslott.IsActive" />
>                             <span class="slider round"></span>
>                         </label>
>                         @*<RadzenCheckBox @bind-Value=@timeslott.IsActive TValue="bool" />
>                         <RadzenLabel class="slider round" Text="Is Active" Component="CheckBox1" Style="margin-left: 5px;" />*@
>                         @*<input type="checkbox" id="@timeslott.IsEnabled" />*@
>                     </EditTemplate>
>                 </RadzenGridColumn>
>                 <RadzenGridColumn TItem="TimeSlotModel" Property="@nameof(TimeSlotModel.DisplayOrder)" Title="Display Order" />
>                 <RadzenGridColumn TItem="TimeSlotModel" Context="timeslott" Bubble="false" Filterable="false" Sortable="false" TextAlign="Radzen.TextAlign.Center" Width="100px">
>                     <Template Context="timeslot">
>                         <RadzenButton Icon="edit" Size="Radzen.ButtonSize.Small" Click="@(args => EditRow(timeslot))">
>                         </RadzenButton>
>                     </Template>
>                     <EditTemplate Context="timeslot">
>                         <RadzenButton Icon="save" Size="Radzen.ButtonSize.Small" Click="@((args) => SaveRow(timeslot))">
>                         </RadzenButton>
>                         <RadzenButton Icon="cancel" Size="Radzen.ButtonSize.Small" ButtonStyle="Radzen.ButtonStyle.Secondary" Click="@((args) => CancelEdit(timeslot))">
>                         </RadzenButton>
>                     </EditTemplate>
>                 </RadzenGridColumn>
>                 <RadzenGridColumn TItem="TimeSlotModel" Context="order" Bubble="false" Filterable="false" Sortable="false" TextAlign="Radzen.TextAlign.Center" Width="70px">
>                     <Template Context="timeslot">
>                         <RadzenButton ButtonStyle="Radzen.ButtonStyle.Danger" Icon="close" Size="Radzen.ButtonSize.Small" Click="@(args => DeleteRow(timeslot))">
>                         </RadzenButton>
>                     </Template>
>                     <EditTemplate Context="timeslot">
>                         <RadzenButton ButtonStyle="Radzen.ButtonStyle.Danger" Icon="close" Size="Radzen.ButtonSize.Small" Click="@(args => DeleteRow(timeslot))">
>                         </RadzenButton>
>                     </EditTemplate>
>                 </RadzenGridColumn>
>             </Columns>
>         </RadzenGrid>
9

@korchev Can you tell me how could i add,edit and delete rows to the grid . columns are FromTime and ToTime (declared as timespan in database), . ,IsEnabled as Bool ,DisplayOrder as int, DisplayText (its the combination of FromTime and ToTime so its a string. these are the fields.
Is there any other way to achieve this

10

I suggest you check our inline editing example which shows how to implement editing and data-bind components in the EditTemplate. The DatePicker does not support TimeSpan properties.

11

@korchev i did check that. i was so confused . i'm new to blazor .and this is my training period. i dint understand the example fully when i tried implimenting that to my task

12

so no other way to get that?

13

@korchev Is there any to convert datatimepicker to timespan after getting the result from that.?

14

@jizi Did you manage to get the toggle button working? I am trying to do the same.

15

Hi korchev,

Is it possible to display data (true or false) as a radzen switch component inside the radzen grid?
Exactly how the image that @jizi has posted? Exactly like that on the IsActive Column?

Thank you