Repository: vitmalina/w2ui

Issue #1789: Inline edit with list type issue
Created: 2018-08-14T12:10:31Z
Hi,
Editing cell in 'list' type bug.
All is working ok, then 'list' type column is visible in grid.
If this column is in right-side of grid, that must to scroll horizontal view, then editing isn't allowed . It blink at first column and after that no any column can be editable, until refresh page.
Simply extende test/grid.html sample with some columns, that list column will be not visible and try to edit :
`
$(function () {
var people = [
{ id: 1, text: 'John Cook' },
{ id: 2, text: 'Steve Jobs' },
{ id: 3, text: 'Peter Sanders' },
{ id: 4, text: 'Mark Newman' },
{ id: 5, text: 'Addy Osmani' },
{ id: 6, text: 'Paul Irish' },
{ id: 7, text: 'Doug Crocford' },
{ id: 8, text: 'Nicolas Cage' }
];
$('#grid').w2grid({
    name    : 'grid',
    header    : 'List of Names',
    show: {
        toolbar: true,
        footer: true,
        header: true,
        emptyRecords: false,
        selectColumn: true,
        expandColumn: false,
        columnHeaders: true,
        lineNumbers: true,
        toolbarDelete: true,
        toolbarSave: true,
        toolbarAdd: true
    },
    onClick: function (event) {
        var tg = $(event.originalEvent.target);
        if (tg[0].tagName == 'DIV') tg = tg.parents('td');
        if (tg.hasClass('w2ui-col-select')) {
            console.log('clicked on select row checkbox');
        }
    },
    onSelect: function () {
    },
    // selectType: 'cell',
    columns: [
        { field: 'recid', caption: 'ID', size: '80px', sortable: true, searchable: 'int', frozen: true },
        { field: 'int', caption: 'int', size: '80px', sortable: true, resizable: true,
          editable: function (record, index, col_index, data) {
              // only odd 'recid' records are editable
              if (record.recid % 2) return { type: 'int', min: 0, max: 100 };
          } },
        { field: 'money', caption: 'money', size: '80px', sortable: true, resizable: true, editable: { type: 'money' }, render: 'money' },
        { field: 'percent', caption: 'percent', size: '80px', sortable: true, resizable: true, editable: { type: 'percent' }, render: 'percent' },
        { field: 'hex', caption: 'hex', size: '80px', sortable: true, resizable: true, editable: { type: 'hex' } },
        { field: 'color', caption: 'color', size: '80px', sortable: true, resizable: true, editable: { type: 'color' } },
        { field: 'date', caption: 'date', size: '80px', sortable: true, resizable: true, editable: { type: 'date' } },
        { field: 'time', caption: 'time', size: '80px', sortable: true, resizable: true, editable: { type: 'time' } },
        { field: 'text1', caption: 'text1', size: '120px', sortable: true, resizable: true, editable: { type: 'text' } },
        { field: 'list', caption: 'list', size: '50%', sortable: true, resizable: true,
            editable: { type: 'list', align: 'left', items: people }
        },
        { field: 'combo', caption: 'combo1', size: '50%', sortable: true, resizable: true, editable: { align: 'left', type: 'combo', items: people } },
        { field: 'select', caption: 'select', size: '100px', sortable: true, resizable: true,
            editable: { type: 'select', items: people },
            render: function (record, index, col_index) {
                var html = '';
                for (var p in people) {
                    if (people[p].id == this.getCellValue(index, col_index)) html = people[p].text;
                }
                return html;
            }
        },
        { field: 'check', caption: 'check', size: '40px', sortable: true, resizable: true,
            editable: function (record, index, col_index, data) {
              // only odd 'recid' records are editable
              if (record.recid % 2) return { type: 'checkbox' }
           } },
        { field: 'text2', caption: 'text2', size: '120px', sortable: true, resizable: true, editable: { type: 'text' } },
        { field: 'text3', caption: 'text3', size: '120px', sortable: true, resizable: true, editable: { type: 'text' } },
        { field: 'text4', caption: 'text4', size: '120px', sortable: true, resizable: true, editable: { type: 'text' } },
        { field: 'list2', caption: 'list2', size: '50%', sortable: true, resizable: true,
            editable: { type: 'list', align: 'left', items: people }
        },
    ]
});
var fname = ['Vitali', 'Katsia', 'John', 'Peter', 'Sue', 'Olivia', 'Thomas', 'Sergei', 'Snehal', 'Avinash', 'Divia'];
var lname = ['Peterson', 'Rene', 'Johnson', 'Cuban', 'Twist', 'Sidorov', 'Vasiliev', 'Yadav', 'Vaishnav'];
// add 10k records
for (var i = 0; i < 15; i++) {
    w2ui['grid'].records.push({
        recid : (i + 10),
        list1 : { id: 1, text: 'some' },
        int: 4,
        float: 5,
        money: 6,
        check: Math.random() > 0.9 ? true : false,
        select: 2,
        text1: '',
        text3: '',
        text3: '',
        text4: '',
        list2 : { id: 1, text: 'some' },
    });
}
w2ui.grid.records[0].editable = false;
w2ui.grid.records[1].editable = false;
w2ui.grid.records[2].editable = false;
w2ui.grid.total = w2ui.grid.records.length;
w2ui.grid.buffered = w2ui.grid.records.length;
w2ui.grid.refresh();

});
`
I added some columns 'text' type - 'text1', 'text2' ... and the last column 'list2' as 'list' type.
Thanks in advance ...

Duplicate issue #1956: 'List' edit control's overlay in wrong spot when grid has horizontal scroll
Created: 2021-02-21T13:57:21Z
Short description
On a grid without horizontal scrolling, if I use the 'list' edit control for a column and make that column editable, the overlay shows below the cell and fills the width of the column (as expected). However, if there are enough columns in the grid for horizontal scrolling and the grid is scrolled away from the left-most position, making a 'list' column editable places the overlay
What is current behavior
As mentioned above
What is desired behavior
Desired behavior is when painting the overlay to take the horizontal scroll position into account so overlay remains within the width of the 'list' column.
Link to jsfidle/codepan with sample code
...
Steps to reproduce or sample
Create a grid with enough columns to have horizontal scroll.
Place a 'list' edit control on a column that requires scrolling to get to.
Make one of the cells in that column editable.  Overlay will not be under the column.

Closing comment (2021-02-21T14:05:23Z): This might be a duplicate of issue #1789
Can you please check the issue and my jsfiddle and confirm whether your post is a duplicate?
#1789 (comment)