Backend settings extension method
public static void SetNumCheckBox<T>(this DataGridColumnBuilder<T> builder) { _ = (new JS("CheckBoxCellTemplate")) .EditCellTemplate(new JS("CheckBoxEditorTemplate")) .Lookup(lookup => (new object[] { new { label = "yes", value = 1, }, new { label = "no", value = 0, }, }).DisplayExpr("label").ValueExpr("value")); }
Add cells and edit code in front-end
const getNewDomId = (function () { let id = 1; return function () { return id++; }; })(); function CheckBoxEditorTemplate(el, e) { var domId = 'grid_cell_' + getNewDomId(); (`<div ></div>`); new Vue({ el: '#' + domId, template: `<el-checkbox v-model="state" v-on:change="onChange" />`, data: { state: === 1, }, methods: { onChange(value) { (value ? 1 : 0); }, }, }); } function CheckBoxCellTemplate(container, options) { ( `<div class="dx-checkbox-container ${ === 1 ? 'dx-checkbox-checked' : '' }"><span class="dx-checkbox-icon"></span></div>` ); }
The above is the detailed content of the core's method example of converting an int column to a checkbox using DevExtreme20. For more information about core's conversion of an int column to a checkbox, please follow my other related articles!