Scrollable ASP.net/javascript grid control for logging events

Question

Has anyone had any experience writing a web control (in either ASP.net, or javascript/HTML/CSS), that could be used to display log information which is pinged from a server every now and then via an AJAX query?

I'm thinking a grid control from someone like Telerik, or maybe a javascript jQuery-type library would at least have the plumbing I need to get going. Each row would likely contain some HTML which I could format as needed for the event, and that's about it really.

It would also be nice to be able to programmatically scroll to show added rows, preferably smoothly.

Here is a programmer-art mockup of what I mean:

Regards, Shane

Answer 1

I would recommend using JQuery to perform the ping to fetch data periodically. The data provider has to provide a data format like json of something easy for you to decipher on the receiving end.

Use JQuery again to construct the new log item to be displayed and append it to the log display container. Use ScrollTo plugin or just javascript to scroll new item into view

Resources:

• Fetching Data: http://docs.jquery.com/Ajax/load
• Append Item: http://docs.jquery.com/Manipulation/append
• Scrolling: http://plugins.jquery.com/project/ScrollTo

Answer 2

Telerik has great support for declarative (codeless) client-side binding or programmatic client-side binding of its controls to web services. Here's an example of a grid that is updated in real-time.

They will also be releasing a new ListView control if you want a more custom layout than the grid provides. I'm sure you'll find similar implementations as far as client-side binding and web services.

Answer 3

If ASP.NET MVC is an option, you might also want to check-out the free and open source Telerik Grid for ASP.NET MVC:

http://demos.telerik.com/aspnet-mvc/Grid

Unlike the jQuery options, the Telerik Grid supports both server-side and client-side rendering, delivering a solution that is more accessible, indexer-friendly, and still as fast and performant as JavaScript grids. Includes support for binding directly to web services and for UI features like paging, sorting, filtering, grouping, and (soon) hierarchy.

Hope that helps for any that are following in Shane's footsteps.