× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Creating a basic data grid with Kendo UI and AngularJS

Long Le
Mar 10, 2015
<p>You can also setup a Kendo DataSource as an AngularJS Service using the Factory method and inject this into your Controller to conform to AngularJS best practices and patterns.</p> <p>Full source code and live demo: <a href="http://goo.gl/6Z9jop" rel="nofollow">http://goo.gl/6Z9jop</a></p> <p><strong>Customer.cshtml</strong></p> <pre><code>@{ ViewBag.Title = "Index"; } &lt;div&gt; &lt;h2 ng-cloak&gt;{{title}}&lt;/h2&gt; &lt;div&gt; &lt;div class="demo-section"&gt; &lt;div class="k-content" style="width: 100%"&gt; &lt;div kendo-grid="grid" k-sortable="true" k-pageable="true" k-filterable="true" k-editable="'inline'" k-selectable="true" k-columns='[ { field: "CustomerID", title: "ID", width: "75px" }, { field: "CompanyName", title: "Company"}, { field: "ContactName", title: "Contact" }, { field: "ContactTitle", title: "Title" }, { field: "Address" }, { field: "City" }, { field: "PostalCode" }, { field: "Country" }, { field: "Phone" }, { field: "Fax" }]' &gt; &lt;/div&gt; &lt;style scoped&gt; .toolbar { padding: 15px; float: right; } &lt;/style&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/x-kendo-template" id="toolbar"&gt; &lt;div&gt; &lt;div class="toolbar"&gt; &lt;button kendo-button ng-click="edit(this)"&gt;&lt;span class="k-icon k-i-tick"&gt;&lt;/span&gt;Edit&lt;/button&gt; &lt;button kendo-button ng-click="destroy(this)"&gt;&lt;span class="k-icon k-i-tick"&gt;&lt;/span&gt;Delete&lt;/button&gt; &lt;button kendo-button ng-click="details(this)"&gt;&lt;span class="k-icon k-i-tick"&gt;&lt;/span&gt;Edit Details&lt;/button&gt; &lt;/div&gt; &lt;div class="toolbar" style="display:none"&gt; &lt;button kendo-button ng-click="save(this)"&gt;&lt;span class="k-icon k-i-tick"&gt;&lt;/span&gt;Save&lt;/button&gt; &lt;button kendo-button ng-click="cancel(this)"&gt;&lt;span class="k-icon k-i-tick"&gt;&lt;/span&gt;Cancel&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/script&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>customerController.js</strong></p> <pre><code>'use strict'; northwindApp.controller('customerController', function ($scope, $rootScope, $location, customerDataSource) { customerDataSource.filter({}); // reset filter on dataSource everytime view is loaded var onClick = function (event, delegate) { var grid = event.grid; var selectedRow = grid.select(); var dataItem = grid.dataItem(selectedRow); if (selectedRow.length &gt; 0) { delegate(grid, selectedRow, dataItem); } else { alert("Please select a row."); } }; $scope.toolbarTemplate = kendo.template($("#toolbar").html()); $scope.save = function (e) { onClick(e, function (grid) { grid.saveRow(); $(".toolbar").toggle(); }); }; $scope.cancel = function (e) { onClick(e, function (grid) { grid.cancelRow(); $(".toolbar").toggle(); }); }, $scope.details = function (e) { onClick(e, function (grid, row, dataItem) { $location.url('/customer/edit/' + dataItem.CustomerID); }); }, $scope.edit = function (e) { onClick(e, function (grid, row) { grid.editRow(row); $(".toolbar").toggle(); }); }, $scope.destroy = function (e) { onClick(e, function (grid, row, dataItem) { grid.dataSource.remove(dataItem); grid.dataSource.sync(); }); }, $scope.onChange = function (e) { var grid = e.sender; $rootScope.lastSelectedDataItem = grid.dataItem(grid.select()); }, $scope.dataSource = customerDataSource; $scope.onDataBound = function (e) { // check if there was a row that was selected if ($rootScope.lastSelectedDataItem == null) { return; } var view = this.dataSource.view(); // get all the rows for (var i = 0; i &lt; view.length; i++) { // iterate through rows if (view[i].CustomerID == $rootScope.lastSelectedDataItem.CustomerID) { // find row with the lastSelectedProductd var grid = e.sender; // get the grid grid.select(grid.table.find("tr[data-uid='" + view[i].uid + "']")); // set the selected row break; } } }; }); </code></pre> <p><strong>customerDataSource.js</strong></p> <pre><code>'use strict'; northwindApp.factory('customerDataSource', function (customerModel) { var crudServiceBaseUrl = "/odata/Customer"; return new kendo.data.DataSource({ type: "odata", transport: { read: { async: false, url: crudServiceBaseUrl, dataType: "json" }, update: { url: function (data) { return crudServiceBaseUrl + "(" + data.CustomerID + ")"; }, type: "put", dataType: "json" }, destroy: { url: function (data) { return crudServiceBaseUrl + "(" + data.CustomerID + ")"; }, dataType: "json" } }, batch: false, serverPaging: true, serverSorting: true, serverFiltering: true, pageSize: 10, schema: { data: function (data) { return data.value; }, total: function (data) { return data["odata.count"]; }, model: customerModel }, error: function (e) { alert(e.xhr.responseText); } }); }); </code></pre> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/19430656/Creating%20a%20basic%20data%20grid%20with%20Kendo%20UI%20and%20AngularJS/23547872">Stack Overflow</a>.</p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus