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)
}
});
Last edited by jintech on Thu Feb 01, 2024 1:57 pm, edited 1 time in total.
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 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;
}
}
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.
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)
}
});