Edit this page

Server Binding

The following code snippet demonstrates how RadGrid can be integrated with the ASP.NET AJAX framework. The example features the following components:

  • RadGrid - displays the stock quote data.

  • ASP.NET AJAX UpdatePanel -- wraps the grid control and performs the Ajax requests.

  • ASP.NET AJAX UpdateProgress -- responsible for the visual indication on the client-side of an ongoing Ajax request.

  • ASP.NET AJAX Timer -- triggers the Ajax requests for data refresh on a regular interval.

The grid is bound via an ObjectDataSource control that returns a dataset with the respective quote data. The ObjectDataSource implementation internally uses WebService calls to handle the data retrieval. When the WebService is called for the first time it establishes a connection to a website (finance.yahoo.com) and gets some real-world data that will be used as a starting point for the sample application. The quote data is then persisted locally in an xml file for later use and a resultant dataset is generated from the same xml file. For consequent calls to the WebService (essentially triggered by the timer component on the client-side) no data is downloaded from the Internet but the data from the xml is modified locally to simulate stock quote rate changes; then it is persisted again in the same xml file and a resultant dataset is returned to the ObjectDataSource instance.

The example can be easily extended to use real data by supplying a different DataSet in the StockQuoteService.GetStockQuotes(...) WebService method.

Update with Web Service

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
function endRequest(sender, e) {
  if (e.get_error()) {
    debug.trace("[" + new Date().toLocaleTimeString() + "] An error occurred while processing the request on the server. Please try again later.");
    e.set_errorHandled(true);
  }
}
Sys.Application.notifyScriptLoaded();
<?xml version="1.0" encoding="utf-8" ?>
<quotes>  
    <quote stockTicker="MSFT" lastTrade="29.0294" change="-0.4596" lastUpdated="12/20/2006 17:07:52" dailyMaxRange="30.24" dailyMinRange="29.0294" />  
    <quote stockTicker="YHOO" lastTrade="26.2045" change="0.3" lastUpdated="12/20/2006 17:07:52" dailyMaxRange="26.31" dailyMinRange="25.3645" />  
    <quote stockTicker="GOOG" lastTrade="467.5230" change="0.5" lastUpdated="12/20/2006 17:07:52" dailyMaxRange="471.50" dailyMinRange="467.0230" />  
    <quote stockTicker="HPQ" lastTrade="40.3625" change="-0.5550" lastUpdated="12/20/2006 17:07:52" dailyMaxRange="41.742" dailyMinRange="40.35" />  
    <quote stockTicker="DELL" lastTrade="25.8672" change="-0.4" lastUpdated="12/20/2006 17:07:52" dailyMaxRange="26.3650" dailyMinRange="25.4050" />  
    <quote stockTicker="AAPL" lastTrade="87.6258" change="-0.3790" lastUpdated="12/20/2006 17:07:52" dailyMaxRange="88.7048" dailyMinRange="85.76" />  
    <quote stockTicker="NOVL" lastTrade="3.5758" change="-0.166" lastUpdated="12/20/2006 17:07:52" dailyMaxRange="6.14" dailyMinRange="3.5758" />
</quotes>
<asp:ScriptManager ID="ScriptManager1" runat="server">
  <Scripts>
    <asp:ScriptReference Path="~/Scripts/TraceUtils.js" />
  </Scripts>
</asp:ScriptManager>
<div style="height: 20px">
  <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"
    DisplayAfter="0">
    <ProgressTemplate>
      <img src="Images/LoadingRed.gif" height="16" width="44" alt="Loading..." class="LoadingImage" />
    </ProgressTemplate>
  </asp:UpdateProgress>
