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.
Unfortunately, activation email could not send to your email. Please try again.

Horizontal scroll panel does not function

Thread ID:

Created:

Updated:

Platform:

Replies:

118919 Apr 23,2015 06:47 AM Apr 24,2015 08:01 AM JavaScript 1
loading
Tags: ejmScrollPanel
Alessandro
Asked On April 23, 2015 06:47 AM

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 [Syncfusion]
Replied On April 24, 2015 08:01 AM

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

CONFIRMATION

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.

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.

;