Project Description

SDXDataGrid is a comprehensive data grid component for Microsoft .NET 3.5 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 SDXDataGrid for you. This allows time to be concentrated on other innovative software aspects. SDXDataGrid 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 controls. For more information, see my Online Demo.

Using the code

SDXDataGrid 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

SDXDataGrid 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.

Group By

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.


Paging

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.


Search

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.
SDXDataGrid 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.

Editing

Design mode

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

// SDXDataGrid 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 :(. 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.
Design mode

Check the example page for details.

Keyboard navigation

SDXDataGrid 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 SDXDataGrid. After you set the SDXDataGrid datasource with your datasource object, you have to select your DataFields and set their properties. SDXDataGrid 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.

Last edited Mar 4, 2012 at 11:25 AM by Serkant_Samurkas, version 18