Grid ASync databinding

[Asim]

Hi,

I am working on a scenario where Feeds are downloaded from a web URL. Since this feed downloading can be a time taking process, I want to shift this logic and grid databinding to Async mode.
I did checked different threads talking about NeedDatasource to other approaches but none of them is working for me. Given below is code for your reference:

//WebUserControl1.ascx

<%

 

@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl1.ascx.cs" Inherits="WebUserControl1" %>

 

 

<%

 

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

 

　

<

 

 

telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

 

<

 

 

script language="javascript" type="text/javascript">

 

 

 

function OnRowClicked(sender, eventArgs) {

 

 

 

 

var newsDetailURL = eventArgs.getDataKeyValue("link") + '&style=html';

 

 

 

 

var index = newsDetailURL.indexOf('http://');

 

 

 

 

if (index == -1) {

 

 

newsDetailURL = newsDetailURL.replace(

 

'http:/', 'http://');

 

 

}

 

window.open(newsDetailURL,

 

'', 'location=0,status=0,toolbar=0,directories=no,menubar=no,titlebar=no,scrollbars=1,resizable=1');

 

 

}

 

 

 

function RebindNewsFeeds() {

 

 

 

 

var btnRebind = $get('<%= btnReload.ClientID %>');

 

 

btnRebind.click();

 

}

 

 

 

function ResizeNewsFeed() {

 

 

 

 

// var grid = document.getElementById("<%= RadGridNewsFeed.ClientID %>"); //$find("< % = .ClientID % >");

 

 

 

// var parentDiv = grid.parentNode;

 

 

 

// var documentObj = document.documentElement;

 

 

 

// if (window.opera || (document.all && !(document.compatMode && document.compatMode == "CSS1Compat"))) {

 

 

 

// documentObj = document.body;

 

 

 

// }

 

 

 

// parentDiv.height = '100%';

 

 

 

// parentDiv.width = '100%';

 

 

 

// parentDiv.style.height = '100%';

 

 

 

// parentDiv.style.width = '100%';

 

 

 

try {

 

 

 

 

var grid = $find("<%= RadGridNewsFeed.ClientID %>");

 

 

grid._scrolling._initializeDimensions();

 

 

 

//grid.repaint();

 

}

 

catch (ex) { }

 

 

}

</

 

 

script>

 

 

</

 

 

telerik:RadCodeBlock>

 

 

<

 

 

telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">

 

 

 

</telerik:RadAjaxLoadingPanel>

 

 

<

 

 

telerik:RadAjaxPanel ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" runat="server" Height="100%" Width="100%">

 

 

 

 

<telerik:RadGrid ID="RadGridNewsFeed" runat="server"

 

 

 

 

AutoGenerateColumns="False" OnItemDataBound="RadGridNewsFeed_ItemDataBound"

 

 

 

Skin="Grid" EnableEmbeddedSkins="False" GridLines="None"

 

 

 

 

HeaderStyle-Width="100%" ItemStyle-Width="100%" width="100%"

 

 

 

 

Height="100%" AllowSorting="True" ItemStyle-Wrap="false"

 

 

 

style="margin:0; border: 0; outline: none"

 

 

 

 

EnableViewState="False" onneeddatasource="RadGridNewsFeed_NeedDataSource" >

 

 

 

 

<MasterTableView Width="100%" CellPadding="0" CellSpacing="0"

 

 

 

 

ClientDataKeyNames="link" ShowHeadersWhenNoRecords="true"

 

 

 

 

AllowNaturalSort="false" TableLayout="Auto" EnableViewState="False">

 

 

 

 

<SortExpressions>

 

 

 

<telerik:GridSortExpression FieldName="pubDate" SortOrder="Descending" />

 

 

 

</SortExpressions>

 

 

 

 

<CommandItemSettings ExportToPdfText="Export to Pdf" />

 

 

 

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

 

 

 

</RowIndicatorColumn>

 

 

 

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

 

 

 

</ExpandCollapseColumn>

 

 

 

<Columns>

 

 

 

