w2grid onExpand bugs

This issue has been tracked since 2022-05-12.

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: '[email protected]', sdate: '4/3/2012' },
            { recid: 2, fname: 'Stuart', lname: 'Motzart', email: '[email protected]', sdate: '4/3/2012' },
            { recid: 3, fname: 'Jin', lname: 'Franson', email: '[email protected]', sdate: '4/3/2012' },
            { recid: 4, fname: 'Susan', lname: 'Ottie', email: '[email protected]', sdate: '4/3/2012' },
            { recid: 5, fname: 'Kelly', lname: 'Silver', email: '[email protected]', sdate: '4/3/2012' },
            { recid: 6, fname: 'Francis', lname: 'Gatos', email: '[email protected]', sdate: '4/3/2012' },
            { recid: 7, fname: 'Mark', lname: 'Welldo', email: '[email protected]', sdate: '4/3/2012' },
            { recid: 8, fname: 'Thomas', lname: 'Bahh', email: '[email protected]', sdate: '4/3/2012' },
            { recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: '[email protected]', sdate: '4/3/2012' }
        ]
    });
</script>
</html>
ralonsoreyes wrote this answer on 2022-05-12

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 wrote this answer on 2022-05-22

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

vitmalina wrote this answer on 2022-05-22

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 wrote this answer on 2022-05-23

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
image

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...

More Details About Repo
Owner Name vitmalina
Repo Name w2ui
Full Name vitmalina/w2ui
Language JavaScript
Created Date 2011-04-12
Updated Date 2022-06-22
Star Count 2000
Watcher Count 179
Fork Count 665
Issue Count 255

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date