SoFunction
Updated on 2025-04-08

core using DevExtreme20 to convert int column to checkbox method example

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!