У меня есть сетка кендо, которую я создал в JQuery со следующим кодом.
//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
},
});
}
Все работает нормально, но в пейджере сетки изображения номера страницы искажаются. См. Изображение ниже для лучшей идеи.
Может кто-то дать мне несколько указателей, чтобы решить эту проблему.
Это не похоже на то, что происходит от кендо (я никогда не видел его, по крайней мере), каждая из кнопок пейджера состоит из гиперссылки в элементе списка вроде этого:
<li>
<a tabindex="-1" href="#" class="k-link" data-page="1">1</a>
</li>
Вероятно, вы добавляете свой собственный маркер для элемента <li>
, поэтому он добавляет квадратную пулю. Удалите свой стиль, и все должно быть в порядке.
Если вы пытаетесь настроить темы пользовательского интерфейса кендо, возможно, лучше использовать их тему.
Если вы не пытаетесь использовать пользовательскую тему Kendo, и вы просто настраиваете обычный список HTML где-нибудь, убедитесь, что вы используете очень специфический селектор в своем CSS и не украшаете общие HTML-элементы.
Я воспроизвел ваши искажения: