Grid Jumps to top

[parthrawalParticipant]

Hi

Let’s say i am in middle of the grid. and clicking on the cell. When i hit right-arrow key Grid scrolls automatically to top.

Note that my Grid is pretty big and captures almost 70% of the screen.

Is there a way to handle this ?

[Yavor DashevParticipant]

Hi parthrawal,

In order to be able to give you the best solution the best option will be to share a code example of your situation.

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

jQWidgets Team
https://www.jqwidgets.com/

[parthrawalParticipant]

My Grid has selectionmode: ‘multiplecellsadvanced’

Will this help ?

[parthrawalParticipant]

Hi Guys,

Can someone help me please. it’s bit urgent. Yavor can you please help me create fiddle which i can modify to create same scenario ?

[Yavor DashevParticipant]

Hi parthrawal,

Its not necessary to create a fiddle you can just share(copy and paste ) the code of your grid here and we can begin to make you a solution for you.

Best regards,
Yavor Dashev

jQWidgets Team
https://www.jqwidgets.com/

[parthrawalParticipant]

All Column creation Code

function createAllColumnsArray(curGridId,month) {
    var finalArray = new Array();
    var _cellsrenderer = function (row, column, value, defaultRender, column, rowData) {
        if (value.toString().indexOf("Sum") >= 0) {
            return defaultRender.replace("Sum:", "");
        }
    };
    finalArray.push(
        { text: 'Parent', datafield: 'Parent', width: 100, pinned: true, hidden: true },
        { text: 'Category', datafield: 'Category', width: 100, pinned: true, hidden: true },
        { text: 'Title', datafield: 'Child', width: 170, pinned: true,draggable:true },
        { text: '', datafield: 'img', width: 20,cellclassname:'comment',hidden:true,
            createwidget: function (row, column, value, htmlElement) {
                var datarecord = value;
                var imgurl = '../SiteAssets/PortfolioGrid/images/card.png';
                var img = '<img style="margin-top: 4px;" height="16" width="16" src="' + imgurl + '"/>';
                var button = $("<div style='border:none;'>" + img + "<div class='buttonValue'>" + value + "</div></div>");
                $(htmlElement).append(button);
                button.jqxButton({ height: '100%', width: '100%' });
                button.click(function (event) {
                    var clickedButton = button.find(".buttonValue")[0].innerHTML;
                    // show the popup window.
                    var CurrentDate = moment();
                    $("#Month").val(CurrentDate.format('MMM')+"-"+CurrentDate.format('YYYY'));
                    var Name= row.bounddata.Parent+"."+row.bounddata.Category+"."+row.bounddata.Child;
                    $("#Title").val(Name);
                    $("#popupWindow").jqxWindow('show');
                });
            },
            initwidget: function (row, column, value, htmlElement) {
                var imgurl = '../SiteAssets/PortfolioGrid/images/card.png';
                $(htmlElement).find('.buttonValue')[0].innerHTML = value;
                $(htmlElement).find('img')[0].src = imgurl;
            }
        },
        {text: 'Comment', datafield: 'Comment', width: 170, pinned: true,cellclassname:"comment",hidden:true }
    );
    //////////////////////////////////////////////edited cell color change//////////////////////////////////////////////
    var cellclass = function (row, datafield, value, rowdata) {
        for (var i = 0; i < editedCells.length; i++) {
            if (editedCells[i].row == row && editedCells[i].column == datafield) {
                return "editedCell";
            }
        }
    }

    var cellvaluechanging = function (row, datafield, columntype, oldvalue, newvalue) {
        if (oldvalue != newvalue) {
            editedCells.push({ row: row, column: datafield });
        }
    };
    editedCells = new Array();
    //////////////////////////////////Edited Cell Color Change////////////////////////////////////////////////////////
    //new Function('row', 'column', 'value', 'defaultRender', 'column', 'rowData', 'return defaultRender');
    var _cellsrenderer = function (row, column, value, defaultRender, column, rowData) {
        if (value.toString().indexOf("Sum") >= 0) {
            return defaultRender.replace("Sum:", "");
        }
    };

    for (var iMonth = 0; iMonth < month.length; iMonth++) {
        var monthColumns = {}
        monthColumns['text'] = month[iMonth];
        monthColumns['datafield'] = month[iMonth]; //+ iMonth.toString();
        monthColumns['map'] = iMonth.toString();
        monthColumns['width'] = 125;
        monthColumns['cellsalign'] = 'Right';
        monthColumns['aggregates'] = ["sum"];//[{'Sum': aggregated1}];
        monthColumns['cellsrenderer'] = _cellsrenderer;
        monthColumns['aggregatesrenderer'] = renderaggregated;
        monthColumns['cellsformat'] = 'c2';
        monthColumns['draggable'] = false;
        monthColumns['groupable']=false;
        monthColumns['cellclassname'] = cellclass;
        monthColumns['cellvaluechanging'] = cellvaluechanging;
        monthColumns['type']='number';
        //monthColumns['columntype'] = 'numberinput';
        finalArray.push(monthColumns);
    }
    return finalArray;
}

