ASP.NET Grid - Knowledge Base


Appearance

Populating with Data

Add/Edit/Delete

Record Selection

Columns

Paging

Sorting

Filtering

Templates

Scrolling

Grouping

Totals / Sub-Totals

Master / Detail

Exporting

Accessibility

Localization

Client-Side Events

Server-Side Events

Printing

Validation

Integration

ASP.NET AJAX

Other Features

Layout Customization

Rows







Appearance

    Back color for rows and selection

    Change mouse cursor over rows

    Remove margin for header cells

    Change style of CheckBoxSelectColumn and CheckBoxColumn

    Change style of page size selector

    Global FolderStyle

    Set FolderStyle on the client-side

    Create your own style for the Grid

    Change the style of the Grid

    Grid without style

    Left align filter text boxes / drop down lists

    Change row background color based on column value

    Appearance - Customize the BackColor of the rows inside the OnRowDataBound event handler

    Appearance - Change/Remove the "There are no records available." text

    Replace the navigation images with texts

    Set grid width

    Use icons instead of Edit / Delete links

    Customize the arrow images used for sorting

    Configure cell properties

    Remove padding for the grid's cells

    Change cell alignment

    Support for Themes/Skins





Populating with Data

    Refresh a Grid when another Grid is updated

    DataSourceNeeded for multiple grids on the same page

    Populate from MySql

    Populate detail grid from stored procedure

    Prevent grid from loading on page load

    Populate from MySql database

    Data from nested objects

    Populate on button click

    Populate from multiple tables

    Column from domain model not populated

    Add rows programmatically

    Improve performance

    Display values from related table using foreign keys

    Handle paging, sorting, filtering etc. when serialization is disabled





Add/Edit/Delete

    Clear a ComboBox from the Grid after adding a new row

    Put the grid in add mode on page load

    Enable/Disable edit for excel-style

    Custom read-only column

    Read only cells for excel style editing

    Detect duplicate records

    Redirect on add / edit

    Default mode - add mode

    Detect successful insert / update / delete

    Adding records when footer is not visible

    Show/hide "Edit" and/or "Delete" buttons

    Display the line for adding new records automatically when the page is loaded

    Use today's date as a default for a column when adding new rows

    Delete all records from client-side

    Update page elements during a Grid callback

    Insert / update / delete using ObjectDataSource

    Set focus to a particular column on edit mode

    Enable / Disable type validation

    Display a "Success" or "Failure" message

    Parameters for the OnClientCallbackError event handler

    Capture server-side exceptions and display error messages

    Reusing data when adding records one after another

    Disable "Add New" while deleting a record

    Enter "Add" mode after populating the grid

    Prevent specific rows from being edited/deleted

    Default values for add mode, taken from group headers

    Fields readonly for edit mode and editable for add mode

    Add records one after the other

    Use the Insert/Update/Delete methods of the DataSourceControl

    Multiple calls for the event handlers of the InsertCommand/UpdateCommand events

    Validate the data provided by the users on add/edit





Record Selection

    Single selection with CheckBoxSelectColumn

    Controls in template cannot be focused

    Select when clicking on "Edit"

    Disable page size selection on the client-side

    Select the first record on page load

    Open URL on row click

    Deselect all records from client side

    Disable row selection

    Inside ASP.NET AJAX UpdatePanel with AutoPostBackOnSelect="true"

    Deselect the selected records from all the pages on the client side

    Hide selected records from client side

    Record Selection - Load an image from the selected record

    Fire an event when deselecting a record

    Disable record selection when clicking on hyperlinks

    Get the selected index





Columns

    Hide column but access it programmatically

    Disable reordering for some of the columns

    Column reorder event

    Change the width of a column / grid from JavaScript

    Resize column from JavaScript

    Render formatted HTML in column

    Detect column resizing

    Lock column from reordering

    Add tooltips to headers

    Hide column resizing tool tip

    Deselect event for CheckBoxSelectColumn

    Fix initializing error - this.ColumnsWidthContainer is null

    Wrap long text without spaces

    Use CheckBoxColumn or CheckBoxSelectColumn in empty grid

    Add Edit/Delete column at runtime

    Resize columns for styles with no column separators

    Two columns with the same DataField

    Enable / Disable checkboxes based on other columns

    Get column names on client-side

    Inside a fixed width container

    Unsort a column

    Get cell value by header text

    Remove hyperlinks in RowDataBound event handler

    Get cell value by column name

    SortExpression property for Column

    HTML tags in edit fields

    No header text

    Text on multiple lines

    Specify the order in which the columns are being sorted

    Make the contents of the columns an html link

    Change the header text of a column at runtime

    Passwords inside Grid

    Sort on a hidden column

    Disable sorting on just one column

    Retrieve row values by DataField

    Get column heading in JavaScript

    Get cell data on the client-side using the field name

    Edit unbound columns

    DataField property of the Column is case sensitive

    Using relative widths (percentages) for the Grid

    DataFormatString for different currencies

    Hide columns with no values

    Hide/Show columns by name





