Lets first talk about the Grid. Many developers face problem while implementing the GridView in the ASP.Net technology. Either the implementation of the design is too cumbersome or the display of the data as required is difficult. Hence, we replace GridView with RadGrid. Here, we have replaced the GridView of “Inbox” from our event networking application. Initially, the grid view look like the following:

A few controls needed to support the RadGrid are

1. RadAjaxManager

Here, we define the event where the loading symbol need to be popped as a modal window. For example, when you refresh your inbox. We need to define only one LoadingPanel which can be reused every-time we need one.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="ReceivedMessagesGrid" LoadingPanelID="LoadingPanel"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="ReceivedMessagesGrid">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="ReceivedMessagesGrid" LoadingPanelID="LoadingPanel"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>

2. RadAjaxPanel

The rest of the rad controls are placed within the RadAjaxPanel which acts very similar to the Ajax Panel. Here, we have RadWindowManager, RadAjaxLoadingPanel, RadCodeBlock and RadGrid,

2.1 RadWindowsManager

RadWindow is used like a popup on the screen and the complete message is displayed in this window. We can either set the screen to be modal or not. This is called a child window the page which calls it is called a parent window. This windows will be called from the RadCodeBlock once the message row is selected/clicked.

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
<Windows>
<telerik:RadWindow ID="DisplayRead" runat="server" Title="Read and Reply"
Left="150px" ReloadOnShow="true" ShowContentDuringLoad="true" AutoSize="true"
Modal="true">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>

2.2 RadAjaxLoadingPanel

This is where we define the loading panel which is explained in the RadAjaxManager.

<telerik:RadAjaxLoadingPanel ID="LoadingPanel" Skin="Windows7" runat="server"></telerik:RadAjaxLoadingPanel>

2.3 RadCodeBlock

RadCodeBlock helps define javascript which can be called from within a RadWindow or the parent window. It defines the functions with various parameters. Here we have DisplayReadReply function which opens the RadWindow with a different page defined as “ViewMessage.aspx” and a few parameters being sent through URL. The refreshGrid function is used to refresh the binding of grid so that the data gets updated.

<telerik:RadCodeBlock ID="CodeBlock" runat="server">
<script type="text/javascript">
//not used here...to be used by hyperlink
function DisplayReadReply(id, rowIndex) {
var grid = $find("<%=ReceivedMessagesGrid.ClientID%>");

var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
grid.get_masterTableView().selectItem(rowControl, true);

window.radopen("ViewMessage.aspx?RequestID=" + id, "DisplayRead");
return false;
}

function refreshGrid(arg) {
if (!arg) {
$find("<%=RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");
}
else {
$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("RebindAndNavigate");
}
}

function RowDblClick(sender, eventArgs) {
window.radopen("ViewMessage.aspx?RequestID=" + eventArgs.getDataKeyValue("ContactRequestID"), "DisplayRead");
}
</script>
</telerik:RadCodeBlock>

2.4 RadGrid

This is the actual control which is going to enhance your experience.

<telerik:RadGrid ID="ReceivedMessagesGrid" runat="server" CellSpacing="0" AutoGenerateColumns="false"
GridLines="None" AllowPaging="True" AllowSorting="True" PageSize="15" AllowMultiRowSelection="True" Skin="Windows7"
ShowGroupPanel="True" AllowFilteringByColumn="True" ViewStateMode="Enabled"
OnItemCommand="ReceivedMessagesGrid_ItemCommand" DataMember="Member">

<ClientSettings AllowDragToGroup="True" AllowColumnsReorder="True" ReorderColumnsOnClient="True">
<Selecting AllowRowSelect="True"></Selecting>
<ClientEvents OnRowClick="RowDblClick" />
</ClientSettings>

<PagerStyle Mode="NextPrevAndNumeric" />

