How to stop Kendo KO Grid from auto-scrolling

Question

I have a kendo knockout grid inside a kendo window, the grid is pretty basic, has a checkbox column, and 3 other text columns. The check box column is binded with an observable property in the records Model of the grid, like

$model.isChecked = ko.observable(false);

The datasource of the grid is an observable array of a given javascript model.The grid has pagination with a page size of 10 records, and is scrollable.

The problem I'm having is that for some weird reason, when I click on a checkbox that is at the bottom of the grid, the grid scrolls up to the top, hiding the record I just checked.

I have other grids with the same logic behind and this behavior doesn't happen, I've tried different things and it seems every time I change an observable property of record model, the grid does the same. I also tried subscribing to the scroll event of the grid but I wasn't able to find a difference from me triggering the scroll or the grid doing it by itself.

I also tried what is suggested in this: other question but the behavior I got is not good because you see like a flicker, the grid scrolls to the top and then scrolls to the selected row.

So, have any of you faced a similar problem?

Thanks,

Answer 1

Well actually, after some more debugging I was able to fix it, it was a combination of 2 things, first I had to remove the type declaration from the datasource:

dataSource: {
    type: 'knockout',
    pageSize: 10,
    page: 1,
    watchable: {
        filter: dataSourceWithFilters
    },
    schema: {
        model: {
            fields: {
                'effectiveFrom()': { type: 'date' },
                'effectiveTo()': { type: 'date' },
                'isChecked()': { type: 'boolean' } // <- this line was removed
            }
        }
    }
}

And then, I had some dates in the model, but I had them as computed "listening" to an observable variable in the same model, and every time that observable variable had a value, I returned the dates

$model.link = ko.observable();

$model.effectiveFrom = ko.computed(function () {
    if ($model.link()) {
        return $model.link().effectiveFrom();
    }

    return null;
});

$model.effectiveTo = ko.computed(function () {
    if ($model.link()) {
        return $model.link().effectiveTo();
    }

    return null;
});

It seems this was making the grid to rebind itself every time when any of the date values changed, so I changed that code for this:

$model.link = ko.observable();

$model.link.subscribe(function (value) {
    if (value) {
        $model.effectiveFrom = ko.observable(value.effectiveFrom()).withDateFormat('MMM-DD-YYYY');
        $model.effectiveTo = ko.observable(value.effectiveTo()).withDateFormat('MMM-DD-YYYY');
    }
});

$model.effectiveFrom = ko.observable().withDateFormat('MMM-DD-YYYY');
$model.effectiveTo = ko.observable().withDateFormat('MMM-DD-YYYY');

And with those changes the grid stopped scrolling to the top.

Thanks for the help.

Answer 2

Try this it worked for me

In dataBound and dataBinding events of grid

dataBound = function (e) {
    var sender = e.sender;
    sender.content.scrollTop(sender.options.gridTop);
}

dataBinding = function (e) {
    var sender = e.sender;
    sender.options.gridTop = sender.content.scrollTop();
};