Grid auto focus

[gabor.pongor]

Hello!

There is a behavior in the grid in case of two way knockout binding that causes issues for us.

When data update happens and there is a selected row or cell the grid gains focus and the page scrolls to the grid.
You can reproduce this behavior with this code (tested in Chrome version 58):

Code: [Select]

<div style="height:1500px;">
   <h1>placeholder</h1><br />
   <span id="message"> </span>
</div>
<div data-bind="pqGrid: gridOptions" style="margin:auto;"></div>


Code: [Select]

var data = [
        { rank: 1, company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0 }
];

function company(obj){
        this.rank = ko.observable(obj.rank);
        this.company = ko.observable(obj.company);
        this.revenues = ko.observable(obj.revenues);
        this.profits = ko.observable(obj.profits);
    };

var items = ko.observableArray(ko.utils.arrayMap(data, function(item){
            return new company(item);
        }));

var counter = 0;

$(function () {
var gridModel = function(){
        var self = this;
        self.items = items;

        self.gridOptions = {       
            height: 'flex',
            maxHeight: 400,
            colModel: [
                { title: "Rank", dataIndx: 'rank' },
                { title: "Company", dataType: "string", dataIndx: "company",
                    filter:{ type: 'textbox', condition: 'contain', listeners: ['keyup'] }
                },
                { title: "Revenues", dataType: "float", dataIndx: "revenues" },
                { title: "Profits", dataType: "float", dataIndx: "profits" }
            ],
            title: "Knockoutjs grid",
            filterModel: {on: true, header: true},
            scrollModel: { autoFit: true },
selectionModel: { type: "row", mode: "single" },
            dataModel: { data: self.items }
        };
    };
       
    ko.applyBindings( new gridModel(), document.getElementById('koApp') );

    setInterval(function() {
         var message = "updated counter: " + ++counter;
items()[0].company(message);
$("#message").text(message);
    }, 5000);
});

Is there any way to turn this behavior off?

Thank you for your help.

Regards.

[paramvir]

The grid grabs the focus when no other focusable element has focus in the document.

There are 2 ways to get rid of this :

1. Focus on some other element on the page.

or

2. Add the below method to un focus the grid.

Code: [Select]

$.paramquery.pqGrid.prototype.defocus = function(){
this._focusElement = null;
}

You would need to call this method somewhere in your code like

Code: [Select]

$(".pq-grid").pqGrid("defocus");


[gabor.pongor]

Hello!

We ended up with controlling focus on the page but both solutions work perfectly.

Thank you for your help.

Regards.