Replace .NET DataGrid with Telerik RadGrid

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.

You can find several demos on how to create grids and work with the features.

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.