Paging

    Change page size on client-side

    Load a specific page

    Disable paging on the client-side

    Paging - Get the number of pages on client side

    Paging and populating with data





Sorting

    Hide sorting arrows for columns that cannot be sorted

    Clear sorting

    Sort column on client-side

    Default cursor for headers disabled for sorting

    Disable sorting on the client-side

    Sorting groups





Filtering

    Get the values from the filter fields on the server-side

    Trim white spaces from filters

    Global filter options

    Handle filtering at runtime

    Remove filter without hiding it

    Disable filtering on the client-side

    Default filter for auto generated columns

    Customize "Apply Filter | Hide Filter | Remove Filter"

    Filtering with default filter

    Apply multiple filters to the same column

    Show the Grid with opened filter without pressing "Show Filter"

    Filtering - Default filter option when ShowFilterCriterias is disabled

    Show filters on page load

    Filter date/time values

    Combining the "Is Null" and "Is Empty" filter options





Templates

    Conditional image template

    Clear multiselect ListBox on add

    Additional parameters for RuntimeTemplate CreateTemplate event

    Workflow for insert/update using row template

    Link columns to Super Form in row edit template

    Row template doesn't expand in Internet Explorer

    Delete link / button in row template

    Hyperlink in row edit template

    Cascading DropDownLists / ComboBoxes inside Grid templates

    Edit and add new template don't open in full hight

    Refresh DropDownList after update

    DropDownList in add mode and readonly in edit mode

    HyperLink with dynamic URL

    Display images from database

    Calculated columns

    Use the "Use Quotes" property of the GridTemplate class

    Access the controls from a GridTemplate in the OnRowDataBound event handler

    Access the controls from a GridTemplate in the Page_Load method

    Use both GridTemplates and GridRuntimeTemplates for the same grid

    Format data inside templates

    Use a checkbox for editing if you have 1/0 values in the database

    Passing row index to JS function

    Send e-mail from Grid

    Hidden fields in RowEditTemplate

    Access column index in header template

    Reuse edit templates for multiple columns

    Removing time part from datetime values using templates

    Templates - Set "SelectedValue" for DropDownList in edit mode

    Wrap the headers

    Templates - Hide "Update | Cancel" links when editing using row templates

    Templates - Get client ID of controls placed inside edit templates

    Handle server events raised by buttons placed inside GridTemplates

    Use templates with auto generated columns

    Use Container.DataItem in GridTemplate

    Handle events raised by links/buttons from GridTemplates

    Set the DataSource for a DropDownList / Combobox placed inside the Grid

    Calculate the value of a column based on the values of other columns

    Use a drop down list inside the filter

    Access textbox used for edit on the client-side

    Check/uncheck checkboxes from a 'view mode' template

    Configure the properties for the controls placed inside templates for view mode

    Binding controls placed inside edit templates

    Additional data for the links placed inside templates





Scrolling

    Scrollbar position

    Right-align last column with scrolling

    Change ScrollWidth from client-side

    Scroll to top of the page

    Move vertical scrollbar back to the top

    "No records" message and horizontal scrolling

    Scroll to top when changing the page

    Enable / Disable scrolling

    Center the grid on the page

    Move horizontal scrollbar back to the left side

    Add scrollbars

    Customize the scrollbars





Grouping

    Grouping lost when rebinding the Grid

    Customize multi-page group headers

    HideColumnsWhenGrouping on client-side

    Error when grouping

    Disable group collapsing

    Disable collapse/expand for groups

    Initial grouping by multiple columns

    Hide group header on top of the grid

    Remove column names from group headers

     Extracting data from the group headers

    Double group headers

    Multiple grouping conditions in the GroupBy property

    Attach an 'onclick' event handler to the group headers





Totals / Sub-Totals

    Manipulate totals on the client-side

    Totals are doubled

    Total number of records

    Group value in sub-totals

    Change font in column totals

    Remove template controls from Column-Footer





