Настройка groupHeaderTemplate для Kendo Grid UI

Question

Настройка groupHeaderTemplate для Kendo Grid UI

Сейчас я работаю с кендо Grid UI с PHP. У меня есть столбец в Grid для перечисления имени ‘Stage’ из моей БД (имя поля таблицы ‘stage_name’). Я смог сделать это, установив «stage_name» в качестве поля в столбце, но я должен отсортировать имя этапа на основе «stage_id» (первичный ключ таблицы). Поэтому я переписал код, как показано ниже:

var grid = $("#stageGrid").kendoGrid({
columns: [{
field: "stage_id",  // stage_name
title: "Stage",
template: "#=stage_name#",
aggregates: ["count"],
groupHeaderTemplate: "Stage : #=(value != null)? value : 'Empty' # (Count: #=count#)",
width: 150
}]
});

Я смог перечислить имя сцены, имя сортировки относительно stage_id & все это. Теперь моя проблема в том, что при группировке столбца, stage_id отображаются как заголовок столбца (вы можете увидеть это на изображении приложенный ). Я должен исправить это, показав соответствующее имя сцены. Может ли кто-нибудь из вас иметь хорошую идею, чтобы помочь мне. Ожидая вас ценную идею.

Заранее спасибо.

0

angularjs kendo-grid kendo-ui php

Решение

По вопросам рекламы [email protected]

Accepted Answer

Если я правильно понимаю ваш сценарий, вы используете столбец внешнего ключа в своей таблице и хотите показать имя, соответствующее этому идентификатору внешнего ключа, а также хотите сгруппировать с использованием этого внешнего ключа. Для этого лучше всего использовать свойство values столбца, который кроме массива объекта со свойством text и value, Kendo gird автоматически выберет текст для этой строки на основе значения этого столбца.

для получения дополнительной информации вы можете проверить эту ссылку

http://demos.telerik.com/kendo-ui/grid/foreignkeycolumn

Вот рабочая демка.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>

<body>

<div id="grid"></div>
<script>
var positionValues = [{
"text": "Project Manager",
"value": 1
}, {
"text": "Sales Manager",
"value": 2
}, {
"text": "Engineer",
"value": 3
}];

$("#grid").kendoGrid({
columns: [{
field: "name",
title: "Name"}, {
field: "age",
title: "Age"}, {
field: "positionId",
title: "Position",
values: positionValues
}],
dataSource: {
data: [{
name: "Jane Doe",
age: 30,
positionId: "2"}, {
name: "John Doe",
age: 34,
positionId: "1"}, {
name: "Sam Degree",
age: 40,
positionId: "1"}, {
name: "Salina Kile",
age: 51,
positionId: "2"}, {
name: "Johney Doe",
age: 24,
positionId: "3"}, {
name: "Matt Prior",
age: 23,
positionId: "3"}, {
name: "Michael Jackson",
age: 37,
positionId: "2"}, ],
group: {
field: "positionId",
aggregates: [{
field: "age",
aggregate: "count"}]
}
}
});
</script>
</body>

</html>

2

Другие решения

Других решений пока нет …

Источник