w2grid onExpand bugs - Githubissues

ralonsoreyes commented 2 years ago

w2ui vs 1.5 see example below:

The idea: event onExpand to add a w2toolbar into the expanded record box. 2 BUGs: 1.- expanded records do not resize scrollbar to fit the new size. 2.- if you use expand the last records and click in toolbar button, the whole grid is resized and moved to the up. I couldn't find the event or reason that creates this problem.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
</head>
<body>
    <div id="myGrid" style="height: 250px"></div>
</body>
<script>
    $('#myGrid').w2grid({
        name: 'myGrid',
        show: {
            expandColumn: true
        },
        columns: [
            { field: 'fname', text: 'First Name', size: '30%' },
            { field: 'lname', text: 'Last Name', size: '30%' },
            { field: 'email', text: 'Email', size: '40%' },
            { field: 'sdate', text: 'Start Date', size: '120px' },
        ],
        onExpand: function (event) {

            if (w2ui['toolbarSearchItem_' + event.recid]) delete w2ui['toolbarSearchItem_' + event.recid];

            let data = {
                name: 'toolbarSearchItem_' + event.recid,

                items: [
                    { type: 'button', id: 'item1_' + event.recid, text: '', icon: 'w2ui-icon-info', tooltip: 'tool 1' }
                ],
            };
            $('#' + event.box_id).w2toolbar(data);

        },
        records: [
            { recid: 1, fname: 'John', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
        ]
    });
</script>
</html>

ralonsoreyes commented 2 years ago

I believe that I found the part of source in w2ui 1.5 library that is creating the bug:

maybe miscalculated sTop in this case?: $input.css({ left: sLeft - 10, top : sTop });

// set focus to grid
                    var target = event.target;
                    var $input = $(obj.box).find('#grid_'+ obj.name + '_focus');
                    // move input next to cursor so screen does not jump
                    if (obj.last.move) {
                        var sLeft  = obj.last.move.focusX;
                        var sTop   = obj.last.move.focusY;
                        var $owner = $(target).parents('table').parent();
                        if ($owner.hasClass('w2ui-grid-records') || $owner.hasClass('w2ui-grid-frecords')
                                || $owner.hasClass('w2ui-grid-columns') || $owner.hasClass('w2ui-grid-fcolumns')
                                || $owner.hasClass('w2ui-grid-summary')) {
                            sLeft = obj.last.move.focusX - $(obj.box).find('#grid_'+ obj.name +'_records').scrollLeft();
                            sTop  = obj.last.move.focusY - $(obj.box).find('#grid_'+ obj.name +'_records').scrollTop();
                        }
                        if ($(target).hasClass('w2ui-grid-footer') || $(target).parents('div.w2ui-grid-footer').length > 0) {
                            sTop = $(obj.box).find('#grid_'+ obj.name +'_footer').position().top;
                        }
                        // if clicked on toolbar
                        if ($owner.hasClass('w2ui-scroll-wrapper') && $owner.parent().hasClass('w2ui-toolbar')) {
                            sLeft = obj.last.move.focusX - $owner.scrollLeft();
                        }
                        $input.css({
                            left: sLeft - 10,
                            top : sTop
                        });
                    }
                    // if toolbar input is clicked
                    setTimeout(function () {
                        if (['INPUT', 'TEXTAREA', 'SELECT'].indexOf(target.tagName.toUpperCase()) != -1) {
                            $(target).focus();
                        } else {
                            if (!$input.is(':focus')) $input.focus();
                        }
                    }, 50);

vitmalina commented 2 years ago

Can you please create a JS fiddle where you can demonstrate the bug?

vitmalina commented 2 years ago

In general I try to avoid doing design with epxandable grids because they are messy and do not work well with infinite scroll. However, you can do it and adjust expaned row on your own. There is an event "onExpand" and there should be a reference to the newly inserted div. You can use that to set size of your expendable row.

Alternatively, you can use tree-like grid - see https://w2ui.com/demos/#!grid/grid-7

Or perhapse a grid and a preview panel

ralonsoreyes commented 2 years ago

https://jsfiddle.net/raul1975/go9y5fxa/2/

The problem appers only if you expand the last rows in the grid.

Steps to reproduce:

1.- Expand row with "field" "Thomas"... expanded box appers with icon "i". 2.- click on icon "i" and ... 3.- All the grid is wrong rendered and moved

As I said above I fixed the issue commenting this source: (but I dont know if this change could affect other functionalities... infinite scroll, etc...)

$input.css({ left: sLeft - 10, top : sTop });

commenting this source... and in order to change the size in expanded div, I use this source:

onExpand: function (event) {
        var div = '<div id="dtb' + event.recid + '">';
        $('#' + event.box_id).html(div);

       // data is a config json object with a toolbar with icons and functionalities

        $('#dtb' + event.recid).w2toolbar(data);
        let that = this;
        setTimeout(function () {
            that.resize();
        }, 1000);
}

In aditions of this... I use CSS to change the height in box... if needed

.w2ui-expanded-row {
    height: 37px;/*37px;*/
    background-color: #666;
    padding: 0px;
    border: 1px solid #dfdfdf;
    border-radius: 0px;
    width: auto;
}

All seems to work correctly now... I dont know if it could be usefull for you...

vitmalina / w2ui

w2grid onExpand bugs #2214