Grid pagination shows button k-current-page

6 posts, 1 answers
  1. Carmelo
    Carmelo avatar
    1 posts
    Member since:
    Jan 2015

    Posted 31 Mar 2015 Link to this post

    The grid pager looks strange. I see following buttons:
    - first
    - previous
    - CURRENT PAGE
    - 1
    - 2
    - 3
    - next
    - last

    The button current page shows the number of the current page and is always disabled. See the attached screenshot.

    I am using a custom script kendo.custom.min.js that I have created using the "Kendo UI Custom Download" tool. When I use kendo.all.js instead then the pager looks OK. I have included following components in my custom script:
    - Framework
        - AngularJS Directives
    - Web
        - Grid
            - Paging
            - Selection
            - Grid adaptive rendering

    Kind regards
    Alexandra
  2. Answer
    Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 02 Apr 2015 Link to this post

    Hello Alexandra,

    Could you please verify that you have updated the CSS files to the latest release. If you continue to experience difficulties please provide a small test page  which replicates the issue. 

    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Joe
    Joe avatar
    11 posts
    Member since:
    May 2012

    Posted 11 Jun 2015 Link to this post

    We just upgraded to 2015.1.429.

    Now we have a grid pagination bug. It is exactly the same as the bug described here on this post.

    We do not have customization of the script.

     

  5. Joe
    Joe avatar
    11 posts
    Member since:
    May 2012

    Posted 11 Jun 2015 in reply to Joe Link to this post

    view.CompaniesGrid = $("#companiesGrid").kendoGrid({
        dataSource: {
            type: 'json',
            serverPaging: true,
            pageSize: 20,
            transport: {
                read: {
                    url: searchResultsUrl,
                    dataType: 'json',
                    data: {
                        searchMode: searchValues.SearchMode,
                        searchString: searchValues.SearchString
                    },
                    cache: false
                }
            },
            schema: {
                data: 'Data',
                total: 'Total'
            }
        },
        columns: [
            {
                title: 'Symbol',
                field: 'Symbol',
                width: '70px',
                template: '<a name="gotoCompany" href="JavaScript:void(0);">#= Symbol #</a>'
            }, {
                title: 'Company',
                field: 'CompanyName',
                width: '210px',
                template: '<a name="gotoCompany" href="JavaScript:void(0);">#= CompanyName #</a>'
            }, {
                title: 'Rating',
                field: 'Rating',
                width: '150px'
            }
        ],
        autoBind: true,
        pageable: true,
        sortable: false,
        filterable: false,
        scrollable: false,
        selectable: false,
        dataBound: function() {
            this.tbody.find("a[name=gotoCompany]").on("click.gotocompany", function() {
                var item = view.CompaniesGrid.dataItem($(this).closest("tr"));
     
                IA.utils.invokeAjaxContent($("#centercontent"), companyUrl, { symbol: item.Symbol }, function() {
                    view._destroyKendo();
                });
            });
        }
    }).data("kendoGrid");
  6. Joe
    Joe avatar
    11 posts
    Member since:
    May 2012

    Posted 11 Jun 2015 in reply to Joe Link to this post

    display: none !important fixes it for a temporary solution.

    I am putting this in our style sheet for any <li> with class k-current-page.

    <li class="k-current-page" style="display: none !important;">
      <span class="k-link k-pager-nav">4</span>
    </li>

  7. Joe
    Joe avatar
    11 posts
    Member since:
    May 2012

    Posted 11 Jun 2015 in reply to Joe Link to this post

    Found the cause of this problem.  It was in our code.

    We had some CSS code with too large of a scope that was altering <li> elements that messed up the Kendo <li> elements.

    I was able to narrow the selector for our styling and this problem has been resolved.

Back to Top
Kendo UI is VS 2017 Ready