Select checkbox as selected and disabled, based on column value, does not refelct the box selected in the grid.

[Juan Jose Uribe]

Using syncfusion 18.4.0.39 in a .net project v8.0:
In a grid I have a checkbox column and I want that when in the row, the value for the column status==true, then the checkbox looks checked, disabled and when the mouse pass over it, display a tool tip message that says "Driver registered", however none of the three changes are reflected in the view. Since no .js files are admited in the attachements, here are the code that define de grid:

function setGridDrivers() {

    ej.grids.Grid.Inject(

        ej.grids.Page,

        ej.grids.Sort,

        ej.grids.Filter,

        ej.grids.Toolbar,

        ej.grids.ColumnMenu,

        ej.grids.Selection,

        ej.grids.Edit,

        ej.grids.Resize

    );

    gridDrivers = new ej.grids.Grid({

        allowPaging: true,

        allowSorting: true,

        allowFiltering: true,

        allowRowDragAndDrop: true,

        allowTextWrap: true,

        allowResizing: true,

        enableHover: false,

        width: '100%',

        locale: 'es-CO',

        pageSettings: { pageCount: 5, pageSizes: true, currentPage: 1 },

        toolbar: [

            {

                text: 'Registrar',

                tooltipText: 'Registrar',

                prefixIcon: 'e-icon-rowselect',

                id: 'registrar',

                visible: true

            },

            'Search'

        ],

        toolbarClick: function (args) {

            if (args.item.id === 'registrar') {

                app.showNotification('', 'Registrando conductores...', '', () => {

                    Swal.showLoading();

                });

                // Usar función para obtener todas las selecciones ----------

                let selected = getAllSelectedRecords().filter(function (record) {

                    return record.status !== true;

                }) || [];

                if (!selected.length) return;

                $.ajax({

                    type: 'POST',

                    dataType: 'json',

                    data: {

                        matchedDrivers: selected

                    },

                    url: window.urlRegisterDriversQr,

                    success: function (resp) {

                        // Verificar si la respuesta es exitosa

                        if (resp?.succeeded) {

                            // Limpiar selecciones después del registro exitoso ----------

                            clearPersistentSelections();

                            RefreshDriversGrid();

                            // Mostrar mensaje de éxito

                            app.showNotification('success', 'Registro exitoso', resp.Message || 'Los conductores han sido registrados correctamente')

                        } else {

                            // Manejar errores en la respuesta

                            let errorMessage = 'No se pudo completar el registro';

                            if (resp?.Errors && resp.Errors.length > 0) {

                                errorMessage = resp.Errors.join(', ');

                            } else if (resp?.Message) {

                                errorMessage = resp.Message;

                            }

                            app.showNotification('error', 'Error en el registro', errorMessage)

                        }

                    },

                    error: function () {

                        app.showNotification('error', 'No se logró el registro', '')

                    }

                });

            }

        },

        filterSettings: { type: 'Menu' },

        columnWidth: 160,

        showColumnMenu: true,

        columnMenuItems: ['AutoFitAll', 'AutoFit', 'SortAscending', 'SortDescending', 'Columns', 'Filter'],

        allowSelection: true,

        selectionSettings: { type: 'Multiple', checkboxOnly: true, persistSelection: true },

        rowSelecting: function (args) {

            // Si el registro tiene status = true, prevenir la selección

            if (args?.data.status) {

                args.cancel = true;

            }

        },

        // Manejar selección persistente ----------

        rowSelected: function (args) {

            // Agregar a selecciones persistentes

            let licenseNumber = args.data.licenseNumber;

            if (licenseNumber && !args.data.status) {

                persistentSelections[licenseNumber] = args.data;

            }

            updateRegistrarState();

        },

        // Manejar deselección persistente ----------

        rowDeselected: function (args) {

            // Quitar de selecciones persistentes

            let licenseNumber = args.data.licenseNumber;

            if (licenseNumber && persistentSelections[licenseNumber]) {

                delete persistentSelections[licenseNumber];

            }

            updateRegistrarState();

        },

        dataSource: [],

        columns: [

            { type: 'checkbox', width: 50, headerTemplate: "#headerTemplate" },

            { field: 'driverCode', headerText: 'Código Conductor', textAlign: 'Center', headerTextAlign: 'Center', visible: false },

            { field: 'driverId', headerText: 'ID Conductor', textAlign: 'Center', headerTextAlign: 'Center', visible: false },

            { field: 'organizationId', headerText: 'ID Organización', textAlign: 'Center', headerTextAlign: 'Center', visible: false },

            { field: 'licenseNumber', headerText: 'DNI', textAlign: 'Right', headerTextAlign: 'Right', isPrimaryKey: true },

            { field: 'name', headerText: 'Conductor', textAlign: 'Left', headerTextAlign: 'Left' },

            {

                headerText: 'Detalle del Registro', textAlign: 'Center',

                columns: [

                    { field: 'status', headerText: 'Estado', textAlign: 'Center', headerTextAlign: 'Left', template: '#tplRegisterStatus' },

                    { field: 'userAt', headerText: 'Usuario', textAlign: 'Left', headerTextAlign: 'Left', width: 220 },

                    { field: 'creationAt', headerText: 'Fecha', textAlign: 'Center', headerTextAlign: 'Left', type: 'dateTime', format: 'y-MM-ddTHH:mm:sszzz', width: 220 }

                ]

            },

            {

                headerText: 'Detalle Descarga QR', textAlign: 'Center',

                columns: [

                    { field: 'qrDownloaded', headerText: 'QR', textAlign: 'Center', template: '#tplQrIcon', width: 100 },

                    { field: 'qrDownloaded', headerText: 'Estado', textAlign: 'Center', headerTextAlign: 'Left', template: '#tplQrStatus' },

                    { field: 'qrUserDownloaded', headerText: 'Usuario', textAlign: 'Left', headerTextAlign: 'Left', width: 220 },

                    { field: 'qrDownloadedAt', headerText: 'Fecha', textAlign: 'Center', headerTextAlign: 'Left', type: 'dateTime', format: 'y-MM-ddTHH:mm:sszzz', width: 220 }

                ]

            }

        ],

        created: function () {

            gridDrivers.toolbarModule.enableItems(['registrar'], false);

        },

        // Evento para restaurar selecciones al cambiar de página ----------

        actionComplete: function (args) {

            if (args.requestType === 'paging') {

                // Restaurar selecciones al cambiar de página

                restoreSelections();

            }

        },

        actionBegin: function (args) {

            if (args.requestType !== 'headerCheckBoxChange') {

                return;

            }

            // Cancelamos la acción por defecto para tomar el control

            args.cancel = true;

            // 'this' se refiere a la instancia de la grilla

            const grid = this;

            const currentRecords = grid.getCurrentViewRecords();

            if (args.checked) {

                this.handleSelectAll(grid, currentRecords);

            } else {

                this.handleDeselectAll(grid, currentRecords);

            }

        },

        handleSelectAll: function (grid, records) {

            const indicesToSelect = records

                .map((record, index) => (record.status !== true ? index : -1))

                .filter(index => index !== -1);

            if (indicesToSelect.length > 0) {

                grid.selectRows(indicesToSelect);

            }

        },

        handleDeselectAll: function (grid, records) {

            const indicesToDeselect = records.map((_, index) => index);

            if (indicesToDeselect.length > 0) {

                grid.deselectRows(indicesToDeselect);

            }

        },

        rowDataBound: function (args) {

            // Restaurar estado de selección y deshabilitar checkbox si status es true ----------

            let licenseNumber = args.data.licenseNumber;

            if (args.data.status) {

                const checkbox = args.row.querySelector('.e-checkselect');

                if (checkbox) {

                    checkbox.checked = true;

                    checkbox.disabled = true;

                    checkbox.title = 'Conductor ya registrado';

                    // Aplicar clase solo a la celda del checkbox

                    const cell = args.row.querySelector('.e-gridchkbox');

                    if (cell) {

                        cell.classList.add('cell-registered');

                    }

                }

            } else if (persistentSelections[licenseNumber]) {

                const checkbox = args.row.querySelector('.e-checkselect');

                if (checkbox) {

                    checkbox.checked = true;

                }

            }

            //args.isSelectable = args.data.status === false;

            let qrIcon = args.row.querySelector('.qr-download');

            if (qrIcon) {

                qrIcon.onclick = function () {

                    app.showNotification('', 'Descargando QR...', '', () => {

                        Swal.showLoading();

                    });

                    let downloadUrl = window.urlDownloadDriversQr + "?driverId=" + args.data.driverId + "&organizationId=" + args.data.organizationId + "&downloadStatus=" + args.data.qrDownloaded;

                    downloadAndSaveQr(downloadUrl, args);

                };

            }

        }

    });

    gridDrivers.appendTo('#gridDriversQr');

}

