ASP.NET Grid - Scroll Column Sets Horizontally


CustomerID
OrderID
COMPANY NAME
CONTACT NAME
CITY
ADDRESS
COUNTRY
ORDER DATE
SHIPPED DATE
REQUIRED DATE
 
 
 
 
 
 
 
 
 
 
 
 
 
 
RATTC
11077
Rattlesnake Canyon Grocery
Paula Wilson
Albuquerquesdsd
2817 Milton Dr.
Portugal
05/06/1998
5/6/1998 12:00:00 AM
06/03/1998
6/3/1998 12:00:00 AM
BONAP
11076
Bon app'
Laurence Lebihan
Marseille
12, rue des Bouchers
Francertrdfdsf
05/06/1998
5/6/1998 12:00:00 AM
06/03/1998
6/3/1998 12:00:00 AM
RICSU
11075
Richter Supermarkt
Michael Holz
Genève
Starenweg 5
ZCzs
05/06/1998
5/6/1998 12:00:00 AM
06/03/1998
6/3/1998 12:00:00 AM
SIMOB
11074
Simons bistro
Jytte Petersen
Kobenhavn
Vinbæltet 34
Denmark1
05/06/1998
5/6/1998 12:00:00 AM
06/03/1998
6/3/1998 12:00:00 AM
PERIC
11073
Pericles Comidas clásicas
Guillermo Fernández
México D.F.
Calle Dr. Jorge Cash 321
Mexico
05/05/1998
5/5/1998 12:00:00 AM
06/02/1998
6/2/1998 12:00:00 AM
ERNSH
11072
Ernst Handel
Roland Mendel
Graz
Kirchgasse 6
Austriaz
05/05/1998
5/5/1998 12:00:00 AM
06/02/1998
6/2/1998 12:00:00 AM
LILAS
11071
LILA-Supermercado
Carlos González
Barquisimeto
Carrera 52 con Ave. Bolívar #65-98 Llano Largo
Venezuela
05/05/1998
5/5/1998 12:00:00 AM
06/02/1998
6/2/1998 12:00:00 AM
LEHMS
11070
Lehmanns Marktstand
Renate Messner
Frankfurt a.M.
Magazinweg 7
Mexico
05/05/1998
5/5/1998 12:00:00 AM
06/02/1998
6/2/1998 12:00:00 AM
TORTU
11069
Tortuga Restaurante
Miguel Angel Paolino
VENEZUELA
Avda. Azteca 123
JOJOO
05/04/1998
5/4/1998 12:00:00 AM
05/06/1998
5/6/1998 12:00:00 AM
06/01/1998
6/1/1998 12:00:00 AM
QUEEN
11068
Queen Cozinha
Lúcia Carvalho
Sao Paulo
Alameda dos Canàrios, 891
Brazil, Mexico
05/04/1998
5/4/1998 12:00:00 AM
06/01/1998
6/1/1998 12:00:00 AM
 
 
 
 
 
 
 
 
 
Records per page:
1
|
2
|
3
|
4
|
5
Records: 1 - 10 of 50 - Pages: 
The columns of the Grid can be grouped in column sets. The column sets will be automatically resized when the columns are resized. The Grid allows developers to create multiple levels of column sets.

Currently column sets may be added only from the client-side. First, you need to load the "column-set.js" file from the "oboutSuite / Grid / resources / custom_scripts / column-set" folder at the bottom of your page
<script type="text/javascript" src="resources/custom_scripts/column-set/column-set.js"></script>

You also need to load the custom stylesheet required by this feature (e.g. in the <head> section):
<link href="resources/custom_scripts/column-set/column-set.css" rel="stylesheet" type="text/css" />

Then, call the addColumnSet client-side method for each column set that you want to add:
Grid1.addColumnSet(level, startColumnIndex, endColumnIndex, text); where
  • level - indicates the level where the column index will be added (first level is 0);
  • startColumnIndex - indicates the index of the first column from the column set;
  • endColumnIndex - indicates the index of the last column from the column set;
  • text - indicates the text of the column set.


For the source code please check the "aspnet_column_sets_scrolling.aspx" sample from the Grid folder in the Suite.

"Thanks for your quick response. I have really enjoyed developing with your product. So far it seems easy to use and it really adds style to my projects. "

Troy Patton

Random testimonial   All testimonials

