Hi Greg,
From you query, we understand that you would like to achieve the following scenario.
On pressing right arrow, move the scroller as well as on each step of scroller you would like to view the particular column fully (not partial as shown in the gif). Refer to the code example, which will help you to resolve the problem.
In the
dataBound event of
ejGrid, assign the step value (
ejScrollBar’s smallChange API) which must be same as (all) columns width. Following solution has been given based on the
all the columns width and ejScrollBar width having unique value (120px). If the column’s hold
different width,
smallChange must be changed instantly,
which will cause an performance issue.
|
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
scrollSettings: { height: 300, width: 360 },
allowKeyboardNavigation: true,
dataBound: function(args){
this.element.find(".e-hscrollbar").ejScrollBar({ smallChange: 120 });//on each step 120px will be moved so you can view the columns completely.
},
columns: [
{ field: "OrderID", width: 120 },
//each column must be same width as ejScrollBar's width;
// so on each step you can capture the entire column and not partial
. . . . .
{ field: "ShipCountry", headerText: "Ship Country", width: 120 },
]
});
|
We have prepared a sample that can be referred from the following jsPlayground.
http://jsplayground.syncfusion.com/q3n23y5v
If your requirement is different from this scenario, please share the code example of Grid which would be helpful to analyze the issue and provide the solution as early as possible.
Regards,
Seeni Sakthi Kumar S.
