如何从剑道网格表头中删除文本？答案

【问题标题】：How to remove the text from a kendo grid table header?如何从剑道网格表头中删除文本？
【发布时间】：2020-05-15 17:15:54
【问题描述】：

我正在尝试删除剑道网格中的标题文本，但如果我将标题留空，则会出现字段名称，并且对于第一列，我需要删除文本，因为它不需要那里

$(document).ready(function() {

  LoadValidationResults();
});
var ds = [{
    Severity: 1,
    RoomName: "Main",
    CatalogName: "Bens",
    Area: "Front",
    Context: "Global",
    AlertMessage: "Test Message 11111111111111111111111111111111"
  },
  {
    Severity: 2,
    RoomName: "Main",
    CatalogName: "Georges",
    Area: "Upper",
    Context: "Item",
    AlertMessage: "Test Message 2"
  },
  {
    Severity: 3,
    RoomName: "Main",
    CatalogName: "Marys",
    Area: "Lower",
    Context: "Global",
    AlertMessage: "Test Message 3"
  },
  {
    Severity: 4,
    RoomName: "Main",
    CatalogName: "Julie",
    Area: "Back",
    Context: "Item",
    AlertMessage: "Test Message 4"
  },
];

function LoadValidationResults() {
  $('#ValidationResultsGrid').empty();
  $('#ValidationErrorText').empty();

  $("#ValidationResultsGrid").kendoGrid({
    dataSource: {
      data: ds
    },
    schema: {
      model: {
        fields: {
          RoomName: {
            type: "string"
          },
          AreaName: {
            type: "string"
          },
          CatalogName: {
            type: "string"
          },
          CatalogVersion: {
            type: "string"
          },
          CatalogSection: {
            type: "string"
          },
          Context: {
            type: "string"
          },
          GlobalGroupName: {
            type: "string"
          },
          Row: {
            type: "number"
          },
          ItemRowNum: {
            type: "string"
          },
          Severity: {
            type: "number"
          },
          AlertMessage: {
            type: "string"
          },
          ValidateRuleID: {
            type: "number"
          }
        }
      }
    },
    filterable: false,
    columns: [{
        field: "Severity",
        title: "",
        //template: "#= ValidationResultSeverityLevel(Severity) #",
        width: "50px"
      },
      {
        field: "RoomName",
        title: "Room",
        hidden: false
      },
      {
        field: "CatalogName",
        title: "Catalog",
        hidden: false
      },
      {
        field: "Area",
        title: "Area"
      },
      {
        field: "Context",
        title: "Context",
      },
      {
        field: "AlertMessage",
        title: "Validation Alert",
        attributes: {
          style: "overflow: hidden !important;text-overflow: ellipsis;white-space: nowrap;",
        }
      }
    ],
    scrollable: true,
    selectable: "row",
    dataBound: function() {},
    change: function(e) {},
    height: "192px"
  });
}

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>


<div id="ValidationResultsGrid"></div>

【问题讨论】：

标签： jquery kendo-ui kendo-grid

【解决方案1】：

空字符串无效，但一个空格" " 可以：

...
columns: [{
        field: "Severity",
        title: " ",
        //template: "#= ValidationResultSeverityLevel(Severity) #",
        width: "50px"
      },
...

$(document).ready(function() {

  LoadValidationResults();
});
var ds = [{
    Severity: 1,
    RoomName: "Main",
    CatalogName: "Bens",
    Area: "Front",
    Context: "Global",
    AlertMessage: "Test Message 11111111111111111111111111111111"
  },
  {
    Severity: 2,
    RoomName: "Main",
    CatalogName: "Georges",
    Area: "Upper",
    Context: "Item",
    AlertMessage: "Test Message 2"
  },
  {
    Severity: 3,
    RoomName: "Main",
    CatalogName: "Marys",
    Area: "Lower",
    Context: "Global",
    AlertMessage: "Test Message 3"
  },
  {
    Severity: 4,
    RoomName: "Main",
    CatalogName: "Julie",
    Area: "Back",
    Context: "Item",
    AlertMessage: "Test Message 4"
  },
];

function LoadValidationResults() {
  $('#ValidationResultsGrid').empty();
  $('#ValidationErrorText').empty();

  $("#ValidationResultsGrid").kendoGrid({
    dataSource: {
      data: ds
    },
    schema: {
      model: {
        fields: {
          RoomName: {
            type: "string"
          },
          AreaName: {
            type: "string"
          },
          CatalogName: {
            type: "string"
          },
          CatalogVersion: {
            type: "string"
          },
          CatalogSection: {
            type: "string"
          },
          Context: {
            type: "string"
          },
          GlobalGroupName: {
            type: "string"
          },
          Row: {
            type: "number"
          },
          ItemRowNum: {
            type: "string"
          },
          Severity: {
            type: "number"
          },
          AlertMessage: {
            type: "string"
          },
          ValidateRuleID: {
            type: "number"
          }
        }
      }
    },
    filterable: false,
    columns: [{
        field: "Severity",
        title: " ",
        //template: "#= ValidationResultSeverityLevel(Severity) #",
        width: "50px"
      },
      {
        field: "RoomName",
        title: "Room",
        hidden: false
      },
      {
        field: "CatalogName",
        title: "Catalog",
        hidden: false
      },
      {
        field: "Area",
        title: "Area"
      },
      {
        field: "Context",
        title: "Context",
      },
      {
        field: "AlertMessage",
        title: "Validation Alert",
        attributes: {
          style: "overflow: hidden !important;text-overflow: ellipsis;white-space: nowrap;",
        }
      }
    ],
    scrollable: true,
    selectable: "row",
    dataBound: function() {},
    change: function(e) {},
    height: "192px"
  });
}

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>


<div id="ValidationResultsGrid"></div>

【讨论】：

【解决方案2】：

我明白了

$('#ValidationResultsGrid table th')[0].innerHTML = "";

【讨论】：