Using AngularJS and KendoGrid - angularjs

I am learning AngularJS and trying to use the Telerik KendoGrid in a directive. I have a directive that that will access a service and get some data. Part of the data will be used to populate an observable array in the directive. The html that is associated to that directive has another directive within it that will create a kendoGrid that should be editable. When I click on the update button I get an undefined error and the grid data disappears.
I define my array as follows:
$scope.currentData.event.submissionDates = new kendo.data.ObservableArray([
]);
and on success of call push the data into the array.
the grid is called as follows in the html:
<submission-grid class="grid-16" event="currentData.event" ng-show="currentData.event.eventID"></submission-grid>
This directive calls the following html file:
<div kendo-grid="grid"
k-columns="gridColumns"
k-selectable="true"
k-on-change="selected = data"
k-options ="mainGridOptions "
k-editable ="{'mode': 'inline', 'update': 'true'}"
and the backing js is:
(function () {
angular.module('app.submissionGrid', [])
.directive('submissionGrid', function () {
var ctrlr = function ($scope) {
$scope.gridColumns = [{
field: "SubmissionDueDate",
title: "Due Date",
format: "{0:MM/dd/yyyy}",
width: "100px"
}, {
field: "Source",
title: "Agency",
width: "100px"
}, {
field: "SubmissionFiledDate",
title: "Filed Date",
format: "{0:MM/dd/yyyy}",
width: "100px"
}, {
field: "SeverityCategory",
title: "Severity Category",
width: "100px"
}, { command: ["edit", ], title: " ", width: "200px" }
];
$scope.mainGridOptions = {
dataSource: {
data: $scope.event.submissionDates,
schema: {
model: {
id: "ReportId",
fields: {
SubmissionDueDate: { type: "string" },
Source: { type: "string" },
SubmissionFiledDate: { type: "string" },
SeverityCategory: { type: "string" }
}
}
},
}
}
}
return {
restrict: 'E',
templateUrl: 'App/Event/SubmissionGrid/submissionGrid.html',
controller: ctrlr,
transclude: false,
scope: {
event: '='
}
};
})
})();
Any advice would be appreciated.

Related

How to disable checkbox of a row in kendo grid using javascript function

I have a kendo grid where columns are defined and 2 columns are checkbox type. based on some validation in the comments row data, I want to disable the checkbox of that particular row in the grid.
I have a separate javascript function that I am using for validation but I am not able to disable the checkbox of that row. I am adding both the kendo grid code and the javascript function.
Kendo Grid:
createGrid: function (data) {
$("#ProductGrid").kendoGrid({
dataSource: {
data: tableData
},
columns: [
{ field: "Accept", tilte: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.Accept), "template": "<input type=\"checkbox\" />" },
{ field: "Decline", tilte: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.Decline), "template": "<input type=\"checkbox\" />" },
{ field: "Item", tilte: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.Item) },
{ field: "PartID", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.PartID) },
{ field: "Description", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.Description), width:'300px' },
{ field: "SubPart", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.SubPart) },
{ field: "SubPartDescription", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.SubPartDescription) },
{ field: "BusinessPartner", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.BusinessPartner) },
{ field: "ReqDelTM", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.ReqDelTM) },
{ field: "EarDelTM", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.EarDelTM) },
{ field: "EarDelDate", title: "Ear Del Date", hidden: true },
{ field: "Comments", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.Comments) },
]
});
},
JS Function:
checkComments: function () {
var productGrid = $("#ProductGrid").data("kendoGrid");
var productGridData = productGrid.dataSource;
var noofproduct = productGridData.data().length;
var dataList = productGridData.data();
for (var i = 0; i < noofproduct; i++)
{
if (dataList[i].Comments == "Date not met")
{
(dataList[i].Accept.enable(false));
}
}
}
You can use kendo templates to disable your checkboxes by condition.
var data = [
{disabled: false},
{disabled: true},
{disabled: false}
];
$('#grid').kendoGrid({
dataSource: data,
columns: [{
title: "checkbox",
template: function (item){
return "<input type='checkbox' " + (item.disabled ? 'disabled': '') + ">"}
}]
});
You can try this solution here

Using Custom editors in grid column with Angular Kendo UI

