This is a migrated thread and some comments may be shown as answers.

checkbox column

5 Answers 3978 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Randy Hompesch
Top achievements
Rank 1
Randy Hompesch asked on 16 Oct 2019, 07:56 AM

Hi,

I am trying to do something simple but having trouble.

All I want is a grid that displays columns for a name and an IsActive property. 

I tried using:

<GridCheckboxColumn Field="@(nameof(AppRole.IsActive))" Title="Is Active"/>

but got nowhere with it.

The basic code is show below. How can I center the checkbox in the column and make not editable unless the are in edit mode?

Also, I want the checkboxes centered in the column.

Any help would be great.

 

Thanks … Ed

 

         <TelerikGrid Data=@GridData
                       Pageable="true" Groupable="true" Sortable="true"
                       OnUpdate="@UpdateHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler" OnEdit="@EditHandler">
              <GridColumns>
 
                  <GridColumn Field="Name" />
                  <GridColumn Field="@(nameof(AppRole.IsActive))" Title="Is Active">
                      <Template Context="ctx">
                          @{
                              var r = ctx as AppRole;
                              var chk = r.IsActive ? "checked" : "";
                               <input type="checkbox" checked="@chk" />
                           }
                      </Template>
                  </GridColumn>
                  <GridCommandColumn Width="300px">
                      <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
                      <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
                      <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
                      <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
                  </GridCommandColumn>
              </GridColumns>
              <GridToolBar>
                  <GridCommandButton Command="Add" Icon="add">Create Role</GridCommandButton>
              </GridToolBar>
          </TelerikGrid>

5 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 16 Oct 2019, 08:03 AM

Hi Ed,

The GridCheckboxColumn is used only for row selection, not for data binding/display.

To display and edit boolean data, you need to use the standard GridColumn. When bound to a boolean field, it displays True/False as text by default (example here) and if you want something different, you need to use a template, as you have found. If you want to center the contents, add a div element around your custom checkbox and style those two elements as desired. To prevent editing, simply disable the checkbox in the Template.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
0
Randy Hompesch
Top achievements
Rank 1
answered on 17 Oct 2019, 07:15 AM
Thanks!
0
Coen
Top achievements
Rank 2
answered on 22 Jul 2020, 01:05 PM

Just a note on the template. I found out that the next code works better to set the value of the checkbox in the grid:

@{
var r = ctx as AppRole;
<input type="checkbox" disabled @bind=r.IsActive />
}
0
Jonathan
Top achievements
Rank 1
Veteran
answered on 06 Oct 2020, 03:35 PM

Hi

What does the template code look like ? thx

Steve
Top achievements
Rank 1
commented on 08 Sep 2021, 02:07 PM

Here's what I did recently:

        <GridColumn Width="50px" Field="@(nameof(PicklistValueInfo.IsActive))" Title="Active">
            <Template Context="ctx">
                @{
                    var r = ctx as PicklistValueInfo;
                    <TelerikCheckBox Enabled="false" Value="r.IsActive" />
                }
            </Template>
         </GridColumn>
0
Leland
Top achievements
Rank 1
Iron
Iron
answered on 06 Sep 2023, 10:22 PM

I was able to get something like this to work in one of my projects:

<GridColumn Title="Is Active"
            Editable=false>
    <Template>
        <TelerikCheckBox @bind-Value="@(((AppRole)context).IsActive)" />
    </Template>
</GridColumn>
The checkboxes are always visible and the values are editable with a single click.  Note that this sidesteps the TelerikGrid's OnUpdate and OnEdit handlers, but the GridData will be be updated to reflect any changes through the binding.  Additional logic can be provided in the TelerikCheckBox's OnChange handler.
Tags
Grid
Asked by
Randy Hompesch
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Randy Hompesch
Top achievements
Rank 1
Coen
Top achievements
Rank 2
Jonathan
Top achievements
Rank 1
Veteran
Leland
Top achievements
Rank 1
Iron
Iron
Share this question
or