Lazy loading of search results

#Custom software development #Bootstrap #CSS #HTML

SHARE

 
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   

Author

Check other articles

5 5

What our clients say

Bits Orchestra team are outstanding developers‚Äč. They listen carefully to our business needs and easily turns our business objectives into a well thought out and executed development effort. Roman is very bright and definitely the most capable developer that has worked on our site. He is not only a Kentico expert but has successfully tackled other complicated development assignments demonstrating expertise in both front and backend development. Roman takes initiative to suggest enhancements that make site maintenance easier while improving the customer experience. The team is very responsive to our work requests and has great follow up. They have also worked very business partners and this has reflected positively on our company. Roman is a true partner for us and a tremendous asset to our organization. We will continue to work with them and would highly recommend Roman and his team for your development needs. He and his team will exceed your expectations!
 Alan Lehmann
Alan Lehmann
President at In energy sector

What our clients say

The Bits Orchestra team does excellent work. They are always available and I appreciate our frequent calls and screen-shares together. Their dedication to the projects and knowledge of Kentico is outstanding. They truly care about the quality of their work, and became a part of our team easily!
Shena Lowe
Shena Lowe
Managing Partner at Consensus Interactive

What our clients say

We hired Roman for a Kentico analysis project and have been very satisfied. He is very skilled and professional. We are looking to hire him and his team again on future projects.
Sylvain Audet
Sylvain Audet
CEO at MyDevPartner.com

What our clients say

Roman and team have taken over an existing Kentico EMS site for a large US Oil Company. So far, they have handled every single request that we have thrown at them and these were diverse, challenging, often bespoke, usually urgent and almost daily, over the last 11 months. Their work is of an extremely high quality, they are capable, quick and we have great confidence in the support that we are getting.
Jon Hollis
Jon Hollis
Head of Web Development at confidential

What our clients say

Bits Orchestra team was very helpful, they had a good understanding of the brief and deep knowledge of the system. They were always keen to provide advice and recommendations that benefit the project substantially.
Ramon Lapenta
Ramon Lapenta
Senior Front End Developer at Cyber-Duck Ltd