Настройка группыHeaderTemplate для интерфейса Kendo Grid UI

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

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

Благодарим вас заранее.

источник

2016-12-14 Sinto

Если я правильно понимаю ваш сценарий, вы используете столбец внешнего ключа в своей сетке и хотите отображать имя, соответствующее этому идентификатору внешнего ключа, и вы также хотите группировать с использованием этого внешнего ключа. Для этого лучше всего использовать свойство values столбца, за исключением массива объекта с текстом и значением, 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>

Я надеюсь, что это поможет.

EDIT

<!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 
 
    }]; 
 

 
    function showPos(value) { 
 
     position = positionValues.find(function(el){ 
 
     return el.value == value; 
 
     }); 
 
     return (position) ? position.text : ""; 
 
    } 
 
    $("#grid").kendoGrid({ 
 
     columns: [{ 
 
     field: "name", 
 
     title: "Name" 
 
     }, { 
 
     field: "age", 
 
     title: "Age" 
 
     }, { 
 
     field: "positionId", 
 
     title: "Position", 
 
     values: positionValues, 
 
     groupHeaderTemplate: "Custom Template: #= showPos(value) #" 
 
     }], 
 
     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>

источник

2016-12-14 11:19:34

Тай за помощь, я буду смотреть на это и обновить вас. – Sinto

Это полезная работа, но вы можете помочь мне в еще одном. Выполняя, как вы сказали, я не могу показать groupHeaderTemplate. Вы знаете, как установить это, как показано в приведенном выше коде. – Sinto

Для использования groupHeaderTemplate вы можете использовать настраиваемую функцию для сопоставления значений с соответствующим текстом. Проверьте мой обновленный ответ –

Настройка группыHeaderTemplate для интерфейса Kendo Grid UI

ответ

Смежные вопросы