I am trying to use custom editors for an editable kendo ui grid in my angular app.
For some reason( which I am not able to trace) the custom editor is not triggered.
I am expecting the following to be triggered but it does not work.
console.log("Editor Launched", options);
Here is the plunker for the same:
http://plnkr.co/edit/WioRbXA3LHVVRQD95nXA?p=preview
app.controller('MainCtrl', function($scope) {
$scope.model = {};
$scope.model.dataSource = new kendo.data.DataSource({
data: createRandomData(10),
schema: {
model: {
fields: {
City: { type: "string" },
Title: { type: "string" },
BirthDate: { type: "date" },
Age: { type: "number" }
}
}
},
pageSize: 16,
editable:true
});
$scope.addWWNumEditor= function (container, options) {
console.log("Editor Launched", options);
$('<input kendo-numeric-text-box k-min="10" k-max="20" style="width: 100%;" data-bind="value:' + options.field + '"/>')
.appendTo(container);
}
$scope.controlIsDisabled=function(model){
//console.log("model",(model.Age>=50));
var toReturn = (model.Age>50)?"columnDisabled" : "columnActive";
//console.log('to Return',toReturn);
return toReturn;
}
$scope.model.columns = [
{ field: 'City', title: 'City' },
{
field: 'Title',
title: 'Title',
template:'<span style="color:red;">EDITABLE</span><span ng-
class="controlIsDisabled(dataItem)">#=Title#</span>'
},
{
field: 'Age',
title: 'Age',
template:'<span ng-class="controlIsDisabled(dataItem)">#=Age#</span>'
,
editor:$scope.addWWNumEditor
}
];
});
Assuming your Plunkr mirrors your actual code, the primary problem I'm seeing is in your binding of k-columns on the grid element.
You currently have k-columns="{{model.columns}}", but the {{}} are unnecessary here. Changing to k-columns="model.columns" causes your editor function to execute as expected.

KendoUI+AngularJS : Showing dropdown list for an inline editor in a hierarchical nested grid

I am having a hierarchical nested Kendo grid. The parent grid is displaying a list of currency and each currency has a list of allocation. Both grid have a inline editor. Currency has a property 'currencyName' and allocation has a property 'allocationName'. Both these property need to have a kendo dropdownlist editor.
In my solution, I am able to get the drop down for the currencyName, but for allocationName I am getting a textbox. Below is the code:
HTML :
<div kendo-grid="ctrl.currencyKendoGrid" style="margin-top: 2em" k-options="ctrl.currencyGridOptions"></div>
Currency Grid DataSource:
This is being assigned by another parent funds grid. The funds grid has an editable pop-up window, and assigns the currencyKendoGrid it's data source on the edit event as follows.
edit: function (e) {
if (e.model.currencies)
ctrl.currencyKendoGrid.dataSource.data(e.model.currencies);
}
Currency DropDown DataSource:
ctrl.currencyDataSource = new kendo.data.DataSource({
type: "json",
transport: {
read: function (e) {
DataSvc.getCurrencyData().then(function (response) {
e.success(response.data);
});
}
}
});
Allocation DropDown DataSource:
ctrl.allocationsList = [{ allocName: "Cash", allocId: 1 }, { allocName: "Money Market", allocId: 2 }, { allocName: "TBill", allocId: 3 }, { allocName: "FX-Forward", allocId: 4 }];
ctrl.allocationDataSource = new kendo.data.DataSource({
type: "json",
transport: {
read: function (e) {
e.success(ctrl.allocationsList);
}
}
});
Currency Grid Options:
ctrl.currencyGridOptions = {
dataSource: {
schema: {
model: {
fields: {
currency: { type: "string", editable: true }
}
}
}
},
editable: "inline",
toolbar: [{
name: 'create',
text: 'Add Currency',
}],
columns: [
{
field: "currencyName", title: "Currency",
editor: function (container, options) {
$('<input kendo-drop-down-list required k-data-text-field="\'currencyName\'" k-data-value-field="\'currencyName\'" k-data-source="ctrl.currencyDataSource" data-bind="value:' + options.field + '"/>')
.appendTo(container);
}
},
{ command: [{ name: "edit", text: "" }, { name: "destroy", text: "" }], title: " ", width: "250px" }
],
detailInit: detailInitCurrency,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
}
Allocation Grid Options:
function detailInitCurrency(e) {
if (e.data.allocations)
ctrl.selectedCurrencyAllocations = e.data.allocations;
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
transport: {
read: function (e) {
e.success(ctrl.selectedCurrencyAllocations);
},
},
filter: { field: "currencyId", operator: "eq", value: e.data.currencyId },
schema: {
model: {
id: "allocationId",
fields: {
allocationId: { type: "number", editable: false },
allocationName: { type: "string", editable: true },
}
}
}
},
editable: "inline",
toolbar: [{
name: 'create',
text: 'Add Allocation',
}],
columns: [
{
field: "allocationName", title: "Allocation",
editor: function (container, options) {
$('<input kendo-drop-down-list required k-data-text-field="\'currencyName\'" k-data-value-field="\'currencyName\'" k-data-source="ctrl.allocationDataSource" data-bind="value:' + options.field + '"/>')
.appendTo(container);
}
},
{ command: [{ name: "edit", text: "" }, { name: "destroy", text: "" }], title: "", width: "250px" }
]
});
}
Output :
Please feel free to point me out on any code that I may have missed since I have removed a lot of unnecessary code for keeping the problem simple.

