Replace .NET DataGrid with Telerik RadGrid

Jun 25, 2012
Carlos Araujo

Telerik RadGrid is a commercial alternative to the native .NET DataGrids.  It helps developers create grids easily, improve performance with fast loading of large data sets using asynchronous loading AJAX.  The rich client side operations and features make this Telerik framework a must-have tool for any serious .NET development project.

The built in sorting, filtering, selecting, exporting, Insert/Update/Delete features are very easy to use. The developer won’t need to do very much to make those features work.

The following small table shows main features of telerik radgrid.

 

Telerik RadGrid

Performance

Telerik ASP.NET Grid provides swift behavior of all key capabilities such as paging, grouping, sorting, and filtering. You can also tune RadGrid performance by controlling the balance between client-side load and speed.

Databinding

Telerik Grid for ASP.NET MVC has an optimized databinding logic designed to support various data and to handle large datasets. 

Paging

The ASP.NET MVC Grid provides integrated paging functionality - it lets users view large sets of data in small chunks, this means faster loading and easier navigation.

Custom features

If the developer needs to customize any of the features, it is possible with telerik radgrid. For example you can customize paging and create the custom desired functionality for it.

Custom Formatting

Telerik Grid gives complete freedom over the data layout and formatting of columns to match your design scenarios.

 

You can find several demos on how to create grids and work with the features at http://demos.telerik.com/aspnet-ajax/grid/

Now I will like to talk about editing with RadGrid, more specifically editing in a popup window, yes, RadGrid lets you do that.

Background: I have a data grid in a page, the grid has filters and the grid covers almost the entire page.

Issue: This grid has an edit button so the user is able to edit the fields, not all the fields that I am willing to edit are displayed in the grid and the edit button lets me display a form where the user is able to edit all the fields that I need. There is no space in the grid or the page for the edition form fields. I have dropdowns, text fields, checkbox fields and not enough space to display them.

Solution: After searching for options on how to display the edition form I run into a popup overlay functionality that covers the screen with a square displaying all the fields that I need for edition. This overlay is linked to the grid and to the record in the grid. I just need to code the edit-save functionality and that would be it.

 

 

The code to accomplish the above is the following.

In the .ascx inside the  </telerik:RadGrid> tags  use

<ClientSettings>

<Scrolling AllowScroll="True" ScrollHeight=""></Scrolling>

<ClientEvents OnPopUpShowing="PopUpShowing" />

</ClientSettings>

Also inside the MasterTableView tags set the

 
<EditFormSettings PopUpSettings-Height="660px" PopUpSettings-Width="700px">

<PopUpSettings Height="660px" Width="700px"></PopUpSettings>

</EditFormSettings>

Here you also set the width and height of the popup.

In the <telerik:RadGrid tag you also need to set the function that will handle the edit functionality.

<telerik:RadGrid CssClass="user-results" ID="RadGrid1" Width="97%" AllowSorting="True" AutoGenerateColumns="False" PageSize="15" AllowPaging="True" PagerStyle-AlwaysVisible="true"             AllowMultiRowSelection="True" runat="server" GridLines="None" OnDeleteCommand="RadGrid1_DeleteCommand"            OnNeedDataSource="RadGrid1_NeedDataSource" OnUpdateCommand="RadGrid1_UpdateCommand">

 

Telerik framework will call the function set in the tag when the Update event is fired. In the .ascx.cs file code the function accordingly to what you need.