Enable browser.LoadCharts() to accept a "scroll item into view" paramater.

[bradsa]

After loading data via Ajax I would like to make the list browser focus / scroll to where an item is in view by default. Say I have 200 items, the first 100 are displayed, but I would like to scroll/focus on item 175.

Eg: http://keshif.me/demo/factbook.html and say I wanted to focus on Maldives (176) and have the browser automatically scroll that into view (or have that highlighted some way).

It would be good to enable this in browser.loadCharts(); by allowing the function to accept a parameter?

Thoughts?

[bradsa]

Here's what I did outside of the browser to make this work. (thanks to the scrollToPos_do fn!)

   window.setTimeout(function () {
            var listFacet = browser.filterList[6].facet;
            listFacet.autoExpandMore = true;
            var scrollDom = listFacet.dom.listItemGroup[0][0];
            var targetPos = scrollDom.childNodes[itemIndexToScrollTo].offsetTop - scrollDom.childNodes[itemIndexToScrollTo].clientHeight;
            kshf.Util.scrollToPos_do(scrollDom, targetPos);
        },
        1000);

[adilyalcin]

Hi Brad,

The idea of automatically scrolling into an item in list display (or even some category on some facet) is a good one. I was going to suggest implementing this feature outside of keshif by taking some sample code from its internal implementation. I'm glad you figured out how! Cheers,

[IsmailAb]

I am looking to do a similar thing to what Brad did. Having auto scroll/focus into specific Item. However, with the latest updates, the div is not rendered till the scroll happens. I have tried few ideas and modifying the data API to get it to work but it made usibility as well perf bad. Any other ideas here I can try ?

[adilyalcin]

Hi @IsmailAb ,

There are indeed two things to take care about:

1. The element may not be inserted to DOM, bc it is not visible and adding all records can grow DOM tree very quickly. Take a look at showMoreRecordsOnList function to see how the records are expanded. Basically, maxVisibleItems variable describes how many records are actually inserted to DOM. The variable names, implementation and design may be updated in the future, but I think it is fairly stable to begin with.

2. To scroll to the element, the following code may give you an idea (once you have the record inserted to the DOM). Just check and run the code on the browser console while you open a keshif demo, for example the one at www.keshif.me/demo/best_selling_singles_2008

var r = browser.records[50]; // browser is a kshf.Browser object, we are just picking 50'th record.
var recordPosition = r.DOM.record.offsetTop;
var DOM = browser.recordDisplay.DOM.recordGroup[0][0]; // this is what hosts the record
DOM.scrollTop = recordPosition; // And, done, the selected record appears on top.

You can do more customizations to animate the scrolling and highlight the record.

I hope this helps,

Adil

[DebeshDas]

I tried the first point and was able to load more records into the DOM by tweaking the value of the maxVisibleItems variable by setting it to a very large value. But then when we deal with a large number number of records (10,000 and more), the entire DOM becomes slow. Any ideas where we might be able to optimize this ?
Once the DOM is loaded, the code provided in the second point works really well.