<telerik:GridBoundColumn DataField="pubDate" HeaderText="Date" UniqueName="pubDate">

 

 

 

<HeaderStyle HorizontalAlign="Left" Width="20%" />

 

 

 

</telerik:GridBoundColumn>

 

 

 

<telerik:GridBoundColumn DataField="Title" HeaderText="Title" UniqueName="Title" HeaderStyle-Width="80%">

 

 

 

<HeaderStyle HorizontalAlign="Left"/>

 

 

 

<ItemStyle Wrap="false" />

 

 

 

</telerik:GridBoundColumn>

 

 

 

<telerik:GridBoundColumn DataField="link" HeaderText="Detail News Link" UniqueName="link" Visible="false">

 

 

 

<HeaderStyle HorizontalAlign="Left" />

 

 

 

 

</telerik:GridBoundColumn>

 

 

 

</Columns>

 

 

 

 

<EditFormSettings>

 

 

 

<EditColumn CancelImageUrl="Cancel.gif" EditImageUrl="Edit.gif"

 

 

 

 

FilterControlAltText="Filter EditCommandColumn column"

 

 

 

 

InsertImageUrl="Update.gif" UpdateImageUrl="Update.gif">

 

 

 

</EditColumn>

 

 

 

</EditFormSettings>

 

 

 

</MasterTableView>

 

 

 

 

<SortingSettings EnableSkinSortStyles="false" />

 

 

 

 

<ClientSettings EnableRowHoverStyle="true" >

 

 

 

<ClientEvents OnRowClick="OnRowClicked" />

 

 

<%

 

--<Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" ScrollHeight="100%"/>--%>

 

 

 

 

</ClientSettings>

 

 

 

 

<HeaderStyle Width="100%" />

 

 

 

<ItemStyle Width="100%" Wrap="False" />

 

 

 

<FilterMenu EnableEmbeddedSkins="False" EnableImageSprites="False">

 

 

 

</FilterMenu>

 

 

 

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Grid"

 

 

 

 

EnableEmbeddedSkins="False">

 

 

 

</HeaderContextMenu>

 

 

 

</telerik:RadGrid>

 

 

<

 

 

asp:Button ID="btnReload" SkinID="ButtonHidden" runat="server" OnClick="btnReload_Click"

 

 

 

Text="Button" />

 

 

 

 

<input type="hidden" id="txtLastUrl" runat="server" value ="" />

 

</

 

 

telerik:RadAjaxPanel>

 

　

//Code WebUserControl1.ascx.cs

using

 

 

System;

 

using

 

 

System.Collections.Generic;

 

using

 

 

System.Linq;

 

using

 

 

System.Web;

 

using

 

 

System.Web.UI;

 

using

 

 

System.Web.UI.WebControls;

 

using

 

 

Telerik.Web.UI;

 

using

 

 

System.Data;

 

using

 

 

System.Net;

 

public

 

 

partial class WebUserControl1 : System.Web.UI.UserControl

 

{

 

 

DataSet _dsNewsFeed = null;

 

 

 

 

const string styleTag = "&style=html";

 

 

 

 

private delegate void DownloadNewsFeedData(string val);

 

#region

 

 

Cotrol Events

 

 

 

 

/// <summary>

 

 

 

/// It will be called whenver master form is laoded or refreshed

 

 

 

/// </summary>

 

 

 

/// <param name="sender">Caller of the event</param>

 

 

 

/// <param name="e">Event info which is passed along the method</param>

 

 

 

protected void Page_Load(object sender, EventArgs e)

 

 

{

 

 

 

if (!IsPostBack)

 

 

LoadNewsFeed();

 

}

#endregion

#region

 

 

Public Routines

 

 

 

 

/// <summary>

 

 

 

/// It will be called whenever you want to hit the third party server to download the feed for the active company

 

 

 

/// </summary>

 

 

 

public void LoadNewsFeed()

 

 

{

 

 

 

try

 

{

 

 

 

//Formulate the url to get the news for the company

 

 

 

string newsFeedURL = "http://savanet.acquiremedia.com/news/search";

 

 

 

 

string companyNewsFeedURL = "http://savanet.acquiremedia.com/news/search?query=/ANN";

 

 

_dsNewsFeed =

 

new DataSet();

 

 

 

 

//GetNewsFeedDataTable(companyNewsFeedURL);

 

 

 

////Call async thread to download news feed data

 

 

 

DownloadNewsFeedData downloadNewsFeedData = new DownloadNewsFeedData(GetNewsFeedDataTable);

 

 

 

 

AsyncCallback ac = new AsyncCallback(UpdateNewsFeedDownloadingStatus);

 

 

downloadNewsFeedData.BeginInvoke(companyNewsFeedURL, ac, downloadNewsFeedData);

 

 

 

 

 

}

 

 

 

catch (Exception ex)

 

 

{

 

 

 

}

 

}

#endregion

#region

 

 

Private Routines

 

 

 

 

/// <summary>

 

 

 

/// It will be called when news downloading thread is completed

 

 

 

/// </summary>

 

 

 

/// <param name="ar">Result object of the async thread</param>

 

 

 

private void UpdateNewsFeedDownloadingStatus(IAsyncResult ar)

 

 

{

 

 

 

try

 

{

 

 

//Bind news feed data table to the grid

 

RadGridNewsFeed.DataSource = _dsNewsFeed.Tables[

 

"item"];

 

 

RadGridNewsFeed.DataBind();

 

 

 

//Terminate exchange rate downloading request

 

 

 

DownloadNewsFeedData downloadNewsFeedData = (DownloadNewsFeedData)ar.AsyncState;

 

 

 

 

if (!object.Equals(null, downloadNewsFeedData))

 

 

downloadNewsFeedData.EndInvoke(ar);

 

　

 

}

 

 

 

catch (Exception ex) { }

 

 

}

 

 

 

/// <summary>

 

 

 

/// It will download the feed from third party server and bind it to the grid

 

 

 

/// </summary>

 

 

 

/// <param name="newsFeedURL">Third party web service url to download the feed</param>

 

 

 

private void GetNewsFeedDataTable(string newsFeedURL)

 

 

{

 

　

 

 

 

if (txtLastUrl.Value != newsFeedURL)

 

 

{

 

txtLastUrl.Value = newsFeedURL;

 

 

 

// Create the web request

 

 

 

HttpWebRequest request = WebRequest.Create(newsFeedURL) as HttpWebRequest;

 

 

request.Timeout = 10000;

 

 

 

// Get response

 

 

 

using (HttpWebResponse response = request.GetResponse() as HttpWebResponse)

 

 

{

 

　

 

 

 

// Load data into a dataset

 

_dsNewsFeed.ReadXml(response.GetResponseStream());

 

 

//LogUtility.BuildNewExceptionAndLog(this.GetType(), "GetNewsFeedDataTable", "After get response" + _dsNewsFeed.Tables["item"].Rows.Count.ToString());

 

}

 

 

//RadGridNewsFeed.DataSource = _dsNewsFeed.Tables["item"];

 

 

 

//RadGridNewsFeed.DataBind();

 

}

}

#endregion

#region

 

 

Grid Events

 

 

 

 

/// <summary>

 

 

 

/// It is called after an item is bound to the grid

 

 

 

/// </summary>

 

 

 

/// <param name="sender">The caller of the method. In this case it will be grid</param>

 

 

 

/// <param name="e">It contains the parameter information which is passed along the event</param>

 

 

 

protected void RadGridNewsFeed_ItemDataBound(object sender, GridItemEventArgs e)

 

 

{

 

 

 

if (e.Item.ItemType == GridItemType.AlternatingItem || e.Item.ItemType == GridItemType.Item)

 

 

{

 

 

 

GridDataItem gItem = (GridDataItem)e.Item;

 

 

 

 

DataRowView dr = e.Item.DataItem as DataRowView;

 

 

 

 

if (dr.Row["description"] != DBNull.Value || !string.IsNullOrEmpty(dr.Row["description"].ToString()))

 

 

{

 

gItem.ToolTip = dr.Row[

 

"description"].ToString();

 

 

}

 

}

 

}

#endregion

 

 

protected void btnReload_Click(object sender, EventArgs e)

 

 

{

 

 

 

this.LoadNewsFeed();

 

 

}

 

 

 

protected void RadGridNewsFeed_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

 

 

{

 

 

 

try

 

{

 

 

////Bind news feed data table to the grid

 

 

 

//if (_dsNewsFeed != null && _dsNewsFeed.Tables.Count > 0)

 

 

 

// RadGridNewsFeed.DataSource = _dsNewsFeed.Tables["item"];

 

 

 

//else

 

 

 

// RadGridNewsFeed.DataSource = null;

 

}

 

 

catch (Exception ex) { }

 

 

}

 

}

I tried attaching code but it is not allowed :(
Thanks in anticipation.

[Iana Tsolova]

Hi Asim,

Based on the provided information I am not sure what you are trying to achieve. However I suggest that you check out the below demos and see if any of the approaches used there can help:
http://demos.telerik.com/aspnet-ajax/ajax/examples/common/ajaxifytimer/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/grid/examples/client/livedata/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/grid/examples/client/databinding/defaultcs.aspx

All the best,
Iana
the Telerik team

[Asim]

HI,

Thanks for your support but these links are using WebServices which is not in my case.

• Object is to reduce page load time.

 

This is why I want to shift dataLoading to aSync. In my scenario there is no webService involved and Feed is downloaded directly from a URL. Since this dowloading of data can be time taken (say even due to low speed internet),

Also, this grid in placed in a sliding pane, so it has nothing todo with any page. so shifting this feed loading to aSync can help.

Can you guide on this please?

[Iana Tsolova]

Hi Asim,

In this case, you can try the solution provided here:
http://www.telerik.com/help/aspnet-ajax/ajax-show-loadingpanel-on-initial-pageload.html

Or just use the virtual paging of RadGrid:
http://demos.telerik.com/aspnet-ajax/grid/examples/client/virtualscrollpaging/defaultcs.aspx

Greetings,
Iana
the Telerik team

[Asim]

Hi lana,

Showing LoadingPanel will not reduce load time :)
and time taking part is:

string

 

 

newsFeedURL = http://savanet.acquiremedia.com/news/search;

HttpWebRequest

 

 

request = WebRequest.Create(newsFeedURL) as HttpWebRequest;

 

 

request.Timeout = 10000;

 

 

 

// Get response

 

 

 

using (HttpWebResponse response = request.GetResponse() as HttpWebResponse)

 

 

{

 

　

 

 

 

// Load data into a dataset

 

_dsNewsFeed.ReadXml(response.GetResponseStream());

}

Now, I just want to move this code to aSync mode - Which I already have done, but then Grid never shows any records even if I rebind it once operation is complete.

Please help me on above. I have gone through most of other work arounds including LoadOnDemand user controls.

What you say?

Thanks.

[Iana Tsolova]

Hi Asim,

To what data source is the grid bound, is it to the resulting dataset? If you are assigning the grid DataSource in the NeedDataSource event handler, there is no reason for the grid not to show the records.
However can you elaborate a bit more on the desired async mode? What would be the flow in this mode?

Greetings,
Iana
the Telerik team

[Asim]

Ok. Yes resulting dataseet will bind to datagrid. So datasource is DataSet.
Here is flow of desired aSync mode:

1. Main page loads. Controls in different RadSlidingPanes load within page lifecycle.
2. I want to reduce page load time. So I want to shift controls data loading and binding to async mode.
3. Above will ensure better/quick page loading and continue to load controls that are hiddent initialy because they are placed in SlidingPanes which are not pinned by default.

I hope everything is clear now. let me now if there is any confusion and I would love to add further.

Thanks for your support.

[Iana Tsolova]

Hi Asim,

In this case you have a few options:
    - To enable custom paging for the grid and thus take from the database only the records which are to be displayed on the specific page
    - Assign data source to the grid only when it is visible on the page, e.g. when the sliding pane is expanded.

All the best,
Iana
the Telerik team

[Asim]

Thanks lana,

Second solution worked with me.

Thanks.