Loading

Lazy loading of search results

This post shows how you may implement lazy loading for search results (or any other viewer) web part.

Last time lazy loading became "must to have" feature in the world of web, especially when talking about mobile devices experience. We apply lazy loading for loading images or more data on demand.

Last days I've been working on the mobile site built with Kentico CMS and main purpose of that application was search through thousands of  record. Of course Kentico smart search capabilities were utilized to reach a goal. Smart search results web part was used to show the result on the page. Everyone who worked with that web part knows that it shows default pager control when there were more results found than page size. 

The issue I run into with that pager are:
The look of the control makes me feel like I'm back in time for 10 years - the nice thing here is that Kentico allows us to adjust the layout, styling, add or remove controls
Pager allows me to switch between pages, but what I need, in my particular case, is increasing page size until there are more available search results
My personal preference when working with Kentico CMS is to avoid customization as much as possible. So I've started to look for the solutions within Kentico features.

So, as you've might already guess, we are going to work with pager settings of the Smart search results web part. First thing I did in order to achieve my goal was:

  • setup pager page size to any reasonable value, let's say 25
  • setup paging mode to PostBack
  • check hide pager for single page
Next things we need to take care of are pager transformations. In this particular case we need just two transformations:
  • Pager layout
    • It should contain just one place holder for next page transformation. Why next? - Simply because Kentico will hide it when there is no more pager (more available search results). So my trasformation looks the following way:
<asp:PlaceHolder runat="server" ID="plcNextPage"></asp:PlaceHolder>

  • Next page
    • This transformation should increase smart search results page size instead of taking user to the next page. That's why the look of my transformation is:
<div id="loadMore"> </div>
<div style="margin: 10px;">
  <asp:Button class="btn btn-default btn-block" runat="server" text="loading more items..." ID="btnMore" ClientIDMode="Static" />
</div>
 
<script runat="server">
  protected override void OnLoad(EventArgs e)
    {
      base.OnPreRender(e);      
      Control parent = this;      
      while ( (!(parent is CMS.Controls.UniPager)) && 
             (parent != null))
      {
        parent = parent.Parent;
      }      
      if (parent != null && parent is CMS.Controls.UniPager)
      {        
        (parent as CMS.Controls.UniPager).PageSize = (parent as CMS.Controls.UniPager).PageSize + 25;        
      }
    }
</script>

