Grid pagination shows button k-current-page

[it.bern]

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

[Rosen]

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

 

 

[Joe]

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.

 

[Joe]

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");

[Joe]

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>

[Joe]

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.