</div>
<div style="height: auto;">
  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
      <asp:Timer ID="Timer1" runat="server" Interval="3000" OnTick="Timer1_Tick">
      </asp:Timer>
      <div class="quotes">
        Important: Quote values are generated for the puprose of the example only!</div>
      <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" Width="718px" Skin="Web20" AutoGenerateColumns="False"
        DataSourceID="ObjectDataSource1" HorizontalAlign="NotSet" GridLines="none" OnItemDataBound="RadGrid1_ItemDataBound">
        <MasterTableView DataSourceID="ObjectDataSource1">
          <Columns>
            <telerik:GridHyperLinkColumn DataTextField="StockTicker" DataNavigateUrlFields="StockTicker"
              UniqueName="StockTicker" HeaderText="Stock Ticker" DataNavigateUrlFormatString="http://ddue.schemas.microsoft.com/authoring/2003/5" />
            <telerik:GridBoundColumn DataField="LastTrade" UniqueName="LastTrade" HeaderText="Last Trade" />
            <telerik:GridTemplateColumn UniqueName="Change" HeaderText="Change">
              <ItemTemplate>
                <asp:Image ID="DirectionImage" runat="server" />&nbsp;
                <asp:Label ID="ChangeLabel" runat="server" Style="font-weight: bold;" Text='<%# Eval("Change") %>' />
              </ItemTemplate>
              <ItemStyle Width="150px" />
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn UniqueName="DailyRange" HeaderText="Daily Range" FilterImageUrl=""
              SortAscImageUrl="" SortDescImageUrl="">
              <ItemTemplate>
                <asp:Label ID="DailyMinLabel" runat="server" Text='<%# Eval("DailyMinRange") %>' />&nbsp;-&nbsp;
                <asp:Label ID="DailyMaxLabel" runat="server" Text='<%# Eval("DailyMaxRange") %>' />
              </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn DataField="LastUpdated" UniqueName="LastUpdated" HeaderText="Last Updated"
              FilterImageUrl="" SortAscImageUrl="" SortDescImageUrl="" />
          </Columns>
          <EditFormSettings>
            <EditColumn CancelImageUrl="" EditImageUrl="" FilterImageUrl="" InsertImageUrl=""
              SortAscImageUrl="" SortDescImageUrl="" UpdateImageUrl="">
            </EditColumn>
          </EditFormSettings>
          <ExpandCollapseColumn CollapseImageUrl="" ExpandImageUrl="" FilterImageUrl="" SortAscImageUrl=""
            SortDescImageUrl="" Visible="False">
            <HeaderStyle Width="19px" />
          </ExpandCollapseColumn>
          <RowIndicatorColumn FilterImageUrl="" SortAscImageUrl="" SortDescImageUrl="" Visible="False">
            <HeaderStyle Width="20px" />
          </RowIndicatorColumn>
        </MasterTableView>
      </telerik:RadGrid><asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetData"
        TypeName="QuoteHelper" OldValuesParameterFormatString="original_{0}"></asp:ObjectDataSource>
    </ContentTemplate>
  </asp:UpdatePanel>
</div>
protected void Timer1_Tick(object sender, EventArgs e)
{
    RadGrid1.Rebind();
}
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem item = (GridDataItem)e.Item;
        TableCell cell = item["Change"];
        Image directionImage = (Image)cell.FindControl("DirectionImage");
        Label changeText = (Label)cell.FindControl("ChangeLabel");
        Decimal change = Decimal.Parse(((DataRowView)e.Item.DataItem).Row["Change"].ToString(), CultureInfo.InvariantCulture);
        if (change > 0)
        {
            directionImage.ImageUrl = "Images/up.gif";
            changeText.Style["color"] = "green";
        }
        else if (change < 0)
        {
            directionImage.ImageUrl = "Images/down.gif";
            changeText.Style["color"] = "red";
        }
        else
        {
            directionImage.Visible = false;
        }
    }
}
Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As EventArgs)
    RadGrid1.Rebind()
End Sub
'Timer1_Tick
Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs)
    If TypeOf e.Item Is GridDataItem Then
        Dim item As GridDataItem = CType(e.Item, GridDataItem)
        Dim cell As TableCell = item("Change")
        Dim directionImage As System.Web.UI.WebControls.Image = CType(cell.FindControl("DirectionImage"), System.Web.UI.WebControls.Image)
        Dim changeText As Label = CType(cell.FindControl("ChangeLabel"), Label)
        Dim change As [Decimal] = [Decimal].Parse(CType(e.Item.DataItem, DataRowView).Row("Change").ToString(), CultureInfo.InvariantCulture)
        If change > 0 Then
            directionImage.ImageUrl = "Images/up.gif"
            changeText.Style("color") = "green"
        ElseIf change < 0 Then
            directionImage.ImageUrl = "Images/down.gif"
            changeText.Style("color") = "red"
        Else
            directionImage.Visible = False
        End If
    End If
End Sub
Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy