Kendo Grid的锁定列偏移未锁定列的垂直和水平对齐
我有一个使用锁定列的网格，有些列是模板，我遇到的问题是未锁定的列与其标题未正确对齐，并且行开始不对齐
有人遇到过这个问题吗？如果可以，那么您可以解决它。
这是网格
function CreateQuickEntryGrid() {
itemRowIndex = -1;
$("#QuickEntryGrid").empty();
quickEntryGrid = $("#QuickEntryGrid").kendoGrid({
dataSource: {
data: addBlankRows([]),
schema: {
model: {
id: "CatalogID",
fields: {
CatalogID: { editable: false, type: "number", title: "#" },
Catalog: { defaultValue: "Catalog1", editable: true, hidden: true },
Area: { type: "string", editable: true, hidden: false },
Section: { editable: false, type: "string", hidden: true },
PN: { type: "string", editable: true },
Qty: { type: "number", editable: true, validation: { min: 0, required: true } },
ItemID: { type: "string", editable: true },
Name: { type: "string", editable: true },
Description: { type: "string", editable: false },
ItemIAM: { type: "string", editable: true, hidden: true },
ItemKey: { type: "string", editable: true, hidden: true },
AutoAttachmentType: { type: "number", editable: true, hidden: true },
Width: { editable: true, type: "string" },
Height: { editable: true, type: "string" },
Depth: { editable: true, type: "string" },
Hinge: { editable: true, type: "string" },
FinishSideLeft: { editable: true, type: "string" },
FinishSideRight: { editable: true, type: "string" },
FromImplementorToFactory: { editable: true, type: "string" },
ItemListPrice: { editable: true, type: "number" },
ItemGlobalListPrice: { editable: true, type: "number" },
Multiplier: { editable: true, type: "number" },
Markup: { editable: true, type: "number" },
ImplementorCostEach: { editable: true, type: "number" },
EachSell: { editable: true, type: "number" },
Total: { editable: true, type: "number" },
HasPrompts: { type: "boolean", editable: true, hidden: true },
IsAttachment: { type: "boolean", editable: true, hidden: true },
ItemRowNumber: { type: "number", editable: false, hidden: false }
}
}
},
pageSize: 50
},
sortable: false,
navigatable: true,
reorderable: false,
groupable: false,
filterable: false,
columnMenu: false,
pageable: false,
selectable: "row",
toolbar: [
{
name: "create",
template:
"<button id='btnInsertBlankItem' type='button' class='btn btn-warning btn-xs' onclick='insertBlankItem()'><span class='glyphicon glyphicon-plus'></span> Insert Blank</button> "
},
{
name: "openItemBlade",
template:
"<button type='button' id='btnInsertItem' class='btn btn-warning btn-xs' onclick='insertItem()'><span class='glyphicon glyphicon-plus'></span> Add Item or Att/Acc/Mod</button> "
},
{
text: "Delete",
template:
"<button type='button' class='btn btn-warning btn-xs' onclick='DeleteSelectRow()'><span class='glyphicon glyphicon-remove'></span> Delete</button> "
},
{
text: "Global List Prices",
template:
"<button id='btnShowGlobalListPrices' type='button' class='btn btn-warning btn-xs'><span class='fa fa-dollar'></span> Price Breakdown</button>"
}
],
edit: function (e) {
...
},
dataBound: function (e) {
...
},
columns: [
{
field: "ItemRowIndex",
title: "ItemRowIndex",
template: "#= IncrementItemRowIndex() #",
hidden: true,
locked: true
},
{
field: "ItemRowNumber",
title: "#",
locked: true,
width: "55px",
template: "#= renderNumber(ItemRowNumber) #",
hidden: false,
editable: false,
attributes: {
style: "background-color: lightgray; border-color:darkgrey"
}
},
{
field: "Section",
title: "Section",
locked: true,
width: "80px",
hidden: true
},
{
field: "Area",
title: "Area",
locked: true,
width: "60px",
editor: AreaDropDownEditor,
template: "#= Area #",
hidden: false,
attributes: {
class: "editable-cell"
}
},
{
field: "PN",
title: "PN",
width: "40px",
template: "#= getItemPromptTemplate(PN) #",
locked: true
},
{
field: "Qty",
title: "Qty",
locked: true,
width: "50px",
attributes: {
class: "editable-cell"
},
editor: function (container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
min: 0,
step: 1,
format: "0",
spinners: false,
select: function (e) {
let dataItem = this.dataItem(e.item);
let grid = $("#QuickEntryGrid").data("kendoGrid");
let rowItem = grid.dataItem(container.parent());
rowItem.set("Qty", dataItem.Value);
},
change: function (e) {
let dataItem = $("#QuickEntryGrid").data("kendoGrid").dataItem(container.parent());
}
});
}
},
{
field: "ItemID",
title: "ItemID",
width: "100px",
hidden: true,
locked: true
},
{
field: "Name",
title: "Name",
locked: true,
editor: NameDropDownEditor,
width: "100px",
attributes: {
class: "editable-cell"
}
},
{
field: "ItemKey",
title: "Item Key",
width: "100px",
hidden: true
},
{
field: "AutoAttachmentType",
title: "AutoAttachmentType",
width: "100px",
hidden: true
},
{
field: "IsAttachment",
title: "IsAttachment",
width: "100px",
hidden: true
},
{
field: "ItemIAM",
title: "Item Att/Mod",
width: "100px",
hidden: true
},
{
field: "Description",
width: "200px",
editable: false,
attributes: {
style: "background-color: lightgray; border-color:darkgrey"
}
},
{
field: "Width",
title: "Width / Length",
width: "60px",
headerAttributes: { "class": "wrap-header" },
attributes: {
class: "editable-cell"
}
},
{
field: "Height",
title: "Height / Thknss",
width: "60px",
headerAttributes: { "class": "wrap-header" },
attributes: {
class: "editable-cell"
}
},
{
field: "Depth",
width: "50px",
attributes: {
class: "editable-cell"
}
},
{
field: "Hinge",
width: "85px",
editor: hingeListDropdown,
attributes: {
class: "editable-cell"
}
},
{
field: "FinishSideLeft",
title: "Finish Side Left",
width: "100px",
editor: finishSideLeftDropDown,
headerAttributes: { "class": "wrap-header" },
attributes: {
class: "editable-cell"
}
},
{
field: "FinishSideRight",
title: "Finish Side Right",
width: "100px",
editor: finishSideRightDropDown,
headerAttributes: { "class": "wrap-header" },
attributes: {
class: "editable-cell"
}
},
{
field: "FromImplementorToFactory",
//field: "SpecialInstruction",
title: "Special Instruction",
width: "100px",
editor: editInpopup,
headerAttributes: { "class": "wrap-header" },
attributes: {
class: "editable-cell"
}
},
{
field: "ItemListPrice",
title: "Item List",
width: "75px",
editable: false,
format: "{0:n2}",
editor: nonEditor,
attributes: {
style: "background-color: lightgray; border-color:darkgrey"
}
},
{
field: "ItemGlobalListPrice",
title: "Global List",
width: "85px",
editable: false,
format: "{0:n2}",
editor: nonEditor,
attributes: {
style: "background-color: lightgray; border-color:darkgrey"
}
},
{
field: "Multiplier",
title: "Multiplier",
width: "75px",
editable: false,
format: "{0:n5}",
editor: nonEditor,
attributes: {
style: "background-color: lightgray; border-color:darkgrey"
}
},
{
field: "Markup",
title: "Markup",
width: "75px",
format: "{0:n5}",
editor: nonEditor,
attributes: {
style: "background-color: lightgray; border-color:darkgrey"
}
},
{
field: "ImplementorCostEach",
title: "Cost Each",
width: "100px",
//lockable: false,
editable: false,
format: "{0:n2}",
editor: nonEditor,
headerAttributes: { "class": "wrap-header" },
attributes: {
style: "background-color: lightgray; border-color:darkgrey"
}
},
{
field: "EachSell",
title: "Each Sell",
width: "75px",
editable: false,
format: "{0:n2}",
editor: nonEditor,
attributes: {
style: "background-color: lightgray; border-color:darkgrey"
}
},
{
field: "Total",
title: "Total",
width: "85px",
editable: false,
format: "{0:n2}",
editor: nonEditor,
attributes: {
style: "background-color: lightgray; border-color:darkgrey"
}
}
],
editable: {
...
},
change: function (e) {
...
}
});
}
function getItemPromptTemplate(pn) {
if (pn != null)
return "<strong style='color:rgb(129, 196, 104);cursor:pointer;'>" + pn + "</strong>";
else
return "";
}
function renderNumber(value) {
if (value == undefined) {
if (rowNumber == null || rowNumber == "0" || rowNumber === "")
return "";
else
return rowNumber;
} else {
return value;
}
}
var itemRowIndex = -1;
function IncrementItemRowIndex() {
++itemRowIndex;
return itemRowIndex;
}
这就是我要得到的
1 个答案:
答案 0 :(得分：0)
关于Kendo Grids中标题未对齐的问题很多。
问题的一个潜在来源是滚动条：出现时，标题需要以下CSS规则：
.k-grid-header {
padding-right: 17px !important;
}
没有滚动条，该填充必须为0。
如果您希望滚动条根据数据动态显示和消失，请查看以下文档：https://docs.telerik.com/kendo-ui/knowledge-base/hide-scrollbar-when-not-needed
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？