AngularJS Kendo UI grid with row filters behaviour

I am using Kendo UI Grid with row filters. i am facing filters options issue. I am using Filterbale.cell.template for filters to display kendo autoComplete.
Issue is as displayed in image autocomplete options are not updating on selecting of one of the filters.
Below is my html
<div ng-controller="VehiclesController" class="my-grid" >
<kendo-grid options="vehiclesGridOption">
</kendo-grid>
</div>
Below is my Controller
$scope.vehiclesGridOption = {
dataSource: {
schema: {
id: "_id",
model: {
fields: {
make: {type: "string"},
model: {type: "string"},
year: {type: "number"}
}
}
},
transport: {
read: function (e) {
vehicleService.vehicles().then(function (response) {
e.success(response);
console.log(response.length);
}).then(function () {
console.log("error happened");
})
}
},
pageSize: 12,
pageSizes: false,
},
sortable: {
mode: "multiple",
allowUnsort: true
},
filterable: {
mode: "row"
},
pageable: {
buttonCount: 5
},
columns: [
{
title: "",
template: '',
width: "3%" // ACTS AS SPACER
},
{
field: "make",
title: "Make",
filterable: {
cell: {
operator: "contains",
template: function (args) {
args.element.kendoAutoComplete({
dataSource: args.dataSource,
dataTextField: "make",
dataValueField: "make",
valuePrimitive: true,
placeholder: "Make",
});
}
}
},
width: "29%",
}, {
field: "model",
filterable: {
cell: {
operator: "contains",
template: function (args) {
console.log(args);
args.element.kendoAutoComplete({
dataSource: args.dataSource,
dataTextField: "model",
dataValueField: "model",
valuePrimitive: true,
placeholder: "Model",
});
}
}
},
title: "Model",
width: "29%",
}, {
field: "year",
title: "Year",
filterable: {
cell: {
template: function (args) {
args.element.kendoAutoComplete({
dataSource: args.dataSource,
dataTextField: "year",
dataValueField: "year",
placeholder: "Year",
suggest: true,
ignoreCase: true,
filter: "gte"
});
}
}
},
width: "29%",
},
{
field: "",
title: "Edit",
template: '<a class=\"k-link text-center grid-edit-btn vehicle-grid-edit-btn\" ui-sref="vehicleDetails({\'id\': \'#=_id #\' })"><span class=\"icon-editpencil icon-grid\"></span></a>',
width: "10%",
}],
};
Below is the Issue if user selects the Make in the first column filter then Model filter should display only selected make models like Honda (make)-> Accord , Civic ..etc but its displaying all unique values irrespective of model filter..
Kendo filter row uses the same dataSource from the grid component, just providing unique values. Since the autocomplete components are initialized when the grid dataSource is empty, they always show all the values.
You can manually filter based on current filter row values.
Firstly, add ids for your coresponding autocomplete components i.e. inside template functions:
args.element.attr('id', 'make');
//<...>
args.element.attr('id', 'model');
//<...>
args.element.attr('id', 'year');
Then add a data bound event to the grid (since autocomplete components do not fire change events when filters are cleared).
$scope.vehiclesGridOption = {
//...
dataBound : function(e) {
setTimeout(function() { //timeout is to make sure value() is already updated
var make = $('#make').data('kendoAutoComplete').value();
if (make) {
$('#model').data('kendoAutoComplete').dataSource.filter({field: 'make', operator: 'eq', value: make });
} else {
$('#model').data('kendoAutoComplete').dataSource.filter({});
}
});
}
}
Or if you also want to filter by "Year" column, it could go like this:
$scope.vehiclesGridOption = {
//...
dataBound: function(e) {
setTimeout(function() { //timeout is to make sure value() is already updated
var make = $('#make').data('kendoAutoComplete').value();
var model = $('#model').data('kendoAutoComplete').value();
if (make) {
$('#model').data('kendoAutoComplete').dataSource.filter({field: 'make', operator: 'eq', value: make });
} else {
$('#model').data('kendoAutoComplete').dataSource.filter({});
}
var yearFilter = {filters: [], logic: 'and'};
if (make) {
yearFilter.filters.push({field: 'make', operator: 'eq', value: make });
}
if (model) {
yearFilter.filters.push({field: 'model', operator: 'eq', value: model });
}
$('#year').data('kendoAutoComplete').dataSource.filter(yearFilter.filters.length ? yearFilter : null);
});
}
}

