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.
Building Custom Paging with LINQ, ListView, DataPager and ObjectDataSource, Different Paging Method
Yesterday, I was reading Efficient Paging in SQL Server 2005 post by Justin Etheredge, then in the comments I found Kevin Hazzard pointing to his Efficient LINQ to SQL custom paging approach. I liked his way, which reflects Justin's method which I already seen before but never apply it. I think it is more efficient than my method I provided in an earlier post. And if you googled about custom paging with LINQ to SQL you'll find few more implementation.
Today, I'm updating my method and provide the same sample I made last month with Kevin's method. I made an extension method to IQueryable Interface and called it KavinPage. You can view a demo here
Here is the code for the Extension Method:
1: public static IQueryable<T> KevinPage<T, TResult>(this IQueryable<T> obj, int page, int pageSize, System.Linq.Expressions.Expression<Func<T, TResult>> keySelector, bool asc, out int rowsCount)
2: { 3: rowsCount = obj.Count();
4: if (asc)
5: { 6: return obj.OrderBy(keySelector).Skip(page * pageSize).Take(pageSize);
7: }
8: else
9: { 10: return obj.OrderByDescending(keySelector).Skip(page * pageSize).Take(pageSize);
11: }
12: }
It is all about Extension Methods and how to use them to build SQL Queries. You can return for Kevin's post for detailed explanation. Also you can return to my previous post about this subject for more details about how to put it all together to build Paging ASP.NET ListView using LINQ to SQL and ObjectDataSource.
Download the updated sample.
Happy July, BlogEngine 1.4 Released
Well its 2nd of July, but day before yesterday was a good day. BlogEngine.Net 1.4 released, and today I performed my blog upgrade. But I didn't apply widgets yet but, I'm ready to do so once I got some time to be online to do so.
The upgrade didn't take too much time from me, actually no time at all but the uploading time. I performed kind of local upgrade test first to make sure that everything will work fine then I performed the live upgrade, and that is why actually I performed my upgrade so fast.
You can refer to this upgrade post by Al Nyveldt. I wish to share my upgrade experience, but these days I'm preparing for a business trip so I don't have much time to be online. Hopefully soon I'll be able to blog about it.
But one thing I can say, BlogEngine.Net 1.4 is 100% backward compatible with BlogEngine.Net 1.3, that means you will not lose anything or fall into trouble if you just do first stage upgrade like I did. My first stage doesn't include widgets, because I need to set them up and arrange them. So I preferred to write this post over continue my upgrade process :) . You can image how second stage will be easy :)
Have fun with BlogEngine.Net 1.4.
Building Custom Paging with LINQ, ListView, DataPager and ObjectDataSource
Last week I posted about building custom paging with LINQ to SQL. And I wrapped the functionality with Extension Method to IQueryable<T> Interface.
Today I'm going to put the custom paging in a practical sample using ASP.NET ListView, DataPager and ObjectDataSource Control. Click here to download the sample. View demo here.
The sample is using Northwind Database. So first I created a Northwind LINQ to SQL class ".dbml"
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...
BlogEngine.Net Extensions How-To part 02, Enhancing Post View Count Extension
Couple of days ago, I've walked through how to build simple BlogEngine Extension. Today I'll explore an advanced feature of BlogEngine Extensions which is provided settings your own extensions.
What is Extension Settings:
Settings are parameters user can provide to an extension to manage its behaviour. For example in my PostViews Extension, I'll provide settings that will allow user to exclude rage of IP addresses from accumulating any post view count. This setting is provided by the extension, and defined/filled by user.
Extension Setting Types:
I was able to categorize extension settings into 2 types:
- Scalar Extension Settings:
Only single value per parameter will be added. This will be reflected on the settings web form as one text box per parameter which will only accept single value. To enable this feature you should set ExtensionSettings.IsScalar=true - Multi Valued Extension Settings:
Will allow multi value per parameter to be added. Just as Tabular settings. This will be reflected on the settings web form as list of values displayed on GridView. You can add new settings, edit or delete existing ones. To enable this feature you should set ExtensionSettings.IsScalar=false which is currently the default value.
PostViews Extension we are exploring now, has Scalar Extension Settings. The final results of your settings will be displayed as web from with simple text box entry fields:
More...
BlogEngine.Net Extensions How-To part 01, Simple Post View Count Extension
In this post and following one, I'll explore how to build BlogEngine.Net Extension. In my previous post I showed a simple Extension. Here I'll start again with how to build simple Extension to view total view counts of a post.
Step 1 - Create your class and mark it with Extension Attribute:
Just in the App_Code/Extensions folder, create your extension class and mark it with Extension attribute just as the following:
1: [Extension("Counts and display number of views for a post", "1.0", "<a href=\"http://www.mosesofegypt.net\">Moses</a>")] 2: public class PostViewes
3: { 4: }
The Extension attribute is very simple, it accepts 3 parameters, Description of the Extension, Extension version and the name of the Author who developed this extension. All are strings of course.
More...
Building A BlogEngine Extension, ModeratedComments Extension
If you are BlogEngine.Net fan, then you should heard or used BlogEngine.Net Extensions; the extensibility feature in BlogEngine.Net. My story with Extensionsstarted just last week. I enabled the comment moderation setting on my blog. And I faced a small issue, I wanted a page to view all moderated comments -waiting for approval-. I proposed that to my friend Amr, he suggested to me to have a look at BlogEngine.Net Extensions.
The Story:
Well, the story was that I wanted to view all unapproved comments on my blog. There was only one solution in my mind before Amrsuggest to me to use BlogEngine.Net Extensions. That solution was to add new methods to exiting APIs or use the existing ones. I liked the idea of using existing ones, but the issue is that I will have to loop through all posts to find out if any as unapproved comments. And of course I didn't like the idea of adding new methods to existing APIs because it is just not acceptable at the time being, I am not one of BlogEngine developer's team, so will be hard for me to integrate my code in the upcoming releases.
The Extension Solution:
"Extensions allows you to write a class that can hook up to all the various events that are exposed in the application in a very simple manor" -Creating Extensions on BlogEngine Wiki-. Yes this sound like something to me. I need every time a comment is added to my blog to bookmark the post as it has pending comments waiting for approval. So I will handle Post.CommentAdded event and bookmark the post. Later, I'll build a page to view bookmarked posts and retrieve their moderated comments. To Bookmark a post, I just used simple XML file to store the unique identifier of the post.
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...
Applying localization From MasterPages
The scenario here is I want to apply localization to my web application and place language selection on MasterPage. I have made my own solution and applied this with assistance of cookies. View demo.
I'll demonstrate that in my sample. The sample has a MasterPage bellow is a snippet from its ASPX code:
1: <form id="form1" runat="server">
2: <div>
3: <asp:DropDownList ID="cmbCulture" runat="server" AutoPostBack="True"
4: OnSelectedIndexChanged="cmbCulture_SelectedIndexChanged">
5: <asp:ListItem Value="en-US">English</asp:ListItem>
6: <asp:ListItem Value="ar-EG">Arabic</asp:ListItem>
7: <asp:ListItem Value="de-DE">German</asp:ListItem>
8: </asp:DropDownList>
9: <asp:ContentPlaceHolder ID="cph" runat="server"/>
10: </div>
11: </form>
Simply when the user selects his language from the DropDownList the page post backs and change the language. More...