Grid Initialisation

var dataAdapter = new $.jqx.dataAdapter(source, {
        loadComplete: function (data) { },
        loadError: function (xhr, status, error) { }
    });

    var groupsrenderer = function (text, group, expanded, data) {
        var number = dataAdapter.formatNumber(group, data.groupcolumn.cellsformat);
        var text = data.groupcolumn.text + ': ' + number;
        return '<div style="position: absolute;"><span style="font-weight: bold;">' + number + '</span></div>';
    }
    $(curGridId).jqxGrid(
        {
            width: '99%',
            height: '99%',
            source: dataAdapter,
            groupable: true,
            groupsrenderer: groupsrenderer,
            groups: ['Parent', 'Category'],
            showgroupsheader: false,
            editable: true,
            theme: 'energyblue',
            selectionmode: 'multiplecellsextended',
            showgroupaggregates: false,
            showstatusbar: true,
            showaggregates: true,
            statusbarheight: 25,
            columns: allColumnsArray,
            autowidth: false,
            editmode: 'click',
            localization:{ currencysymbol: projectCurrency},
            ready: function () {
                $(curGridId).jqxGrid('hidecolumn', 'Parent');
                $(curGridId).jqxGrid('hidecolumn', 'Category');
                var rows = $(curGridId).jqxGrid('getrows');
                var columns = $(curGridId).jqxGrid("columns").records;
                //in case of dates are extended we need to populate grid with 0s
                $.each(rows,function(r,row){
                    $.each(columns,function(c,column){
                        var colName=column.datafield;
                        var colval=$(curGridId).jqxGrid('getcellvalue',row.uid,colName);
                        try{
                            if(colName.indexOf("-")>-1 && colName !="img" && colName!="ID"){
                                if(colval==null && colval==undefined){
                                    $(curGridId).jqxGrid('setcellvalue', row.uid,colName, 0);
                                }
                            }
                        }catch(error){}
                    });
                });
                //in case of project exists in list but Budget data does not exists then disable grid
                if(curGridId.indexOf("Budget")>-1 && jsonData==null){
                    var columns = $(curGridId).jqxGrid("columns").records;
                    for (var i = 0; i < columns.length; i++) {
                        var datafield = columns[i].datafield
                        $(curGridId).jqxGrid('setcolumnproperty', datafield, 'editable', false);
                    }
                }
            }
        });
    $(curGridId).jqxGrid('expandallgroups');
    $(curGridId).jqxGrid('setcolumnproperty', 'Child', 'editable', false);

[parthrawalParticipant]

Hi,
I have posted the code also, Can you help me now ?

[adminKeymaster]

Hi parthrawal,

Unfortunately, we are unable to run this code locally in order to test it. It seems to miss parts. May be indeed we will need a small jsfiddle example showing the exact scenario and steps to reproduce it.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[parthrawalParticipant]

Hi

I have made this fiddle, it’s not perfect but it might give you some idea

https://jsfiddle.net/P3Dev/v1jf7os2/28/

If you want to reproduce go to the middle of the grid and click cell and then place TAB, grid will jump back to top again

[adminKeymaster]

Hi parthrawal,

The behavior which we observed in the provided example is normal. When you put a HTML Input field on focus and press Tab, the next focusable element is the Grid itself. The focus behavior in the DOM is to scroll to the focused element( you described it like jumping).

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[parthrawalParticipant]

Thanks for the reply. but is there any way i can avoid this ?
Users are not able to edit as it keeps going to the top.
Is there anyway i can stop this behaviour ?

[adminKeymaster]

Hi parthrawal,

Unfortunately, we have no idea how to prevent it as it is natively built-in.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[parthrawalParticipant]

Thanks I really appreciate this. However, i have created an alternative based on my observation. If i do not have any groups in grid then tabs, click and everything works just fine. so, created 2 buttons i.e. group, ungroup. to edit grid i make sure user first click on ungroup button and then edit the grid.

Hope this helps someone

[Author]

Posts