Click here to Skip to main content
11,922,641 members (57,260 online)
Click here to Skip to main content
Add your own
alternative version


82 bookmarked

SDXGrid V1.0.1.5 (VS 2005)

, 14 Jun 2007
Rate this:
Please Sign up or sign in to vote.
SDXGrid, is a comprehensive data grid component for Microsoft .NET 2.0 web application developers, easing the exhausting process of implementing the necessary code for sorting, navigation, grouping, searching, and real time data editing in a simple data representation object.

Screenshot - sdxGrid.JPG


SDXGrid is a comprehensive data grid component for Microsoft .NET 2.0 web application developers. It is designed to ease the exhausting process of implementing the necessary code for sorting, navigation, grouping, searching and real time data editing in a simple data representation object. By just dragging and dropping this intelligent grid control onto a web form, all of the functionality is implemented right away by SDXGrid for you. This allows time to be concentrated on other innovative software aspects. SDXGrid also comes with extensively customizable formatting options, which is a must for appealing web pages. You can customize almost every visual property of this grid control, just as you would with ordinary Visual Studio .NET 2005 controls. For more information, see my online demo.


Visual Studio 2005 is required.

  1. Copy the "sdxgrid" folder located in source ZIP file to %SystemDrive%\Inetpub\wwwroot\aspnet_client
  2. Open a Web Project.
  3. Add the SDXGridControl.dll file to the Toolbox.
  4. Drag your SDXGrid control to your page.
  5. Set the ResourcePath property in the grid control to the sdxgrid folder location that you copied into your project.

Alternatively, you can use the Demo Project instead of creating new project.

Using the code

SDXGrid is inherited from the System.Web.UI.WebControls.GridView control. So, using this control is almost the same as using the GridView control.

Group by

SDXGrid allows you to instantly group with your selected field. To activate the grouping ability for your grid, you only need to set the AllowGroupBy property to true, which is also the default.

Screenshot - GroupBy.jpg

Design mode

<cc1:sdxgrid id="SDXGrid1" runat="server" AllowGroupBy="true">


To activate paging functionality in your grid, you need to set the AllowPaging property to true, which is also the default. You must also change the PageSize property to your preference. PageSize is the number of rows from the datasource that should be displayed per page.

Screenshot - Paging.jpg

Design mode

<cc1:sdxgrid id="SDXGrid1" runat="server" AllowPaging ="true" PageSize="50">


To activate sorting functionality in your grid, you need to set the AllowSorting property to true. When the user clicks a column title, it automatically sorts in the client depending on your column type. If the column type is integer, it will do a number sorting. If it is string, it will do string sorting. Screenshot - Sorting.jpg

Design mode

<cc1:sdxgrid id="SDXGrid1" runat="server" AllowSorting ="true">


To activate searching functionality in your grid, you need to set the AllowSearch property to true. It uses the like '%keyword% pattern for searching. The keyword is referring to the user input. The user can either search for all fields or for a specific field. Screenshot - Search.jpg

Design mode

<cc1:sdxgrid id="SDXGrid1" runat="server" AllowSearch ="true"</cc1:sdxgrid>


All style objects are inherited from the TableItemStyle or TableStyle objects. Available TableItemStyle objects include:

  • SearchStyle
  • GroupByTableItemStyle
  • GroupByItemStyle
  • SelectorItemStyle
  • HeaderStyle
  • RowStyle
  • AlternatingRowStyle
  • PagerStyle
  • SelectedRowStyle

Available TableStyle bjects include:

  • GroupByTableStyle
  • NavigatorStyle
  • SearchStyle

Design mode

Check the example page for details.

Data editing

As is shown in the keyboard navigation section, you can edit a cell by either double clicking the cell or by pressing the F2 button. To delete a row after you select rows, you can click the delete button from the keyboard or the delete button from the bottom left of the grid. The add button from left bottom of the grid allows the addition of a row into the grid. Screenshot - Editing.jpg

SDXGrid does not carry GridView events, but it does have the OnUpdate event. You can catch changed datasets and see the difference. If you write a DataAdapter, you can easily update your data with this dataset.

Design mode

<cc1:sdxgrid id="SDXGrid1" runat="server" ononupdate="SDXGrid1_OnUpdate">


// SDXGrid Update Event 
protected void SDXGrid1_OnUpdate(object sender, 
    SDXGridControl.OnUpdateEventArgs e)

Row editing template (NEW!)

To activate template editing, you need to set the AllowEditTemplate property to true. After this, right click to your grid control in the designer. In the popup menu, go to Edit Template and select EmptyDataTemplate. Sorry, but I don't have time to figure out how to change this name Frown | :( Write your own design and set the control bindings. The contol's name must be #FieldName(datasource column name). You also need two buttons: one for OK and one for Cancel. Put them with the properties below. Screenshot - EditTemplate.jpg

