w2ui expand grid scroll issue

  javascript, plugins, w2ui

I created a grid contain columns of the same size using the w2ui grid .

When I scroll fastly, the expanded grid got hidden suddenly and I am not able to expand it again.

This is my code:

$('#grid').w2grid({
    name: 'grid',
    header: 'List of Names',
     show: {
            toolbar     : true,
            footer        : true,
            expandColumn: true
        }, 
      onExpand: function (event) {
            $('#'+event.box_id).css({height:"100px"}).html('<div style="padding: 10px; height: 100px">Expanded content</div>');
        },
    columns: [
        { field: 'recid', caption: 'ID', size: '150px'},
        { field: 'lname', caption: 'Last Name', size: '150px'},
        { field: 'fname', caption: 'First Name', size: '150px'},
        { field: 'email', caption: 'Email', size: '150px'},
        { field: 'sdate', caption: 'StartDate', size: '150px'},
        { field: 'mbo', caption: 'mobileno', size: '150px'},
        { field: 'addr', caption: 'address', size: '150px'},
        { field: 'state', caption: 'State', size: '150px'},
        { field: 'district', caption: 'District', size: '150px'},
        { field: 'pin', caption: 'pin', size: '150px'},
        { field: 'salary', caption: 'Salary', size: '150px'},
        { field: 'job', caption: 'job', size: '150px'},
        { field: 'column14', caption: 'column data', size: '150px'},
        { field: 'column15', caption: 'column data', size: '150px'},
        { field: 'column16', caption: 'column data', size: '150px'},
        { field: 'column17', caption: 'column data', size: '150px'},
        { field: 'column18', caption: 'column data', size: '150px'},
        { field: 'column19', caption: 'column data', size: '150px'},
        { field: 'column20', caption: 'column data', size: '150px'},
        { field: 'column21', caption: 'column data', size: '150px'},
        { field: 'column22', caption: 'column data', size: '150px'},
        { field: 'column23', caption: 'column data', size: '150px'},
    ],
    sortData: [{ field: 'recid', direction: 'ASC' }],
    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' }
    ]
});
    
});

why this is happening? How can I solve this?

Source: Ask Javascript Questions

LEAVE A COMMENT