[Dineshnarasimman Muthu]

Hi,

Greetings from Syncfusion Support.

We have reviewed your query, it seems you need to implement checkbox for boolean type column and upon hovering the column, you need to display tooltip. To achieve this, we suggest you to use displayAsCheckBox property of column in the status column and wrap the grid element with div and bind tooltip component to it. In the beforeRender event of the tooltip, based on condition, set the tooltip content and cancel the tooltip action for other columns.

The code snippet of the implementation and sample has been attached for your reference.
 

 <div class="content-wrapper">

          <div id="tooltip"><div id="Grid"></div></div>

        </div>

 

 

    {

      field: 'Verified',

      headerText: 'Ship Country',

      width: 150,

      displayAsCheckBox: true,

      editType: 'booleanedit',

    },

 

 

var tooltip = new ej.popups.Tooltip({

  beforeRender: beforeRender,

  target: '.e-rowcell',

});

tooltip.appendTo('#tooltip');

 

function beforeRender(args) {

  let column = grid.getRowInfo(args.target).column;

  if (column.field === 'Verified') {

    let rowInfo = grid.getRowInfo(args.target).rowData;

    if (rowInfo.Verified) {

      tooltip.content = 'Driver Registered';

    } else {

      tooltip.content = 'Driver Not Registered';

    }

  } else {

    args.cancel = true;

  }

}

 

Sample: https://stackblitz.com/edit/flxjjd7b?file=index.js

If this didn’t meet your requirement, please elaborate your requirement step by step, so that we can understand better and provide appropriate solution.

Regards,

Dineshnarasimman M