Products Downloads
obout.com
obout.com Home
News
Grid Home 
Grid Home
Download
Site Map
Examples - 313
Appearance - 2
Live Styles
Populating with data - 16
Declaratively (Design-time) - 4
Binding to ObjectDataSource
Binding to SqlDataSource
Binding to XmlDataSource
Populating from Stored Procedures
At Run-time - 6
Binding to DataSet
Binding to DataReader
Binding to DataTable
Binding to Generic Collections
Binding to Linq
Binding to LinqDataSource
Best Performance - 3
DataSourceNeeded Event New
Paged ObjectDataSource
Partial Load
Miscellaneous - 3
Switching Data Sources New
Populate on Button Click New
Pivot Table
Add/Edit/Delete - 26
Standard - 3
Add/Edit/Delete Records
Multi-Record
Position for New Record/Links New
Custom Editors - 5
Using Custom Forms
Sliding Row Editor
Using Super Form
Using Super Form in Window
Using Flyout
Excel-Style - 2
Excel-Style New
Excel-Style with Autosave New
Custom Triggers - 4
Edit using Context Menu
Edit on Click
Edit on Double-Click
Edit on Dbl-Click with Auto-Save
Saving to Database - 8
Automatic Updates
Using SqlDataSource
Using ObjectDataSource
Using Stored Procedures New
Detect Unsaved Changes
Add to empty table
Default Values for Add/Edit
Save Changes on the Client Side New
User Confirmation - 2
Before Insert / Update / Delete
Confirmation Using Window
Handling Errors - 2
Handling Errors
Handling Errors with Row Templates
Record Selection - 13
Standard Selection - 2
Select Records
PostBack on Select
Custom Selection - 5
Select using Check Boxes New
Select using only Check Boxes New
Select using Radio Buttons
Select using Checkmark
Select All Group Records
Multiselect without CTRL/SHIFT New
Retrieve Selected Records - 2
Find Selected Records - Client-Side
Find Selected Records - Server-Side
Programmatic Selection - 3
Client-Side
Server-Side
Select All Records
Columns - 22
Manipulating Columns - 4
Resizing Columns
Dynamic Column Resizing New
Reordering Columns New
Show / Hide Columns
Column Types - 2
CheckBoxColumn New
CheckBoxSelectColumn New
Settings - 15
AutoGenerateColumns
Align / HeaderAlign
AllowEdit / AllowDelete
ApplyFormatInEditMode
DataFormatString
Index
NullDisplayText
ParseHTML
ReadOnly
Wrap
Visible
Width
Relative Widths
Relative Width for the Columns/Grid
Auto Resize Columns New
Miscellaneous - 1
Different Styles
Paging - 7
Mode - 2
Standard Paging
Manual Paging
Customization - 4
Position New
Customize Paging
Customize Numbers of Pages
Show ALL records
Client-Side API - 1
Change Page on Client
Sorting - 4
Sorting
Multi-Column Sorting
Sorting Week Days
Allow Sorting for Columns New
Filtering - 25
Standard Filtering - 1
Filtering Records
Custom Filtering - 8
Filter Templates
Filter with Date Picker New
Custom Filter Options with Templates
Between, By Year, By Month
Filter Localized Dates
Filter with On-Demand ComboBox
Live Search New
Filter All with Live Search New
Filter Settings - 3
Filter Position New
Initial State
ALL vs. ANY
Column Settings - 3
Enable/Disable Filtering for Columns
Show/Hide Filter Criterias
Customize Filter Options
Programmatic Filtering - 6
Initial Filter
Programmatic Filter - Client-Side
Alphabetic Filter
Keeping Filter State
External Filter Buttons
Filter On Blur
Best Performance - 2
Filter with DataSourceNeeded Event
Filter with Paged ObjectDataSource
Miscellaneous - 2
Validate Filters
Master/Detail with External Filters
Templates - 31
Templates for Add/Edit
Templates for the Filter
Format Dates
Grid With Images
Add/Edit/Delete Buttons
Add/Edit/Delete Images
Multi-Record Add/Edit/Delete
Filter Buttons
Combine Columns
Wrap the Headers
Manual Paging
Number the records
GroupHeaderTemplateId
Format Currencies
Custom Formatting
With Multiselect Listbox
Edit Using CheckBoxList
With Databound Controls
DropDownList with 'New'
View / Edit Details
Customize for Mobile Devices
Get values from textboxes
Detail View
Different Input Fields for Add/Edit
Different Row Fields for Add/Edit
Templates for Edit-Delete
Reports and Row Templates
Access checkboxes inside
Access radio buttons inside
Multiple Controls
Scrolling - 16
Vertical Scroll with Fixed Headers
Horizontal Scroll
Dynamic Horizontal Scroll New
Vertical & Horizontal
Automatic Scroll
Horizontal Scroll and Filter
Using Percentages
Full Window Width / Height
Automatic Resize with Splitter
Fixed (Frozen) Columns
Fixed (Frozen) Rows New
Fixed Height
Fixed Height in Percentages
Virtual Scrolling New
Virtual Scrolling with Paging New
Keep Scroll On PostBack New
Grouping - 14
Grouping the Records
Allow Grouping for Columns
Initial Grouping
Groups Information
Multi-Page Groups Information
Show Collapsed Groups
Hide Columns When Grouping
Keep Expanded
Format the Group Headers
Customize the Group Headers
Custom Data in Group Headers New
Expand/Collapse Groups
Allow Changes New
Group using CheckBoxes New
Totals / Sub-Totals - 6
Totals
Sub-Totals in Group Footers
Sub-Totals in Group Headers New
Aggregates
Totals of Selected Records
Summary Row
Master / Detail - 35
Loading Mode - 4
Load At Once (OnLoad)
Load On Demand (OnCallback)
Load On PostBack
Load On PostBack with UpdatePanel
Populate with Data - 1
Populate from Stored Procedures
Add / Edit / Delete - 6
Add / edit / delete at runtime
Declarative add / edit / delete New
Using Stored Procedures New
Excel Style New
Using Super Form inside Window New
Handling Errors New
Self-Reference Display - 1
TreeView Hierarchy New
Settings - 3
Show Empty Details - OnLoad
Show Empty Details - OnCallback New
Detail Grid State
Miscellaneous - 4
Multiple Details on the Same Level
Unlimited Number of Levels
Multiple Foreign Keys
Display Info in Flyout New
Templates - 4
Templates for Action Buttons
Detail Grid inside Row Template
Inline Templates inside Detail Grid
Row Template inside Detail Grid New
Customizations - 12
Expand/Collapse All
Client-Side Manipulation
Get Selected Records
Expand/Collapse on Select
Expand/Collapse using Hyperlinks New
Different Styles New
Select on Expand / Collapse
Expand a single detail grid
Keep Expanded Details New
Separated Master/Detail Grids
Expand / Collapse on client side
Auto-Expanding (Fluid) Width New
Column Sets - 4
Column Sets New
Column Sets on Multiple Levels New
Scroll Column Sets Horizontally New
Column Sets with Grouping New
Exporting - 20
Export to Excel / Word
Export to PDF New
Export to CSV New
Export Large Data Sets New
Export on Server Side
Export Master/Detail Grids
Export Groups
Export Totals / Subtotals
Export Templates
Export Images
Export Title / Footer
Export Selected Records New
Export CheckBoxColumn New
Export Multiple Grids as a Single File New
Export Column Sets New
Customize Exported Files
Customize Individual Rows
Exported files Life Time
OnClientExportStart/Finish
ExportedFilesTargetWindow
Accessibility - 2
Key Navigation
Customize the Keys
Localization - 2
Localization
Custom Localization
Client-Side Events - 2
Add / Edit / Delete
Expose the Sender
Server-Side Events - 3
RowCreated/RowDataBound
ColumnsCreated
Row Title
Printing - 5
Printing the Grid
Printing All Pages
Printing All Records without Scrollbars
Printing Selected Records New
Printing Selected Columns New
Validation - 3
Using ASP.NET Validators
Validate Super Form inside Grid
Type Validation
Integration - 21
E-Mail Client
File Browser
D-n-D to Tree
Linked with TreeView
Customers
With Easy Menu
With On-Demand ComboBox New
With Master/Detail ComboBox New
Context menu and CheckBoxes
With DatePicker
With Flyout
With File Upload Progress
With Tab Strip
HTML Editor Inline
HTML Editor in Row Template
With Color Picker
With Window
Using Tooltips
Inside Window
Task List
Purchase Order
ASP.NET AJAX - 8
Live Quotes
With AJAX MaskedEditExtender
With AJAX AlwaysVisible
Millions of Records
Populate Edit Fields
View Row Details
Cascading ComboBoxes New
Cascading ComboBoxes in Row Template
State Keeping - 3
Save Column Widths
Keep Current Page
Keep Current Sort Order
Other Features - 13
ShowLoadingMessage
Hover Effects
Multiple Grids
Refresh the Records
Clear the records
Generate IDs
Client-Side Model
Find and Replace
Using ASP.NET Themes/Skins
Multi columns validation
Validate unknown columns
Inline validation
Millions of Records
Mode - 2
Callback Mode
Postback Mode
Layout Customization- 4
Heading New
Rows - 4
Reorder Rows New
Reorder Rows using Drag and Drop New
Drag and Drop Rows between Grids New
Customize Individual Rows
Knowledge Base - 1
Knowledge Base
Documentation - 25
Server-Side
Column
ColumnCollection
ColumnTemplateSettings
DetailGridLoadingMode
DetailGridState
FilterOption
FilterOptionsCollection
FilterOptionType
Grid
GridAddEditDeleteSettings
GridClientSideEvents
GridCssSettings
GridExportingSettings
GridFilterSettings
GridGroupInformation
GridGroupingSettings
GridLocalizationSettings
GridMasterDetailSettings
GridPagingSettings
GridRecordEventArgs
GridRuntimeTemplate
GridRuntimeTemplateEventArgs
GridScrollingSettings
GridTemplate
GridTemplateSettings
SortOrderType
TemplateContainer
TemplatesCollection
Client-Side
Client-Side API
ChangeLog
Tutorials - 18
Add/Edit/Delete
Updating the Database
Updating using Linq
Appearance
Styles
Styles - Advanced
CSS Tutorial
Client-Side API
Client-Side Events
Columns
Columns
Configuration
Using the correct path
Design-Time Support
All Tutorials
Choosing Data Source
Changing Appearance
Populating with Data
Data-Binding
Serialize
Maximum Performance
Selecting Records
Access Selected Records
Templates
Templates
Runtime Templates
Templates for Buttons
Miscellaneous Tutorials - 14
Getting the Generated ID
Loading the details with AJAX Page
Selecting the inserted/updated record
Server-side validation using Ajax
Edit on Click
Hide "no-records" message
Sending parameters
Disable combobox in Edit mode
Bind data after specified the filter
Get Column Index in template
Custom readonly column
Auto-scroll during postback
Delete button
Move records between grids