Update RadGrid

2 posts, 1 answers
  1. JC
    JC avatar
    30 posts
    Member since:
    Feb 2013

    Posted 25 Mar 2013 Link to this post

    Hi All,

    I have the following requirement. I have a RadGrid in the payment page. I want to automatically update the Grid with new data every five minutes when it is displayed. I tried adding the timer control directly to the AJAX settings as updated control but it didnt worked. It would be helpful if anyone provides a sample solution.

    Thanks in advance,
    JC.
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 26 Mar 2013 Link to this post

    Hi JC,

    Please have a look at the following sample code which illustrates how to AJAXify the standard MS Timer control with RadAjaxManager. One cannot add the Timer control directly to the AJAX settings as updated control. Instead, just wrap the timer in a container like ASP:Panel and set the container as updated control. The sample code also demonstrates continuous update of RadGrid per certain interval. This however can be achieved by binding the Grid client or server-side through Web Service.

    ASPX:
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Timer1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="LoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="DropDownList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="Panel2"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <table>
        <tr>
            <td style="width: 300px">
                Change Timer Interval:
                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                    <asp:ListItem Text="2 seconds" Value="2000"></asp:ListItem>
                    <asp:ListItem Text="3 seconds" Value="3000" Selected="True"></asp:ListItem>
                    <asp:ListItem Text="5 seconds" Value="5000"></asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:Panel ID="Panel2" runat="server">
                    Timer interval:
                    <asp:Label ID="lblInterval" runat="server" Text="3000" Style="font-weight: bold;"></asp:Label>
                </asp:Panel>
            </td>
        </tr>
    </table>
    <div style="float: left;">
        <telerik:RadGrid ID="RadGrid1" runat="server" Width="600px" OnItemDataBound="RadGrid1_ItemDataBound"
            OnNeedDataSource="RadGrid1_NeedDataSource">
            <MasterTableView AutoGenerateColumns="False" DataKeyNames="Change" TableLayout="Fixed">
                <Columns>
                    <telerik:GridBoundColumn DataField="Index" HeaderText="Index" UniqueName="Index">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Value" HeaderText="Value" DataFormatString="{0:C2}"
                        UniqueName="Value">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Change" HeaderText="Change" DataFormatString="{0:P2}"
                        UniqueName="Change">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn UniqueName="TemplateColumn">
                        <HeaderStyle Width="40px"></HeaderStyle>
                        <ItemTemplate>
                            <asp:Image ID="Image1" AlternateText="progress" BorderWidth="0px" runat="server">
                            </asp:Image>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </div>
    <asp:Panel ID="Panel1" runat="server">
        <asp:Timer ID="Timer1" runat="server" Interval="3000" OnTick="Timer1_Tick">
        </asp:Timer>
    </asp:Panel>

    C#:
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        Timer1.Interval = int.Parse(DropDownList1.SelectedValue);
        lblInterval.Text = Timer1.Interval.ToString();
    }
    public void Timer1_Tick(object sender, EventArgs e)
    {
        RadGrid1.Rebind();
    }
     
    protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
        DataTable table = new DataTable();
        table.Columns.Add("Index", typeof(string));
        table.Columns.Add("Value", typeof(double));
        table.Columns.Add("Change", typeof(double));
     
        Random r = new Random();
     
        table.Rows.Add(new object[] { "Item1", r.Next(7000, 8000), r.Next(-50, 500) / 100.0 });
        table.Rows.Add(new object[] { "Item2", r.Next(8000, 9000), r.Next(-50, 50) / 100.0 });
        table.Rows.Add(new object[] { "Item3", r.Next(7000, 8000), r.Next(-50, 50) / 100.0 });
        table.Rows.Add(new object[] { "Item4", r.Next(5000, 6000), r.Next(-50, 50) / 100.0 });
     
        RadGrid1.DataSource = table;
     
        System.Threading.Thread.Sleep(500);
    }
     
    protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = e.Item as GridDataItem;
            System.Web.UI.WebControls.Image img = (System.Web.UI.WebControls.Image)item.FindControl("Image1");
     
            double val = (double)item.GetDataKeyValue("Change");
            if (val > 0)
            {
                img.ImageUrl = "Img/image1.gif";
                img.AlternateText = "decrease";
            }
            else
            {
                img.ImageUrl = "Img/image2.gif";
                img.AlternateText = "decrease";
            }
        }
    }

    Thanks,
    Princy.
Back to Top