Design mode

Check the example page for details.

Keyboard navigation

SDXGrid allows you to use the usual keyboard features.

  • Arrows: You can navigate between cells by using arrows.
  • F2: It is editing the current cell.
  • Enter: It accepts the change that you have made in the current cell.
  • Esc: It rejects the change that you have made in the current cell.
  • Delete: It deletes the selected rows.
  • Ctrl: While pressing Ctrl, you are able to select multiple rows.

Data updating

The save button on the bottom left of the grid posts back the changes to the grid control. To retrieve changes, you only need to implement the onupdate property of your grid.EventArgs object. This returns only the changes to the dataset, not the whole dataset. Then you can play with that data.

NOTE: Almost all System.Web.UI.WebControls.GridView properties are supported by SDXGrid. After you set the SDXGrid datasource with your datasource object, you have to select your DataFields and set their properties. SDXGrid takes field types from their DataTable object types. You should also set the page size and page index for page navigation. There is no need to set up anything for sorting and grouping.


  • 5 May, 2006 -- Original version posted
  • 14 June, 2007 -- Updated


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Serkant Samurkas
Web Developer
United Kingdom United Kingdom
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMessage Automatically Removed Pin
8-Jul-14 4:26
professionalJohar Saifuddin Mandav Wala8-Jul-14 4:26 
BugHow to I Ungroup a grouped Header Pin
Rajesh Rajamani13-Jul-12 3:49
memberRajesh Rajamani13-Jul-12 3:49 
Questionhow to show footer? Pin
yf20095-Sep-10 23:28
memberyf20095-Sep-10 23:28 
GeneralAllowGroupBy fix in the Code Pin
Schmidt Frank25-Nov-09 5:12
memberSchmidt Frank25-Nov-09 5:12 
QuestionPlease Visual Basic .net Version ????? Pin
Xess6-Sep-08 1:41
memberXess6-Sep-08 1:41 
GeneralSet DataSource Programetically Pin
rabbani01314-May-08 2:53
memberrabbani01314-May-08 2:53 
GeneralRe: Set DataSource Programetically Pin
A7med Shawky14-May-08 23:58
memberA7med Shawky14-May-08 23:58 
GeneralOnUpdate Event doesn't fire Pin
A7med Shawky12-May-08 3:41
memberA7med Shawky12-May-08 3:41 
QuestionFocus Selection Pin
gcamps23-Apr-08 6:11
membergcamps23-Apr-08 6:11 
QuestionWhere is Design View of SDX Grid Control Pin
bhushan lolge7-Apr-08 21:00
memberbhushan lolge7-Apr-08 21:00 
QuestionNo source code ? Pin
jyjohnson11-Jan-08 6:50
memberjyjohnson11-Jan-08 6:50 
GeneralRe: No source code ? Pin
Serkant Samurkas18-Feb-08 15:15
memberSerkant Samurkas18-Feb-08 15:15 
GeneralBind SDXgrid manualy to Dataview [modified] Pin
Carsten Giesen7-Jan-08 3:24
memberCarsten Giesen7-Jan-08 3:24 
GeneralRe: Bind SDXgrid manualy to Dataview Pin
Serkant Samurkas18-Feb-08 15:17
memberSerkant Samurkas18-Feb-08 15:17 
Hiya Carsten,

I am sorry to say that "Me.SDXGrid1.AutoGenerateColumns = True" does not work on SDXGrid. You need to define columns.
GeneralOnUpdate event doesn't work Pin
WJ Wolfert14-Dec-07 6:06
memberWJ Wolfert14-Dec-07 6:06 
GeneralRe: OnUpdate event doesn't work Pin
Serkant Samurkas18-Feb-08 15:21
memberSerkant Samurkas18-Feb-08 15:21 
QuestionAjax.NET 1.0 compatible? Pin
negerns25-Jul-07 23:35
membernegerns25-Jul-07 23:35 
AnswerRe: Ajax.NET 1.0 compatible? Pin
Serkant Samurkas18-Feb-08 15:19
memberSerkant Samurkas18-Feb-08 15:19 
GeneralJavascript errors Pin
falcon220-Dec-06 4:12
memberfalcon220-Dec-06 4:12 
GeneralRe: Javascript errors Pin
Serkant Samurkas14-Jun-07 13:12
memberSerkant Samurkas14-Jun-07 13:12 
GeneralNot work Pin
Edilberto Arteaga Lopez14-Nov-06 5:50
memberEdilberto Arteaga Lopez14-Nov-06 5:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.151125.1 | Last Updated 14 Jun 2007
Article Copyright 2006 by Serkant Samurkas
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid