Kendo Pager Refresh

[Ambica]

Hi,

I have Listview with pager. on search change event am binding listview and pager using data source. on first binding listview and pager is working properly but not in successive binding. listview is refreshing in successive binding but pager is not. (its adding one more row (attachment))
below is my code:

HTML:

    <div>
                <input type="search" id="fieldSearch" placeholder="search...">
                <div id="listView" style="height: 325px; overflow: auto;">
                </div>
                <div class="k-pager-wrap">
                    <div id="pager">
                    </div>
                </div>
    </div>

Jquerry:

$(document).ready(function () {
$("#fieldSearch").live("change", Search);

}

function Search() {
 
 var tSearchText = $("#fieldSearch").val();
 
 var dataSource = new kendo.data.DataSource({
      transport: {
                  read: {
                          url: "http://...." + tSearchText,
                          dataType: "json"
                         }
                  },
                  pageSize: 12
      });
                            
      $("#pager").kendoPager({
               dataSource: dataSource
       });                              
 
       $("#listView").kendoListView({
                                    dataSource: dataSource,
                                    selectable: "single",
                                    dataBound: onDataBound,
                                    change: function (e) { onChange(e) },
                                    template: kendo.template($("#Template").html())
        });
 
       }

    <script type="text/x-kendo-tmpl" id="Template">
                    <div style="height:27px; cursor: pointer;">
                          <span>${Name}</span>                     
                    </div>
    </script>

[Doug]

I am doing the exact same thing and experiencing an identical issue.  Is there some sort of clear method?  In looking at the source code, I only see a change method.  Is there some way to use the change method to reset the pager?  This is only happening to me on a page that is a complete single page application dependent upon nothing but datasource/ajax calls where multiple changes in the list are occuring.  When I am using it in a postback scenario this isn't happening.

Any advice would be helpful.

[Ambica]

Hi Douq,

Can u plz try this...

var _ClientsListDS = null;
$(document).ready(function () {
  // Declare data sources and kendo controls
  InstanciateDataSources();
  InstanciateKendoControls();
    // Load listview
    _ClientsListDS.fetch();
    // Search events handlers
    $("#fieldSearch").on('keyup', function (e) {
        OnSearch($(this).val());
    }); 
   $("#fieldSearch").on('search', function (e) {
        OnSearch($(this).val());
    })
});

 

function InstanciateDataSources() {
    // This datasource bind the listview
    _ClientsListDS = new kendo.data.DataSource({
        type: "odata",
        serverPaging: true,
        serverFiltering: true,
        pageSize: 12,
        transport: {
            read: {               
                url: ‘your url here ’
                dataType: 'json',
                 }
        },
        schema: {
            model: {
                id: "Id"
            }
        }
    });
} 

function InstanciateKendoControls() {
    // list view
    $("#divClientListView").kendoListView({
        template: "<div id=${Id} style='width:100%;height:24px;cursor:pointer'><span style='padding-left:9px;line-height:24px;'>${Name}</span></div>",  
        selectable: 'true',
        height: 400,
        autoBind: false,
        dataSource: _ClientsListDS,
        columns: ["Id", "Name"]
    });

    // list view pager
    $("#pager").kendoPager({
        autoBind: false,
        dataSource: _ClientsListDS
    });
} 

//----------------------------------------------------------------------------
//  Event Handler - Enable list view filtering
//----------------------------------------------------------------------------
function OnSearch(pSearchValue) {
    if (pSearchValue)
        $("#divClientListView").data("kendoListView").dataSource.filter({ field: "Name", operator: "contains", value: pSearchValue });
    else
        $("#divClientListView").data("kendoListView").dataSource.filter({});
}

[Doug]

I just needed a weekend to clear my head.  The answer is much more obvious than I thought, which usually means I'm going to miss it the first time around.  If you watch the DOM, the pager is just injecting ul's into the jQuery object.  All I had to do was make sure my pager had a unique DOM id (already there), and call the remove() of jQuery.

I am using the window to preview some data before submittal and am doing a pager at the top and bottom of the page.  The two id's below are the div's that are being assigned the pager.

This successfully "clears" the pager each time if I put these lines right before I re-instantiate the pager.

This might be a "hack", but it's quick and easy to understand, so, until there is a more "supported" method, I'm sticking with this.

EDIT: Here is the whole code block.  The clearing are the first two non-comment lines.

//Clear any leftover pagers

$("#preview-top-pager").find('ul').remove();

$("#preview-bottom-pager").find('ul').remove();

 

//Set the pagers

pagers.previewTop = $("#preview-top-pager").kendoPager({

    dataSource: previewDataSource,

    change: function(e){

    $("#previewWindow").animate({ scrollTop: 0 }, 0);

    }

});

 

pagers.previewBottom = $("#preview-bottom-pager").kendoPager({

    dataSource: previewDataSource,

    change: function(e){

    $("#previewWindow").animate({ scrollTop: 0 }, 0);

    }

});

 

//Set the template

var previewTemplate = kendo.template($("#previewTemplate").html());

 

//Set the listview

$("#previewListView").kendoListView({

    dataSource: previewDataSource,

    template: previewTemplate

});