JPList tips

JpList tips for Open Content #dnncms

Strange or no JpList filter results

When you experience strange or no results of your filters, please make sure you don't have any HTML errors in your modules template. Especially when using JPList to filter data that's rendered server-side (without WebApi callbacks) one HTML error can lead to very strange filtering results.

How to improve the JPList textbox search experience?

When using a JPList textbox searchbox we advise you to improve the autocomplete experience by following these steps:

1. Add data-event-name="keydelay" attribute to input tag
2. Add "textfilter" class to input tag
3. Load the example javascript, on document ready, that you find here

template.hbs

<input data-path=".title" class="form-control textfilter"
        type="text"
        value=""
        placeholder="Filter by Title"
        data-control-type="textbox"
        data-control-name="Title"
        data-control-action="filter"
        data-event-name="keydelay"       />

template.js

var isTyping = false;
var typingHandler = null;
var $textfilter = $(".textfilter", this);

$textfilter.on('input', function(context){
  if (isTyping) {
    window.clearTimeout(typingHandler);
  }
  else {
    isTyping = true;
  }

  typingHandler = window.setTimeout(function () {
    isTyping = false;
    $textfilter.trigger("keydelay");
  }, 1000);
});

Upgrading JPlist and using other filter controls

When you use JPList with a client side template, you should realise that Open Content has the needed AJAX calls built in.
These are defined here: https://github.com/sachatrauwaen/OpenContent/blob/master/OpenContent/Components/JPList/JplistQueryBuilder.cs

This also means that you cannot simply upgrade the JPList JS files as the defined calls are liked to the JSList version. So unless you define your own calls, you cannot upgrade JPList to version 5.2 or the latest JQuery less version