This is a migrated thread and some comments may be shown as answers.

Kendo Pager Refresh

3 Answers 306 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Ambica
Top achievements
Rank 1
Ambica asked on 16 May 2012, 11:27 AM
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="height325pxoverflowauto;">
                </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>

3 Answers, 1 is accepted

Sort by
0
Doug
Top achievements
Rank 1
answered on 06 Jul 2012, 09:50 PM
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.
0
Ambica
Top achievements
Rank 1
answered on 09 Jul 2012, 09:35 AM
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({});
}

0
Doug
Top achievements
Rank 1
answered on 09 Jul 2012, 12:12 PM
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
});

Tags
Data Source
Asked by
Ambica
Top achievements
Rank 1
Answers by
Doug
Top achievements
Rank 1
Ambica
Top achievements
Rank 1
Share this question
or