Click here to Skip to main content
Click here to Skip to main content

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

Introduction

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.

Installation

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">
</cc1:sdxgrid>

Paging

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">
</cc1:sdxgrid>

Sorting

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">
</cc1:sdxgrid>

Search

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>

Style

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">
</cc1:sdxgrid>

CodeBehind

// SDXGrid Update Event 
protected void SDXGrid1_OnUpdate(object sender, 
    SDXGridControl.OnUpdateEventArgs e)
{
    MyDataAdapter.Update(e.Dataset);
}

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.

History

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

License

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

Comments and Discussions

 
GeneralContact Me PinprofessionalJohar Saifuddin Mandav Wala8-Jul-14 3:26 
BugHow to I Ungroup a grouped Header PinmemberRajesh Rajamani13-Jul-12 2:49 
Questionhow to show footer? Pinmemberyf20095-Sep-10 22:28 
GeneralAllowGroupBy fix in the Code PinmemberSchmidt Frank25-Nov-09 4:12 
QuestionPlease Visual Basic .net Version ????? PinmemberXess6-Sep-08 0:41 
GeneralSet DataSource Programetically Pinmemberrabbani01314-May-08 1:53 
GeneralRe: Set DataSource Programetically PinmemberA7med Shawky14-May-08 22:58 
GeneralOnUpdate Event doesn't fire PinmemberA7med Shawky12-May-08 2:41 
QuestionFocus Selection Pinmembergcamps23-Apr-08 5:11 
QuestionWhere is Design View of SDX Grid Control Pinmemberbhushan lolge7-Apr-08 20:00 
QuestionNo source code ? Pinmemberjyjohnson11-Jan-08 5:50 
GeneralRe: No source code ? PinmemberSerkant Samurkas18-Feb-08 14:15 
GeneralBind SDXgrid manualy to Dataview [modified] PinmemberCarsten Giesen7-Jan-08 2:24 
GeneralRe: Bind SDXgrid manualy to Dataview PinmemberSerkant Samurkas18-Feb-08 14:17 
GeneralOnUpdate event doesn't work PinmemberWJ Wolfert14-Dec-07 5:06 
GeneralRe: OnUpdate event doesn't work PinmemberSerkant Samurkas18-Feb-08 14:21 
QuestionAjax.NET 1.0 compatible? Pinmembernegerns25-Jul-07 22:35 
AnswerRe: Ajax.NET 1.0 compatible? PinmemberSerkant Samurkas18-Feb-08 14:19 
GeneralJavascript errors Pinmemberfalcon220-Dec-06 3:12 
GeneralRe: Javascript errors PinmemberSerkant Samurkas14-Jun-07 12:12 
Sorry for the late reply. This version is working fine.
GeneralNot work PinmemberEdilberto Arteaga Lopez14-Nov-06 4:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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 | Mobile
Web03 | 2.8.140709.1 | Last Updated 14 Jun 2007
Article Copyright 2006 by Serkant Samurkas
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid