Kendo UI pager not on grid component

[Roman]

I want to use pagination to display data, but it won't be in a grid form, I would just show some documents in a div, but still want to be able to paginate - i.e. request html for n-th page.

Is this possible?

[Tsvetina]

Hello Roman,

You can use the Pager as a standalone component in a combination with the DataSource component. If you want to create a pageable UI, which has a layout defined by your own styles, you can consider using the ListView widget:
ListView / Basic usage demo

The ListView can be integrated with the pager and the layout of its items completely depends on the CSS rules that you apply to them.

Regards,
Tsvetina
Progress Telerik

[Roman]

Thanks for the reply, I implemented it using ListView and it works. There is one problem though - it looks like the pages are being cached, i.e. I do a search for something that populates list view, let's say there is 20 pages in it. I hit the "last" arrow and it goes for the 20th page.

 

Then I do a second search that has 30 results and I hit "last" page and it shows me the results from previous search. Why does it happen and how do I mitigate that?

Thanks,

Roman

[Tsvetina]

Hello Roman,

Could you share the code that you used to declare the ListView and to implement the search? There may be some conflict between the configuration of the ListView DataSource and the custom search logic, as the ListView and Pager would not be caching data themselves.

Regards,
Tsvetina
Progress Telerik

[Roman]

I have something like this: 

 

function getResults() {
    var searchString = $("input[name='searchString']").val();

$.ajax
({
  type: "GET",
  url: "http://${applicationScope['wsapiSever']}/wsapi/getdata/impact*;search="+searchString,
  dataType: 'json',
  async: false,
      crossDomain: true,
}).done(function( data ) {
            var dataSource = new kendo.data.DataSource({
                data: data,
                pageSize: 10
            });

            $("#pager").kendoPager({
                dataSource: dataSource
            });

            $("#listView").kendoListView({
                dataSource: dataSource,
                template: kendo.template($("#docTemplate").html())
            });
});
}

and this template: 

    <script type="text/x-kendo-template" id="docTemplate">
        # key = Object.keys(data)[2]; #
        <div class="doc"> #= key #
        # var p = data[key]; for (sKey in p) { #
            # if (p.hasOwnProperty(sKey) && sKey != "_events" && sKey != "_handlers" && sKey != "uid" && sKey != "parent") { # 
                <span>#= sKey # : #= (p[sKey] == null) ? "" : p[sKey] #</span>
        # } } #
        </div>
    </script>

[Tsvetina]

Hi Roman,

It seems like the code is creating a new ListView and Pager instance after every search. Creating multiple instances of the same widget from one and the same element is not recommended and could lead to different side effects.

I can suggest two ways to address this:
1. Keep the current search logic but only re-create the DataSource:

$.ajax
({
  type: "GET",
  url: "http://${applicationScope['wsapiSever']}/wsapi/getdata/impact*;search="+searchString,
  dataType: 'json',
  async: false,
      crossDomain: true,
}).done(function( data ) {
            var dataSource = new kendo.data.DataSource({
                data: data,
                pageSize: 10
            });

            $("#pager").data("kendoPager").setDataSource(dataSource);

            $("#listView").data("kendoListView").setDataSource(dataSource);
});
}

This will create a new DataSource for the pager and ListView each time a search is performed.

2. You could configure the ListView to bind directly to the search endpoint and use a data function to dynamically provide the search parameter. It would look something like this:

function getResults() {
    $("#listView").data("kendoListView").dataSource.read();
}

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            type: "GET",
            url: "http://${applicationScope['wsapiSever']}/wsapi/getdata/impact*;",
            dataType: "json",
            data: function(){
                return {search: $("input[name='searchString']").val()};
            }
        }
    },
    pageSize: 21
});

$("#pager").kendoPager({
    dataSource: dataSource
});

$("#listView").kendoListView({
    dataSource: dataSource,
    template: kendo.template($("#template").html())
});

Regards,
Tsvetina
Progress Telerik