Master / Detail

    Refresh master when updating detail

    Detect expand / collapse for detail grids

    Numbering records in master / detail grids

    Master / Detail via a third table

    Refresh master grid when updating detail grid

    Record total in Master-detail grid

    Master / Detail - Configure edit templates for Detail Grid

    Incorrect syntax near '?'

    Master/Detail - Linking tables using primary keys that don't have the same name

    Using edit templates in DetailGrids

    Expand/Collapse details grid using template button

    Using templates in DetailGrids

    Set parameters for the SqlDataSource control that populates detail grids

    Master/Detail - Insert record in detail grid

    Show empty detail grids when using the OnCallback pattern

    Populate master/detail grids from ObjectDataSource controls

    Populate master/detail grids from DataSets





Exporting

    Warning message when exporting

    Change headers when exporting

    Export to Excel with line breaks

    Export hyperlink text

    Export non-english characters (chinese, hebrew, greek, arabic)

    Nothing happens when exporting

    Export long numbers

    Export with leading space

    Save the exported files to the disk

    Security permissions for exporting

    Prerequisites for exporting

    Export triggers postback

    Export all the columns of the grid

    Export the data from the grid including the templates





Accessibility

    Key Navigation - Disable editing using the keyboard

    Select records using the keyboard

    Keyboard shortcuts for the "Delete" or "Save All" actions





Localization

    Change loading message

    Change default error message

    Localize headers

    Rename Edit/Delete links





Client-Side Events

    Stop the execution of the client-side event handlers if there is an error during the insert/update/delete

    Detect empty grid on client side

    Get auto generated (IDENTITY) value after insert

    Update control in template after insert / update / delete

    Refresh two grids when one is updated

    Reuse OnClientCallbackError handler for multiple grids

    Edit row from an external control

    Set cell data on client-side

    Get row data in the OnClientDblClick handler

    Dynamic field names for client side events

    Redirect on double-click

    Line break in OnClientCallbackError handler

    Client-Side Events - Capturing the mouse over event

    Client-Side Events - Use OnClientSelect and OnClientDblClick

    Customize grid data on client side

    Using the ExposeSender property

    Get record values when double-clicking a row

    Detect add mode





Server-Side Events

    Access cell data in the RowDataBound event handler

    OboutGridFilterCriteria on the server-side

    "refresh" with parameters

    Get the data from a given cell on the server-side

    Access grid data from server side





Printing

    Hide column when printing

    Hide elements when printing

    Print multiple grids

    Print when AjaxPage is used

    Print groups on separate pages

    Print grid with scrollbars

    Print all the pages of the grid





Validation

    Disable type validation for a column





Integration

    Easy Menu over Grid

    Attach Flyout to the entire Grid

    Menu controls above the grid

    Load obout_Interface assembly

    Integrate 3rd party controls inside the Grid

    Use the Combobox inside the Grid

    Download files using the File Browser example

    Integrate Grid with Flyout - no background for the flyout





ASP.NET AJAX

    Grid inside ModalPopupExtender

    Column sets inside UpdatePanel

    UpdatePanel inside Grid templates

    Solve error: "There was an error initializing the Grid with the ID 'oboutGrid'"

    Change styles when Grid is inside an AJAX UpdatePanel





Other Features

    GenerateRecordIds - All rows have the same ID

    Disable the Grid

    Handle expired sessions

    Clear data

    Grid inside hidden div

    Refresh data without reloading the page

    Use the Grid in a Medium Trust Level environment

    Add ellipsis ('...') to the cells containing long texts

    Keep page size on post back

    Recommended DOCTYPE

    Errors with some regional settings in Windows

    Multiple grids from user control on the same page

    Refresh the Grid every X seconds

    Problems referencing the JavaScript files / Missing JavaScript files





Layout Customization

    How to align filter links to left

    Customize "no records" message

    Hide first / last paging buttons

    Display only records total in footer

    Height of empty grid

    Load last page

    Detect page size change

    Change mouse cursor for headers

    Hide the "Records 1 to 10 of xxx - Pages:" text within the footer of the control

    Display records info and paging buttons on the left side of the Grid

    Adjust the width of the footer row's columns

    Hide cell separators

    Change cells background

    Cells height

    Change row background color

    Left align header text and data





Rows

    Disable Edit or Delete for specific rows

    Row locking

    Retrieve cell value on client click



"First, let me tell you how impressed I am with your components. Nice stuff, and well documented! "

Coral Amende

Random testimonial   All testimonials

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