This transformation contains a button that user might click when reached the bottom of the page, so it will trigger postback and fire OnLoad method implemented in the transformation, which increases the size of the page (amount of items to show). Another approach (the one I've chose) is to implement javascript that will click the button instead of user when reaching the bottom of the page. I'm not going to publish my javascript code as it has not any relation with Kentico as well as it is just the matter of developer preferences which one to use.

The final step is checking Use update panel setting of the Smart search results web part. After doing this your page should smoothly load more and more results.

This approach could be also used with other viewers, like repeater, but in this case I'd like to admit that described implementation is not a real lazy loading, but its mimicking, so it is strogly recommended to use AJAX + Kentico Rest service for data lazy loading in any other cases. You might ask me why have I used this approach. The answer is: because there is no way to get search results with Kentico Rest service. Also I'd not recommend using it with large amount of data.

Here you can find an example of repeater with "lazy loading". As I've already mentioned, it is not recommended to use this approach with repeater. I used it just for demo purpose. Try to scroll down to the bottom of the page and see how approach works.

Please leave your thoughts and comments, you have on this approach, as well as approach you're using to resolve similar problems.

Thank in advance,
Roman Hutnyk   


Comments
keralaresults.nic.in
click here for kerala results keralaresults.nic.in
2/17/2018 10:50:11 AM

survival games
I really impress to your all post here is more information for us thanks for sharing this amazing post.
2/9/2018 9:06:10 AM

what is bookmark
Do you visit similar destinations regularly? Provided that this is true, and you aren't as of now utilizing bookmarks to deal with your online exercises, this article will reveal to you how to accelerate your surfing by utilizing and overseeing bookmarks. In case you're as of now utilizing bookmarks, the article has helpful hints on sending out your bookmarks and sparing them on a site. This proves to be useful when you're far from your PC - on an excursion, say - and still need to visit the locales you surf routinely. <a href='http://bookmarkinginseo.com/'>what is bookmark</a>
2/6/2018 7:47:22 AM

filehippo
filehippo There are undoubtedly countless websites on the Internet to download and view literally everything one might need
2/5/2018 7:20:32 AM

abcya game
ABCya Games is an educational game aid and activity for school-aged children which available for desktop, Android, and iOS devices.
1/24/2018 7:23:15 AM

Affordable Website Design
Web designing is an art! Your website design shows your business insight. A well known saying is “First impression is the lasting one”. In web technologies, your website is the first entity that interacts with the visitor, so your website should speak itself!
1/9/2018 9:15:19 AM

assignment writing services uk
This is an instructive post consider. I am so satisfied to get this post article and exquisite data. I was anticipating get such a post which is enormously profitable to us. A vital thank for posting this article on this site. Keep it up.
1/4/2018 11:24:40 AM

تور تایلند
Nice post. Thank you for the info. Keep it up.
12/23/2017 11:23:18 AM

come
Thai men don’t need or other pharmaceutical props for their equipment.
12/15/2017 8:09:41 AM

Do my Assignment Cheap
significant information on topics that abundance are captivated on for this incredible post.Admiring the time and effort you put into your b!..
12/12/2017 12:58:02 PM

echallan hyderabad
Paying e challan hyderabad is so easy now-a-days.
12/1/2017 9:34:57 AM

run 4 game
thanks for sharing this. i am also fed up from this lazy loding.
11/23/2017 8:33:48 PM

蔡小煒
You can take Global Assignment Help from studentsassignmenthelp.com we have 3,000 + writers, each Writer has its Assignment key Knowledge. All writers have more than ten years of experience.
11/10/2017 1:28:09 PM

waqar mazhar
nice post
10/31/2017 4:31:20 PM

vt canvas
Only aspire to mention ones content can be as incredible. This clarity with your post is superb and that i may think you’re a guru for this issue. High-quality along with your concur permit me to to seize your current give to keep modified by using approaching blog post. Thanks a lot hundreds of along with you should go on the pleasurable get the job done.
10/22/2017 5:56:03 AM

Source
great post
10/17/2017 4:48:28 AM

Happy New Year 2018 Quotes
On this amazing accident you can Free Download Happy New Year 2018 HD Wallpapers, Images from our website page.
10/14/2017 12:39:48 PM

Best Beard Trimmer 2017
Beards are awesome. But in order to stay that way, we have to maintain them. Here's our review and guide of the best beard trimmers 2017. We've put together this list of the best beard razor for the guy who likes to groom.
10/13/2017 4:47:16 AM

how do you know if you have tonsil stones
Most electric oral irrigators are unsuitable for tonsil stone removal because they are too powerful and are likely to cause discomfort.
9/27/2017 5:18:54 AM

photo grid free download
I really enjoyed reading this post, big fan. Keep up the good work andplease tell me when can you publish more articles or where can I read more on the subject?
9/26/2017 12:16:54 PM

Mobdro
Before we start the guide on how to download Mobdro Apk for Android I will recommend you to get the latest version from the given list below. With updated mobdro apk for PC can watch Mobdro movies on Laptop.
9/23/2017 4:59:30 AM

Music Paradise Pro Downloader
Goot. This post is really Cool. Keep it Up.
9/22/2017 5:09:17 PM

all free downloaders
listening our favorite songs gives 90% relief from tensions.now a days most of them are getting irritation with downloading songs so for those users here is list of apps for online music
9/11/2017 4:04:41 PM

lucky patcher apk for pc
Download Lucky patcher no root apk now. LuckyPatcher Android APK. It is said that 10,000+ users downloaded Lucky Patcher No Root Hack latest version on 9Apps for free every week! It truly does not offer any money.
9/11/2017 7:15:53 AM

kingroot review
Easy Root Unroot Your Android Not Need PC With KingRoot APK XDA In 5 Minutes.Get kingRoot review at SoftandApp.Download KingRoot 4.1 apk 0.1 and all version history for Android.
9/8/2017 10:01:57 AM

game guardian download
GameGuardian Free APK Download for Android.You can install the Game Guardian APK for Android with latest updated version.
8/30/2017 9:15:57 AM

WhatsApp Download for Android
Whatsapp for Samsung Galaxy Download. Download WhatsApp for Android fast and without virus.
8/29/2017 9:47:15 AM

lucky patcher by chelpus
Download lucky patcher original app apk 1.0 and all version history for Android. Do you want to download lucky patcher old version for free? Download Lucky Patcher by ChelpuS APK Latest Version 5.9.1 for Android.Do you want to download download lucky patcher full version for free?
8/19/2017 4:03:41 AM

shopping app
Get Upto 80% Off On Online Shopping in India.Find the top Shopping apps and games for Android devices.Build Android App online or make your own free Google Android App online.
8/8/2017 9:26:26 AM

drug and alcohol programs in Colorado
I like your post. It is good to see you verbalize from the heart and clarity on this important subject can be easily observed.
7/26/2017 3:15:21 PM

New Teams of Pro Kabaddi
Watch Pro Kabaddi Live Streaming Online.The Pro Kabaddi League 2017 in its fifth edition will kickstart from July 28 and the final is slated to be played on October 28.
7/22/2017 4:59:45 AM

Apps like ShowBox
let me take you to the adventurous tour to find the treasure of Apps like Show Box to Stream Videos and Tv shows on Android and iOS. Looking for a WORKING apk and a procedure to perform Showbox apk download on your Android.
6/22/2017 6:10:47 AM

Affordable assignment help
Leave an order: and we will contact you as soon as possible. Our team consists of professional and experienced writers only.
6/12/2017 10:45:54 AM

Case Study Solution Help
Our home comprises of vital scholars and inventive practitioners who grasp a hands-on way to deal with coordinated imaginative administrations inside a full-scale generation and studio office. More than 60 years of image making has situated us as the head goal for all types of substance creation for the home business.
6/9/2017 7:34:38 AM

pmp certification
Gain an in-depth knowledge of the process groups and master project management methodologies.
5/29/2017 10:03:42 AM

WhatsApp Video Call Not Working
WhatsApp Video Call is now available for Android smartphones with the release of 20.16.80 beta version.Future updates of whatsapp (2.12.16.2) may contain whatsapp video call option.Download Whatsapp video calling feature on activation.
5/11/2017 4:38:17 AM

replica watches uk
great
5/10/2017 9:29:47 AM

computer equipment recycling
A very awesome blog post. We are really grateful for your blog post. You will find a lot of approaches after visiting your post.
4/10/2017 1:23:55 PM

Mariia Zhokh
Really usefull post. Thanks for sharing that.
7/2/2015 9:59:22 AM

 Security code