We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Horizontal scroll panel does not function

Thread ID:





118919 Apr 23,2015 10:47 AM UTC Apr 24,2015 12:01 PM UTC JavaScript 1
Tags: ejmScrollPanel
Asked On April 23, 2015 10:47 AM UTC


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:
targetWidth: 200,
enableHrScroll: true
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 [Syncfusion]
Replied On April 24, 2015 12:01 PM UTC

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.


$(function () {

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

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


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.

Arun Kumar S


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon