Horizontal scroll panel does not function

[Alessandro]

Hi,

I am trying to add a horizontal scroll bar to a mobile grid I created using your library (ejmGrid). I managed to scroll vertically without any problems which allowed me to see new rows in my grid.

I would like to also include a horizontal scroll to allow me to view more columns in the grid (in case the mobile screen is too small for the whole grid). However, whenever I enable the horizontal scroll property it does not seem to make any difference.

This is my code:

.........

this._associateControlPanel.ejmScrollPanel({

targetWidth: 200,

enableHrScroll: true

}); 

this._associateControl.ejmGrid({ 

dataSource: finalvalue,

allowColumnSelector: true,

allowPaging: true,

pageSettings: {pageSize: 17},

allowFiltering: true ,

allowSorting: true ,

scrollSettings: { height: heightDevice},

allowScrolling: true , 

// Configure Columns for Mobile grid

columns: [

  { field: "code", headerText: "Code", width: 75},

  { field: "name", headerText: "Name", width: 75},

  { field: "type", headerText: "Type", width: 75 },

  { field: "process", headerText: "Process", width: 75 },

  { field: "priority", headerText: "Priority", width: 35}

]});

..........

[Arun Kumar S]

Hi Alessandro,

Thankyoufor your interest in Syncfusion Product.

We have analyzed your code and found that you have handled scrollpanel externally even without targetId which will not make the Grid to scroll horizontally. In case of Grid, this set of external handling for scrollpanel is not needed since we are having inbuilt option for scroll setting to enable horizontal scrolling.

Hence, if we set enableColumnScrolling as true then horizontal scrolling will get enable. This will happen when the grid element width gets exceeded the parent element’s width(By default, grid element will get render relative to its parent element). For example, If the parent element of grid container’s width is 400 and the grid container’s width is 700 we can scroll the grid container if column scrolling is enabled. So, you can scroll the grid horizontally by swipe left or right onto the grid header.

So, we would suggest you to set true for “enableColumnScrolling” property in “scrollSettings” API as in below code snippets.

[script]

$(function () {

// the datasource "window.gridData" is referred from jsondata.min.js

var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));

$("#mobgridscrolling").ejmGrid({

dataSource: data,

allowPaging: false,

allowScrolling: true,

scrollSettings: { enableColumnScrolling: true, enableRowScrolling: true, height: 220 },

columns: [

{ field: "OrderID", headerText: "Order ID", width: 100 },

{ field: "CustomerID", headerText: "Customer ID", width: 140 },

{ field: "Freight", headerText: "Freight", width: 100 },

{ field: "EmployeeID", headerText: "EmployeeID", width: 150 },

{ field: "ShipCity", headerText: "ShipCity", width: 150 }

],

});

});

We have also created a simple sample for your reference. Please find it in the below link.

Sample Link: Sample.zip

Please check this and let us know if you need any further assistance.

Regards,
Arun Kumar S