KoGrid - auto scroll to selected

Question

I want to use KoGrid to show a list of "assets" and have the same assets showing in a Google map. When the user clicks on the pin in the map, the corresponding asset in the list should be scrolled down to show it at the top. Bonus: don't do anything if it is already in view.

I've done this before on a different list and the interaction with sorting and filtering caused me problems for awhile (I had to re-figure out the index of the asset every time I sorted or filtered).

Can I do this with the koGrid? I need to figure this out before switching to this grid. Any examples or help is appreciated.

score 4 · Answer 1 · edited May 05 '13 at 07:25

I think you are going to need to get a reference to the grid and call the grids $viewport.scrolltop method. Note: I didn't test this, I just wrote it based on something I've done that was similar.

plugins: [{
    onGridInit: function (g) {
// maybe add a method to your view model
        viewModel.scrollTo = function (index, key) { // index of item in filter data, key is something i made up
            if (index > g.filteredData().length - 8) { // 8 is the default excess_rows value in kogrid
                g.$viewport.scrollTop(g.$viewport.scrollTop() + (g.config.rowHeight * index));
            }
            // if you want to select the row (set time out because ko grid dynamically creates the rows rendered in the grid)
            setTimeout(function () {
                var i = ko.utils.arrayFirst(g.renderedRows(), function (row) {
                    // some function that finds the entity
                    return row.entity.key === key;
                });

                if (i) {
                    g.selectionService.ChangeSelection(i) // this will select the row
                }
            }, 100);

        }// assume self is your view model
    }
}]

KoGrid - auto scroll to selected

1 Answers1