Is it possible to horizontally scroll a DataView

Suite and Optimus Suite 5
#1

I have tried changing the css to overflow-x: auto; and overflow-x: scroll on my DataView. However, it does not scroll. I see the scrollbar but it does’t actually scroll. Is it possible? Please let me know.

#2

You can set fixed data view container width and then configure how much items should be placed on one row:

y_count: 4;
#3

I think you might mean:

x_count: 1

I have set the width and the x_count but my DataView still does not horizontally scroll:

[code] dvPage = pnlPage.attachDataView({
x_count: 1,
type: {
template: “”,
width: 706,
height: 1284,
padding: ‘5’,
template_loading: “Loading…”
}
});

dvPage.load('./data/image_view.xml?etc=' + new Date().getTime(), function () { });[/code]

As you can see, my DataView is 706px wide and my content is 1000px wide with the x_count =1. I can see in Firebug that the “customobject” for the DataView still does not have overflow-x set. I also see that the first child div of the “customobject” has width: 100%. This is why the DataView will not scroll.

I must be doing something wrong. Do you have any suggestions? Do you have any sample projects that I can look at that set the x_count so that the DataView horizontally scrolls? Please let me know.

#4

DataView doesn’t have horizontal scroll. However, you can use the following workaround:

Use attachObject instead of attachDataView to attach Div with overflow:auto. This Div should contain another Div where you should initialize your DataView. If DataView created with autoheight, you’ll get the desired result:

[code]


[/code]

JS snippet:

pnlPage.attachObject("content"); dvPage = new dhtmlXDataView({ container:"dataview", x_count: 1, height:"auto", type: { template: "<img id='i-#id#' iid='#id#' src='#src#' width='1000' height='1284' />", width: 706, height: 1284, padding: '5', template_loading: "Loading..." } });

#5

Thank you. Your suggestion adds the horizontal scroll.

However, the suggestion causes the DataView to load all the items when the page loads. The DataView no longer “Smart Renders” the items. Is there anyway to get the horizontal scroll and still have “Smart Rendering”?

Also, the DataView.show (scroll to item) no longer works. I can probably code something myself to fix that issue. But I was wondering if there was a DHTMLX solution. Please let me know.

#6

Hi,

yes, dataview with auto height renders all items at once.

You can try to use another solution…

Try to modify the template. Place img with fixed size that into div with overflow-x auto. In this case each image will have own scroll. DataView will not be scrolled horizontally, but a page.

…
type: {
template: “

”,
…

type->height and type->width should remain the same as set initially (dataview item should not be resized).