$supplier = new \Kendo\UI\GridColumn();
$supplier->field('Supplier')->title("Supplier")->editor('supplierEditor')->template("#: Supplier.SupplierName #");
$category = new \Kendo\UI\GridColumn();
$category->field('Category')->title("Category")->editor('categoryEditor')->template("#: Category.CategoryName #");
$unitPrice = new \Kendo\UI\GridColumn();
$unitPrice->field('UnitPrice')->format('{0:c}')->title('Price');
$unitsInStock = new \Kendo\UI\GridColumn();
$unitsInStock->field('UnitsInStock')->title('Stock');
$edit = new \Kendo\UI\GridColumnCommandItem('edit');
$edit->name('edit');
$destroy = new \Kendo\UI\GridColumnCommandItem('destroy');
$destroy->name('destroy');
$commandColumn = new \Kendo\UI\GridColumn();
$commandColumn->addCommandItem($edit)->addCommandItem($destroy);
$create = new \Kendo\UI\GridToolbarItem('create');
$grid->addToolbarItem($create)->addColumn($productName)->addColumn($supplier)->addColumn($category)->addColumn($unitsInStock)->addColumn($unitPrice)->addColumn($commandColumn)->dataSource($dataSource)->pageable(true)->editable("popup");
?>
<h2>Products</h2>
<p>
A complete CRUD (Create, Read, Update, Delete) demonstration of
the Kendo UI Grid, with custom column templates and pop up editor.
</p>
<?php
echo $grid->render();
?>
<script>
function categoryEditor(container, options) {
$("<input data-text-field='CategoryName' data-value-field='CategoryID' data-bind='value:" + options.field + "' />")
