Grid

Zellentemplate

// kendoTemplate
<script type="text/x-kendo-template" id="kendo-template">
  <div>#=Name#</div>
</script>

<script>
// create kendoGrid object
function LoadData() {
  $("#grid").kendoGrid({
    dataSource: dataSource,
    columns: [
      { title: "Email", field: "Email", template: '<a href="mailto:#=Email#">#=Email#</a>' },
      { title: "Name", field: "Name", template: kendo.template($("#kendo-template").html()) },
      { title: "First Name", field: "FName", template: '#=Getvalue(FName)#' }
    ]
  });
}
</script>

 

Zellentemplate mit MVVM

<!-- MVVM grid-object -->
<div id="ab-grid" data-role="grid" data-bind="source: data" data-columns='[
  {"title": "columnTitle", "field": "dataField", "template": "#=templateFunction(data)#"}]'>
</div>

<script type="text/x-kendo-template" id="kendo-template">
  Content of my template.
</script>

<script type="text/javascript">
templateFunction = function(data){
  return kendo.Template.compile($("#kendo-template").html())(data);
}

// kendo MVVM initializing

</script>

 

Toolbar & MVVM

Die Grid Toolbar wird beim initialisieren nicht zum kendo ViewModel hinzugefügt. Entpsrechend werden keine data-bind’s ausgeführt. Um dieses Problem zu beheben, kann die Toolbar nachträglich noch an das ViewModel gebunden werden.

kendo.bind($(document.body), viewModel);
kendo.bind($("#grid").find(".k-grid-toolbar"), viewModel);

 

Spezifische Datenobjekte auslesen

// get dataSource of grid
var grid = $('#grid').data('kendoGrid');

// get current selection (depends on grid settings)
rowSelection = grid.select();
cellSelection = grid.select().closest('tr');

// get entry by row
var rowData = grid.dataItem(rowSelection);

// get entry by cell
var rowDataByCell = grid.dataItem(cellSelection)

 

Datenindex der gewählten Zelle abfragen

Über die Funktion .index() kann die Position des referenzierten Elements innerhalb der Datenquelle abgefragt werden.

// get data ID if cell selection is enabled
var grid = $("#ab-grid").data("kendoGrid");
var cell = grid.select();

var dataArrayID = cell.closest('tr').index();