Kendo UI Grid foreign key column using Angular directives

I'm trying to make a Kendo Grid that has 2 foreign key columns using the Angular directives for Kendo. I am able to get one to work, but not the other (independent of each other). If I comment one out the other will work and vice versa, but either way only one will work. Abbreviated sample code is below.
invoicesController.js
app.controller('invoicesController', [
'$scope', '$rootScope', 'config', 'dataFactory', function($scope, $rootScope, config, dataFactory) {
$rootScope.title = 'Invoices';
$scope.filterCustomers = [];
$scope.filterStatuses = [];
$scope.invoiceGrid = null;
var _refreshCustomers = function () {
dataFactory.get(_.string.format('{0}customers', config.apiUrl)).success(function (result) {
$scope.filterCustomers = _.map(result, function (cust, key) {
return {
text: cust.name,
value: cust.id
}
});
});
};
var _refreshStatuses = function() {
dataFactory.get(_.string.format('{0}invoicestatuses', config.apiUrl)).success(function(result) {
$scope.filterStatuses = _.map(result.data, function(status, key) {
return {
text: status.name,
value: status.id
}
});
_initializeGrid();
});
};
var _refreshData = function () {
_refreshCustomers();
_refreshStatuses();
};
_refreshData();
var _initializeGrid = function() {
$scope.invoiceGrid = {
dataSource: {
transport: {
read: _.string.format('{0}invoices', config.apiUrl),
},
schema: {
data: 'data'
},
pageSize: 15,
sort: { field: 'invoiceDate', dir: 'asc' }
},
columns: [
{ title: 'Subject', field: 'subject', type: 'string', width: '30%'},
{ title: 'Number', field: 'number', width: '12%' },
{ title: 'Customer', field: 'customer.id', values: $scope.filterCustomers, width: '15%' },
{ title: 'Status', field: 'status.id', values: $scope.filterStatuses, width: '14%' },
{ title: 'Total', field: 'invoiceTotal', type: 'number', format: '{0:c2}', width: '10%' },
{
title: 'Updated', field: 'updatedOn', type: 'date', format: '{0:d}', width: '19%',
template: '#=lastUpdated#'
}
],
scrollable: false,
sortable: true,
filterable: true,
pageable: true
};
}
}
]);
dataFactory.js (GET method)
return $http({
url: url,
method: 'GET',
data: data,
});
list.html
<div data-kendo-grid data-k-ng-delay="invoiceGrid" data-k-options="invoiceGrid" class="top"></div>
I was able to get this to work using route resolve.
Basically, when you're defining your routes, you can set resolvers. In this case, I'm resolving customers and statuses which you will also see as arguments on the projectsController
app.js (routing config)
// Projects
$routeProvider.when('/projects', {
templateUrl: '/app/views/projects/list.html',
controller: 'projectsController',
resolve: {
customers: ['customerService', function (customerService) {
return customerService.getCustomers();
}],
statuses: ['projectService', function (projectService) {
return projectService.getStatuses();
}]
}
});
projectsController.js (abbreviated)
app.controller('projectsController', [
'$scope', '$rootScope', 'config', 'customers', 'statuses', function($scope, $rootScope, config, customers, statuses) {
// Set the options from the injected statuses (from the route resolver)
$scope.statusOptions = _.map(statuses.data.data, function(status) {
return { value: status.id, text: status.name }
});
....
// Kendo grid column definition
columns: [
{ title: 'Status', field: 'status.id', values: $scope.statusOptions, width: '15%' },
]
}]);

Resources