Boolean value in Datagrid shown as checkbox

Radzen Studio Angular
1

Hello All
I currenly have a datagrid created from a SQL db table that contains a boolean\bit field. When I run the page the field is shown as true\false which is ok, however, how can i change this so it shows as a checkbox so the user can check\uncheck the box and that result then saved back to the database.

Thanks
Otis

2

Ok, I am a step closer. I should've been more confident in my playing around :slight_smile:
By entering the below code into the template column that i am looking to be a checkbox I get the box. Yay!
However, when you click on one checkbox all check boxes are selected. Also I havent worked out how to set the state of the checkbox yet.

<rz-checkbox #checkbox${data.id} [(ngModel)]="isChecked" value="${data.ReverseSign}" name="checkbox${data.id}">

3

Hi Otis,

All checkboxes are selected because they are all data-bound to the same property - isChecked.

There is an easier way to implement what you need without writing any code.

  1. Edit the Template of that column via the template designer - click the "edit" icon (which is the last one).
  2. Drag and drop a Checkbox component from the toolbox. Set its Value property to ${data.BooleanProperty} where BooleanProperty is the name of your boolean column.
    09
    Screen Shot 2018-10-19 at 15.07.09.png3846×1972 337 KB
  3. Handle the Change event of the Checkbox component and execute the updateXXX data source method which will update your entity with the new value.
    46
    Screen Shot 2018-10-19 at 15.20.46.png3844×1976 405 KB

Then just exit the template designer by clicking the "End template editing" button in the top left corner.

I am attaching a working application which you can import in Radzen.checkbox-column.zip (8.4 KB)

1 Like
4

Oh. My. God! :exploding_head::exploding_head::exploding_head:I am speechless! That is actually easier than i expected and now i know what that icon does.
Feeling a little foolish but very pleased that it is solved. Thank you so much.

5

This seems to only work, the first time the checkbox is selected / clicked.

subsequent selections of the check box fails with "Update Failed".

This is the behavior of the "checkbox-column" working application.

I followed the "Checkbox-Column" example to add a checkbox to my data grid. and it works but only the first time.

the first time I select the check box, the Boolean value is successfully altered. however selecting the checkbox any number of times thereafter fails. "Update Failed"

your help is appreciated.
michael

6

If the database field is non nullable, make sure the CheckBox is not tri-state - otherwise it will try to save null in the database and will fail.

7

@enchev,

In my application the checkbox is NOT tri-state and nulls are allowed for this field.

in the Radzen example "checkbox-column" the checkbox is not tri-state. and it has this issue.

the failure occurs when attempting to update to True or False.

michael

8

@enchev,
Correction. I am no longer seeing the issue using the "Checkbox-Column" application.

I notice that on the failed update attempts an additional request payload parameter is being sent.

@odata.context: "https://techneauxapidev.azurewebsites.net/odata/TechneauxDB/$metadata#Times/$entity"

this is not included in a successful attempt.

I can send a further information from Chrome's Dev tools if that will help.

thanks,
michael