custom render of grid checkbox bug

[jankrnavek]

It seems that custom render doen't work in w2ui 2.0 grid

More here: https://jsfiddle.net/Lz657j3g/

[mpf82]

If you use editable: {type: "check"}, then the grid will always create an <input type="checkbox"> field for you in getCellHTML().

This is done after the renderer has been called.

The result of your renderer will then be used as truthy-value for checking that input field or not. That's why in your case both boxes where checked.

If you want to custom render that column, just remove the editable attribute. Or work with a custom type in the editable object. Or override getCellHTML

[jankrnavek]

Modified version without editable: {type: "check"}, shows context corrtetly but howto emulate checkbox funtionality?

https://jsfiddle.net/gmut0qc7/

[mpf82]

Well, to emulate checkbox functionality, you have to emulate checkbox functionality, that means render your column however you want and then add a delegated click event handler and toggle/flip some value and to tell the grid that the cell value has changed.

https://jsfiddle.net/an6xok90/

https://github.com/vitmalina/w2ui/assets/10152404/f3d49d3f-d306-4727-b4b1-46a830c27f06

The example is based on https://w2ui.com/web/demos/#/grid/21 (Grid Inline Editing Demo)

data-changeind and data-colInd are needed to identify the cell, just as a checkbox in w2grid does.

The relevant parts are the custom renderer:

            render( record, extra ) {
                return '<span class="w2ui-editable-star" data-changeind="' + extra.index + '" data-colInd="' + extra.colIndex + '" data-checked="' + ( extra.value ? 1 : 0 ) + '">' + ( extra.value ? '&starf;' : '&star;' ) + '</span>';
            },

and the click event handler, that also updates the content of the cell:

query( grid.box ).find( '.w2ui-grid-body' ) // gridBody
    .on( 'click.body-global', { delegate : '.w2ui-editable-star' }, ( event ) => {
        const dt = query( event.delegate ).data();
        // read and toggle data-checked
        const flipped = 1 - parseInt( dt.checked, 10 );
        // update data-checked
        query( event.delegate ).data( 'checked', flipped );
        // update the star
        query( event.delegate ).html( flipped ? '★' : '☆' );
        // create INPUT field
        const input   = document.createElement( 'input' );
        input.type    = 'checkbox';
        input.checked = flipped;
        input.style   = 'display: none;';
        // grid.editChange.call( grid, event.delegate, dt.changeind, dt.colind, event );
        grid.editChange.call( grid, input, dt.changeind, dt.colind, event );
        grid.updateToolbar();
    } );

@vitmalina Feel free to add this to the demos

[jankrnavek]

Nice example, thnak you a lot.