New Article: Building On Demand Loading Master/Details using GridView, CollapsiblePanelExtender and ASP.NET Ajax PageMethods
Well, I'm done with this article that show in details how to build on demand loaded details from master data using GridView and CollapsiblePanelExtender control. Read the article.
Earlier this year Matt Berseth posted about Building a Grouping Grid with the ASP.NET 3.5 LinqDataSource and ListView Controls. Then I followed his post with 2 other posts discussing same idea but with different implementation:
Later I got few comments about how to implement that using AJAX, in order to display the details data on demand. At that time Dave was demonstrating the usage of jQuery AJAX on his post Using jQuery to consume ASP.NET JSON Web Services. So I came up with another demo to apply on demand loading of details data in my post GridView Grouping Master/Detail Drill Down using AJAX and jQuery.
Again I got few other comments on how to apply same approach, but using ASP.NET AJAX Control Toolkit CollapsiblePanelExtender control. So here I'm going to provide how to do that using CollapsiblePanelExtender and ASP.NET AJAX PageMethods call to apply on demand loading of details from the master data. You can read my article and view Demo here.
Comments can be left on this post as currently pages feature of BlogEngine.Net doesn't support comments.
Simple Static Tooltip Widget using jQuery.UI
I've seen different type of tooltips around. And actually jQuery tooltip plugin was one of the best I ever seen. And then I thought to build some tooltip similar to those tooltips available on asp.net learning items. Just simple one to be displayed on left or right of the tooltiped item (element). And I decide to build that using jQuery.ui widgets.
Very simple and straight forward, all I needed is the following:
- A tooltip fully UI customizable to be displayed to the right or left of the desired element. And it should detect if the desired element is closer to right or left on the screen; so the tooltip to be displayed correctly to the right or left of the element.
- Ability to control when the tooltip to be displayed, on hover or focus on the element or manually using tooltip widget methods such show and hide.
- Callback upon on show and hide of the tooltip.
- Optional fancy show/hide animations.
I built a sample which you can download to demonstrate how this tooltip should work and you can view the demo here.
Before go through the code, I recommend first to read the following posts:
More...
jQuery.UI Messenger\Outlook like message notification Widget
Today, Matt posted a cool progressbar widget using jQuery.UI. He gave a good introduction and explanation about how to build a widget using jQuery.UI.
Here, I'm following his sample to build my own one, which is Messenger\Outlook like message notification [view demo]. So for reference and how to build one please return to jQuery.UI ProgressBar Widget by Matt Berseth.
Messenger like message notification widget is something I wished to do long time ago, and was lazy to think and code it, because I thought it would take to much coding. And I read Bilal's article How to Show Messenger-Like Popups Using AJAX but it wasn't a reusable component. So I just used his styles for demonstration.
After going through Matt's post, I decided to build it up right away. So Let's dive into the code. Below is the init method for the widget, I just initialize some local variables with to store current bottom position and height of the popup message element.More...
Popup Master-Detail using GridView, DetailsView and JQuery with jqModal
Introduction:
Last month Matt Berseth posted very good post about how to build Master-Detail with the GridView, DetailsView and ModalPopup Controls. Today I'm going to clone his post and build the same feature using jQuery with jQuery Plugins; one for popup windows jqModal& and the other is for Color Animation. You can view a demo of this sample here [View Demo].
Prerequisites:
Because I'm using some design tips and styles posted in Matt's posts, I recommend to return to his original posts regarding styling and UI enhancement. I used the styles and design shown on his post Building a VS2008 Styled Grid with the GridView Control.
In my sample I'm using UpdatePanel, and used a client side technique to update the UpdatePanel. To read and review more about this technique please read Dave's post Easily refresh an UpdatePanel, using JavaScript.
It is important also to review documentation of jqModalas I'm not going to explain its APIs.
Implementation:
To make a long story short, I just modified Matt's sample and replaced ModalPopup control of AJAX Control Toolkit with jqModal. Also Matt used to indicate the updated row by setting a style sheet class to the updated row for certain period of time then remove it to make it look as before. I did the same, but I used some kind of animation provided by Color Animationplugin for jQuery.
More...
GridView Grouping Master/Detail Drill Down using AJAX and jQuery
Introduction:
Last month I posted about Building a grouping Grid with GridView and JQuery. And I got feedbacks about how to do the same thing using AJAX (on demand retrieving of detail data). In fact I was thinking of that too, and I had couple of ideas in mind. One of them it to use nested update panels, or use AJAX Data Controls with page method/web service method calls along with ASP.NET AJAX. You can view the [demo here].
I didn't like the nested update panel idea, although it is the easiest I think. And was started to think about the second idea but I was about to check another way other than ASP.NET AJAX as long as I'm using jQuery. So I was thinking of using jQuery AJAX. That was just after reading Dave Ward's post Using jQuery to consume ASP.NET JSON Web Services.
More...
GridView jQuery Plugin Row MouseOver And Click Styles
Last year on October, Matt Berseth wrote few posts about improving styles of GridView, these posts are the following:
Last month, I posted a revised version of his work using Script#. And in this post I'm going to show that same features can be applied using jQuery. And I was really amazed by the simplicty and less of code that I had to write to get the same feature on hand.
I've implemented this using jQuery plugins. So I had to author a plugin and I can call it very simple one as the idea was already done and I had it on my head. I'm not going to explore how jQuery plugins can be authored, but you can return to the following links:
You can view demos here [demo 1] & [demo 2]. I will start from the end, on how to use the plugin. Actually it is very simple, all you need to do is to add this JavaScript line to your code when the page, or as a startup script. I did that using onLoad event of the ASP.NET AJAX Application as I have ScriptManager installed on the page:
$(selector).gridviewex(options);
For example:
<script type="text/javascript">
function pageLoad(s,e)
{
$('#gvProducts').gridviewex({hasPageRow:true,dataRowClass:'row',altDataRowClass:'altrow',
rowHoverClass:'rowhover', rowSelectClass:'rowselect',
cellHoverClass:'cellhover',cellSelectClass:'cellselect',
columnHoverClass:'columnhover'});
}
</script>This will initialize the GridView with the style needed. It worth to mention that you can use this plugin with any Table based HTML.
More...
GridView with Select All CheckBox using JQuery
One of the handy features that one might with to put on GridView is the Select All checkbox which is similar to the one on Hotmail and Yahoo. You click the checkbox on the header and all items (checkboxes underneath) get checked. [View Demo]
I've seen several implementation for this feature long time ago. Myself wrote one. And all solutions were using some good amount of JavaScript. Today I was thinking, why not revisit the idea again, but this time using all mighty JQuery.
And as expected, the amount of code used to implement this simple feature is really small. I'm going to explore the JQuery code expecting you already know ASP.NET and how to use GridView along with SqlDataSource.
My GirdView looks exactly like this one:
More...
Displaying Row Details Tooltip on GridView using JQuery
Continuing exploring JQuery! I decided to implement a feature to display some kind of details related to a row displayed on GridView. For example when displaying employees details on GridView some information might not fit in the GridView because it will make it huge and wide. These infomration can be diplayed as Tooltip. Or when you want to display a picture and some kind of formated text to be diplayed as tooltip when mouse hover on the image.
My sample here will show how to implement such feature using JQuery. Again, I'm using same data and designed presented in my previous posts:
- Building a grouping Grid with GridView and ASP.NET AJAX toolkit CollapsiblePanel.
- Building a grouping Grid with GridView and JQuery.
I'll display customer orders as tooltip. of course so much data to be diplayed as tooltip, but this is just demonstration [View Demo].
More...
Building a grouping Grid with GridView and JQuery
Nothing really new on this post, just another way to implement mater/detail representation with nested GridViews with assistance of JQuery. Previously I posted about building same feature using ASP.NET AJAX CollapsiblePanel Extender. that was another example of what Matt Berseth presented in his post about building a grouping grid using ASP.NET 3.5 ListView and Linq.
In this post I'll show how same feature can be implemented using JQuery. Very simple and straight forward.
Requirements:
It is required to download latest version of JQueryin order to be able to use this sample [View Demo].
More...
Building a grouping Grid with GridView and ASP.NET AJAX toolkit CollapsiblePanel
UPDATE: I've posted an update to this post to apply on demand loading of Details data using ASP.NET AJAX PageMethods. I'm demonstrating the usage if CollapsiblePanelExtender client events on the new post. Check it out.
I admit, Matt Berseth is really inspiring me! Few days ago I pass through 2 of his great posts:
The first one is pure design tips one which I used for making good presentation of my demo here. The 2nd post is actually the idea.
Here I'll do the same idea Matt presented in his post, but I'll user ASP.NET 2.0 simple stuff plus ASP.NET AJAX Toolkit CollapsiblePanel control.It is required that you have ASP.NET AJAX Extensions installed to be able to run the sample code.
I'll not go through the presentation tips mentioned in Matt's post, I'll just show my technique to implement grouping idea with GridViews and CollapsiblePanel along with SqlDataSource which of course can be replaced with ObjectDataSource. I should mention that I'm using same style sheets provided in Matt's sample code along with images [View Demo]. More...
Building GridView With ASP.NET AJAX Enabled Control with Script#
Introduction:
I was thinking of building ASP.NET AJAX Supported controls inorder to practice both ASP.NET AJAX extensions as well as Script# tool.
Actually I liked the work done by Matt Berseth regarding ASP.NET AJAX very much. So I decided to use his ideas, convert them with Script# and add extra view things. So 99% of this post credit returns to him, I will just show how to use Script# and work around few things [Demo].
Original Reference:
I picked a control Matt built as GridView Extender (Behavior).And he provided few posts about and here they are:
Simply the idea is to improve the look and feel of the simple GridView with extra styles. For example when hover over a grid cell/row or when click on a row. The control was built as AJAX Extender also known as Behavior that can be applied on a GridView. More...
ASP.NET 2.0 AJAX Timer Hacks! How to Pause ASP.NET AJAX Timer
UPDATE:
Matt Berseth posted a detailed information about this tip on his post Bug Bash: Enabling/Disabling the ASP.NET AJAX Timer using the Control's Client Side API. Much clearer and explained in details. [May 08, 2008]
----------------------------------------------------------------------------------------------------------------------------------
from about 2 weeks I wrote an article about how you can use ASP.NET 2.0 AJAX Timer control in a real world scenario side by side with RssToolKit.
The idea it to display RSS feed from deferent location in cycle using ASP.NET AJAX Timer. I also had an idea of pausing the Timer when the user move his mouse over the update-able area "Group Box that display feeds inside it". Of course this should be down from client side.
I searched the documentation for Client Side APIs related to the AJAX Timer control but I didn't find any. I had to hack inside AJAX Timer client library downloaded with ASP.NET AJAX Extensions, and I found what I want.
First I though that by setting client side enabled property using set_enabled(false) of the AJAX Timer I could get what I want; actually I was wrong, this will not pause the Timer.
Dig deeper, but not for too long, I found 2 methods _startTimer() and _stopTimer(), those were excatly what I was looking for.
bellow is a sample client code of how you can use these 2 methods:
1: function startTimer() { var timer = $find("<%=ajaxTimer.ClientID%>"); timer._startTimer(); } 2: function stopTimer() { var timer = $find("<%=ajaxTimer.ClientID%>"); timer._stopTimer(); }
The above code assuming that you have an AJAX Timer control on the page named ajaxTimer. Call these method from your client side code, or add them as event handlers on your target elements.
I don't know why these are not documented, or we are not supposed to use them?! Actually I don't know. I thought that after using these methods the browser will cause a problem regarding client scripts, but both Opera and IE worked just fine without any problem. Also I didn't notice any slow down or hanging in both browsers.
Hope you find it useful.
ASP.NET AJAX ComboBox
Back to April 2007 I posted about building an ASP.NET AJAX ComboBox. It was an attempt to rewrite a ComboBox Control I made to fulfil certain issues I faced with 3rd Party Controls. One of those issue was performance as most of 3rd Party control are rendering heavy HTML because of extinsive features they put on their controls which I do not need. So This post is supposed to be an extensions to my old post as well as my article about building Simple ASP.NET ComboBox.
Attached to this post is the ASP.NET AJAX ComboBox. The archive is also containing 3 other very simple controls. The controls are developed using ASP.NET AJAX 1.0. Client Side Controls are written using Script#. I've posted earlier about Script# and my experience with it, so feel free to have a look at that post.
Now back to ASP.NET AJAX ComboBox. The control is very simple, you can consider it as composite control of simple ListBox and TextBox, however it doesn't inherit from CompositeControl. It directly inherit from ListControl to support binding out of the box and many other features that do need any to be rewritten. More...