<MasterTableView DataKeyNames="ContactRequestID" ClientDataKeyNames="ContactRequestID" DataMember="Member"
AllowMultiColumnSorting="true">
<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>
<ExpandCollapseColumn Visible="True" Created="True" FilterControlAltText="Filter ExpandColumn column" />
<GroupByExpressions>
<telerik:GridGroupByExpression>
<SelectFields>
<telerik:GridGroupByField FieldAlias="MessageStatus" FieldName="MessageStatus1.MessageStatusText"
HeaderValueSeparator=" : " />
</SelectFields>
<GroupByFields>
<telerik:GridGroupByField SortOrder="Descending" FieldName="MessageStatus1.MessageStatusText"
HeaderText="Header for Group" />
</GroupByFields>
</telerik:GridGroupByExpression>
</GroupByExpressions>
<Columns>
<telerik:GridTemplateColumn UniqueName="Sender" DataField="UserProfile.Username" Groupable="false"
HeaderText="From/ Subject" HeaderStyle-Width="300px" SortExpression="ContactRequestID">
<ItemTemplate>
<br />
<asp:Label CssClass="MailSubject" ID="abstractLabel" runat="server" Text='<%# String2Extract(String.Format("{0}{1}{2}",Eval("Message1"),"|",Eval("MessageType")))%>'></asp:Label>;
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn HeaderStyle-Width="100px" UniqueName="Type" HeaderText="Type" DataField="MessageType1.MessageTypeDesc" SortExpression="MessageType"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderStyle-Width="100px" UniqueName="Status" HeaderText="Status" DataField="MessageStatus1.MessageStatusText" SortExpression="MessageStatus"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderStyle-Width="80px" ItemStyle-Width="60px" UniqueName="SentOn" HeaderText="Sent On" DataField="SentDate" SortExpression="SentDate" />
</Columns>
</MasterTableView>
</telerik:RadGrid>

Under RadGrid we have further defined the following:

2.4.1 ClientSettings

This defines all the client side events, if any. Here, we have defined OnRowClick event which is fired at the client side when we click any of the RadGrid row. This fires the function defined in the RadCodeBlock.

2.4.2 PagerStyle

This gives us an option for the type of paging. Types available are:

1. Advanced
2. NextPrev
3. NextPrevAndNumeric
4. NextPrevNumericAndAdvanced
5. NumericPages
6. Sliders

2.4.3 MasterTableView

This is where we define all the columns, their appearance and their sorting as well as grouping expressions. Few of the column types we have used are GridTemplateColumn and GridBoundColumn.
GridBoundColumn can directly be bound by specifying the column name of the table in the data field property.

Whereas, to implement a complex query, we use GridTemplateColumn. As the name suggests, we create a template and define our own values. Under grid template we have item template where we can have other ASP.Net controls like Label, Hyperlink, etc. We can even call a function from within a property like

Text='<%# String2Extract(String.Format("{0}{1}{2}",Eval("Message1"),"|",Eval("MessageType")))%>'

This String2Extract function is defined in the code behind. . The code above also explains how to call a function from code behind into a control and using some parameters.

3. Page_Load()

Prior to writing the page load event we include the Eventnetworking.Data and Telerik.Web.UI references in our code behind and then create a context NetworkingDataContext ndx = new NetworkingDataContext();

In the page load event we create a context for Sent messages, and then we bind the data with our RadGrid.

var InboxMessageDX = from im in ndx.Messages
where im.ReceiverUserId == Convert.ToInt32(UserIDValue.Value) && im.MessageStatus <= 4 && im.UserProfile1.Active== true
orderby im.SentDate descending
select im;

ReceivedMessagesGrid.DataSource = InboxMessageDX;
ReceivedMessagesGrid.DataBind();

4. String2Extract(string str)

This function is used to display the first 100 characters of the message as the subject in the list of the inbox.

protected string String2Extract(string str)
{
if (str != null)
{
string[] strArray = str.Split('|');
if (Convert.ToInt16(strArray[1]) == 1)
if (str.Length > 100)
return strArray[0].Substring(0, 100);   //.TrimEnd(';');
else
return strArray[0];
else return "";
}
else
return "";
}

5. Ajax Request

This event is fired each time the page is ajax-ified.
If there is an AjaxRequest calling either “Rebind” or “RebindAndNavigate”.

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
if (e.Argument == "Rebind")
{
ReceivedMessagesGrid.MasterTableView.SortExpressions.Clear();
ReceivedMessagesGrid.MasterTableView.GroupByExpressions.Clear();
ReceivedMessagesGrid.Rebind();
}
else if (e.Argument == "RebindAndNavigate")
{
ReceivedMessagesGrid.MasterTableView.SortExpressions.Clear();
ReceivedMessagesGrid.MasterTableView.GroupByExpressions.Clear();
ReceivedMessagesGrid.MasterTableView.CurrentPageIndex = ReceivedMessagesGrid.MasterTableView.PageCount - 1;
ReceivedMessagesGrid.Rebind();
}
}

After all we are done with all the changes, the new page looks like the following:

And once you click any of the message a child window open which displays the message and you have the option to respond to the message depending on the message type.

Read- Revamping Web Application Part-10 : Implementing RadScheduler