Render Boolean value as checkbox

[License Admin]

Hi, 

In project i want to render boolean value as checkbox but even though value is true it is not showing checkbox as checked but when we open that in edit mode it is showing in checked checkbox but i am not able to set it to false.

The following is my column directive :-

<ColumnDirective

field="offerable"

displayAsCheckBox="true"

editType="booleanedit"

type="boolean"

headerText="Active"

clipMode="EllipsisWithTooltip"

/>

My response model is line

1. {
2. bruUnitName: null
3. bruUnits: 4
4. name: "Weekly"
5. offerable: true
6. price: 140
7. rateFactor: 14 
8. }
9. 
   
10. 
    
11. 
    

[Pavithra Subramaniyam]

Hi Sandeep, 

 

Thanks for contacting Syncfusion support. 

 

We have tried to reproduce the reported behavior at our end but Boolean column is working fine at our end. Please refer to the below sample link for your reference. 

 

Sample: https://stackblitz.com/edit/react-599jzu-2sxgsw?file=index.js 

 

Could you please provide the below details that will be helpful for us to provide a better solution as early as possible. 

 

1. Share the full Grid code.
2. Share the details how you have bound data to the Grid
3. Please reproduce the issue in the above sample if possible

 

Regards, 

Pavithra S. 

 

[License Admin]

Hi Pavithra,

Thanks.

For us if we have only one grid it is working fine but if we have subgrid it is not allowing me to edit it (uncheck it). Can you share example where in subgrid we have rendered boolean as checkbox.

[Pavithra Subramaniyam]

Hi Sandeep, 

 

From your query we suspect that you are using boolean column in  hierarchy Grid. We have prepared a simple sample based on your query in which we have rendered a Boolean column in child Grid and enabled editing . Please refer the below code example and sample link for more information. 

 

[App.Vue] 

export class Hierarchy extends SampleBase { 

    constructor() {  

        this.childGrid = { 

            dataSource: hierarchyOrderdata, 

            queryString: 'EmployeeID', 

            editSettings:{allowEditing:true,allowDeleting:true}, 

            columns: [ 

              {field:"Verified",type:"boolean",displayAsCheckBox:true,width:150,editType:"booleanedit"}, 

                { field: 'OrderID', headerText: 'Order ID', isPrimaryKey:true,textAlign: 'Right', width: 120 }, 

                .   .  . 

            ] 

        }; 

    } 

    render() { 

        return (<div className='control-pane'> 

                <div className='control-section'> 

                    <GridComponent dataSource={employeeData} childGrid={this.childGrid} > 

                        <ColumnsDirective> 

                          .    .    . 

                        </ColumnsDirective> 

                        <Inject services={[Edit, DetailRow ,Toolbar, Page]}/> 

                    </GridComponent> 

                </div> 

            </div>); 

    } 

} 

render(<Hierarchy />, document.getElementById('sample')); 

 

Sample               : https://stackblitz.com/edit/react-zw5icv-qznyat?file=index.js 

 

If the above does not meet your requirement then share more details like Grid code, simple sample, screenshot or video of the issue which will be more helpful for us to provide a better solution as soon as possible. 

 

Regards, 

Pavithra S. 

 

[License Admin]

Hi Pavithra,

Can we have call tomorrow at 3:00pm IST to discuss this?

[Pavithra Subramaniyam]

Hi Sandeep, 

 

Thanks for contacting Syncfusion support 

 

We have created a new incident #240441 under your account and updated the meeting invitation there. So please follow the incident for more updated regarding the Grid Boolean column query. 

 

Regards, 

Pavithra S.