OBOUT - ASP.NET Grid - Knowledge Base

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

    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

    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

    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

    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

    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

"I love new functions you guys are adding. Thanks for a great product!"

Adam Walankiewicz

Aerodirect Inc.

Random testimonial All testimonials

obout.com

Grid Home

Examples - 313

Appearance - 2

Populating with data - 16

Add/Edit/Delete - 26

Record Selection - 13

Columns - 22

Paging - 7

Sorting - 4

Filtering - 25

Templates - 31

Scrolling - 16

Grouping - 14

Totals / Sub-Totals - 6

Master / Detail - 35

Column Sets - 4

Exporting - 20

Accessibility - 2

Localization - 2

Client-Side Events - 2

Server-Side Events - 3

Printing - 5

Validation - 3

Integration - 21

ASP.NET AJAX - 8

State Keeping - 3

Other Features - 13

Mode - 2

Layout Customization- 4

Rows - 4

Knowledge Base - 1

Documentation - 25

Tutorials - 18

Miscellaneous Tutorials - 14