Kendo网格的扭曲页码图像

时间:2014-02-20 15:26:43

标签: jquery kendo-ui kendo-grid

我有一个我在Jquery中使用以下代码创建的kendo网格。

 //Creating Kendo Grid For Tasks
            divSearchGrid.kendoGrid({
                dataSource: {
                    transport: {
                        read: function (options) {
                            $.ajax({
                                type: "POST",
                                url: urlSearch,
                                data: paramsSearch,
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (result) {
                                    if (data != null) {
                                        if (data.length > 0) {
                                            orignalComplexData = data; 
                                            options.success(orignalComplexData )
                                        }
                                        else {
                                            divSearchGrid.html('<h4>No records To Display</h4>')
                                            // To stop the Auto Refresh of the grid if there are no results
                                            isEditing = true;
                                        }
                                    }
                                    else {
                                        divSearchGrid.html('<h4>Some Error Occured</h4>')
                                    }
                                }
                            })
                        }
                    },
                    pageSize: 10
                },
                batch: true,
                edit: function (e) {

                    // To stop the Auto Refresh of the grid on edit
                    isEditing = true;
                },
                groupable: true,
                scrollable: true,
                sortable: true,
                reorderable: true,
                resizable: true,
                selectable: "row",               
                autoSync: true,
                editable: true,
                navigatable: true,
                columns: columnList,
                columnMenu: true,
                filterable: true,
                columnMenu: {
                    sortable: false
                },
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
            });    
        }

一切正常但在网格的寻呼机中,页码的图像变得扭曲。请参阅下面的图片以获得更好的主意。

enter image description here

有人可以给我一些指导来解决这个问题。

1 个答案:

答案 0 :(得分:0)

这看起来不像来自kendo的东西(我至少从未见过它),每个寻呼机按钮都包含一个列表元素中的超链接,如下所示:

<li>
    <a tabindex="-1" href="#" class="k-link" data-page="1">1</a> 
</li>

您可能正在为<li>元素添加自己的自定义项目符号点,这就是它添加方形项目符号的原因。删除您的自定义样式,它应该没问题。

如果您尝试自定义kendo UI主题,最好使用他们的themebuilder

如果您没有尝试使用自定义Kendo主题并且只是在某处自定义普通HTML列表,请确保在CSS中使用非常特定的选择器并且不要修饰通用HTML元素。

我已经复制了你的失真:

Distorted pager buttonz