How can the checked or unchecked state of a widget checkbox be displayed during rendering

[jintech]

How can the checked or unchecked state of a widget checkbox be displayed during rendering (on page load, when we change the checkbox state then the event listener called and we don't want to call event listener.)? There is no field; we can determine it based on certain conditions in the render function.

import {  Grid, DataGenerator } from '../../build/grid.module.js?473556';
import shared from '../_shared/shared.module.js?473556';

new Grid({
    appendTo  : 'container',
    rowHeight : 60,
    columns   : [ 
        {
            // Basic column showing the name
            text  : 'Name',
            field : 'name',
            flex  : '0 0 10em'
        },
       

    {
        text     : '',
        type     : 'widget',
        align    : 'center', 

        width    : 200,
        renderer : (renderData) => {
			var template = renderData.record.data,
				setCheckboxValue = false;
				
			if(true) { // If condition is true then set the checkbox checked otherwise set false
				setCheckboxValue = true;
			}
        },
        widgets: [
			{	
				type: 'checkbox',
				name: 'templateCheck',
				listeners: {
					beforeChange(event) {
						if(!event.userAction) {
							return false;
						}
						
						if(false) { // Based on some condition we are decided thsi
							event.valid = false;
							alert("error message");
							return false;
						}
					},
					change(event) {
						if(!event.valid) {
							return false;
						}
						
						var cell_record = event.source.cellInfo.record.data;
						
						// send ajax request to server to update value
					}
				}
			}
        ]
    }
],

store : {
    data       : DataGenerator.generateData(50)


}
});

[marcio]

Hey jintech,

Thanks for reaching out.

You can check the widget on renderer function like this

renderer : (renderData) => {
	// If condition is true then set the checkbox checked otherwise set false
	if(renderData.record.data.id === 1) {
		renderData.widgets[0].checked = true;
	}
}

You can add that widget column and this snippet here to test it https://bryntum.com/products/grid/examples/basic/

[jintech]

Hey jintech,

Thanks for reaching out.

You can check the widget on renderer function like this

renderer : (renderData) => {
	// If condition is true then set the checkbox checked otherwise set false
	if(renderData.record.data.id === 1) {
		renderData.widgets[0].checked = true;
	}
}

You can add that widget column and this snippet here to test it https://bryntum.com/products/grid/examples/basic/

We have already attempted this solution. The problem with this solution is that it not only sets the checkbox status but also triggers the associated event, it behaved as if we clicked on it (i think which is not correct).

If we ignore the above case, during bryntum rendering it triggers the beforeChange event where we have the following condition, causing the checkbox to not change the state (and we need this check to avoid calls on the server side during bryntum rendering on page load):

if(!event.userAction) {
return false;
}

We only want the checkbox status to be checked during Bryntum rendering based on certain conditions.

You can test the code here
https://bryntum.com/products/grid/examples/widgetcolumn/

[tasnim]

Hi,

Looks like you'd need to add a custom field to the data model

Please try this

class Person extends Model {
    static get fields() {
        return [
            'name',
            { name : 'isChecked' }
        ];
    }

get isChecked() {
    return this.id === 1;
}
}

let isFirstPaint = false;

new Grid({
    appendTo  : 'container',
    rowHeight : 60,
    listeners : {
        paint(props) {
            isFirstPaint = props.firstPaint;
        }
    },
    columns   : [ 
        {
            // Basic column showing the name
            text  : 'Name',
            field : 'name',
            flex  : '0 0 10em'
        },
       

{
    text     : '',
    type     : 'widget',
    align    : 'center', 

    field    : 'isChecked',
    width    : 200,
    widgets: [
		{	
			type: 'checkbox',
			// name: 'isChecked',
			listeners: {
				beforeChange(event, newEvent) {
					if(!event.userAction) {
                        return false;
						// event.stopPropagation();
					}
					
					if(false) { // Based on some condition we are decided this
						event.valid = false;
						alert("error message");
						return false;
					}
				},
				change(event) {
					if(!event.valid) {
						return false;
					}
					
					var cell_record = event.source.cellInfo.record.data;
					
					// send ajax request to server to update value
				}
			}
		}
    ]
}
],

store : {
    // Configure the data store with the person model
    modelClass : Person,
    data       : DataGenerator.generateData(50)


}
});

This should work for you.

Best of luck ,
Tasnim

[Animal]

I thought that if the name of the widget is the record field name, then it should be set from that record.

See https://bryntum.com/products/grid/examples/widgetcolumn/

Those checkboxes are set from the data in the record.