Category Archives: Kendoui

Pass Kendoui datagrid variable to template that uses Zend Url

Passing a variable from a Kendo Ui datagrid to a custom template on things like edit/delete can be a little tricky, and it gets even harder when Zend encodes the url too.

Basically I had a Kendo Ui Data Grid.

I wanted to create my own edit/delete links for each field rather than make the grid editable.
The trick was to to create a template for the field I wanted to add the links in, then to pass the id of the field to the template.

dataSource: {
  transport: {
   read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
 },
  schema: {
     model: {
        fields: {
          field1:{},
          field2:{},
          field3:{}
        }
    }
},

EDIT: All fields you define in the data-source model will also be available to the template

Here is how I did it

The data grid looked like this:

 $(document).ready(function() {
                $("#grid2").kendoGrid({
                    dataSource: {
                        type: "odata",
                        serverPaging: true,
                        serverSorting: true,
                        pageSize: 100,
                        transport: {
                            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
                        }
                    },
                    height: 280,
                    scrollable: {
                        virtual: true
                    },
                    sortable: true,
                    columns: ["OrderID", 
"CustomerID", 
"ShipName", 
"ShipCity",
{ title: "Manage", 
  field: "OrderID", 
  template: kendo.template($("#template").html())
} ]
                });
            });

The bit that stumped me initially until I realised how obvious it was. Pass the field you want to the template by specifying the “field” (in this case its OrderID) , for some reason I thought it would magically inherit the fields already defined previously, that is not the case.

And here is the template itself: this is all in the view page of the Zend app.
the trick here was to ensure you decode the URL else the id does not get picked up by the javascript

      <script type="text/x-kendo-template" id="template">
       	<a href="<?php echo urldecode($this->url(array('controller'=>'product-type', 'action'=>'edit','id'=>'#= OrderID#')));?>">Edit</a> | 
	<a href="<?php echo urldecode($this->url(array('controller'=>'product-type', 'action'=>'delete','id'=>'#= OrderID#')));?>">Delete</a>

      </script>