I am new to angularjs, I want to create grid with status icons.
Constant Code:
segment: {
type: 'segment',
name: 'segment',
contextKey: '',
innerLists: [],
foreignKey: 'segmentId',
title: 'name',
metaData: [{
key: 'id',
text: 'ID'
}, {
key: 'name',
text: 'Name'
}, {
key: 'segmentType',
text: 'Segment Type',
isSortable: false
}, {
key: 'status',
text: 'Status',
isSortable: false
}]
}
Controller Code:
function dataManipulator(data) {
//add property for the central display
data.forEach(function(entity) {
if (entity.segment != null) {
// status
var active = entity.segment.active;
if (active != null) {
if (active == true)
entity.status = 'Active';
else if (active == false)
entity.status = 'InActive';
}
entity.segmentType = angular.element('<img src="http://i.imgur.com/945LPEw.png" />');
});
}
Problem: I am getting the following error
"Error: [$parse:isecdom] Referencing DOM nodes in Angular expressions is disallowed! Expression: getInnerField(item, col)"
I need solution for this issue, without using ng-grid. Appreciate your inputs.
Related
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.
I am trying to set rows editable/not editable based on a flag in the data.
I can get this working outside an angular 1.5 component, but can't seem to access row.entity inside a controller in a component.
function memberDisplayCtrl ($scope, memberFactory,uiGridConstants) {
var ctrl = this;
ctrl.people = memberFactory.getMembers();
ctrl.checkStatus = function(ctrl){
// How do I do something like this:
// if (ctrl.row.entity.Status === 'Y') { return 'true'; } else {return 'false';}
};
ctrl.gridOptions = {
enableSorting: true,
enableCellEdit:false,
cellEditableCondition: ctrl.checkStatus(ctrl),
enableHorizontalScrollbar : 0,
enableVerticalScrollbar : 0,
enableColumnMenus: false,
minRowsToShow: ctrl.people.length,
columnDefs: [
{ displayName:'First Name', name: 'fname', enableCellEdit:true },
{ displayName:'Last Name', name: 'lname', enableCellEdit:true },
{ displayName:'Date of Birth', name: 'DOB', type:'date', enableCellEdit:true, cellFilter: 'date:"yyyy-MM-dd"'},
{ displayName:'Address', name: 'address', enableCellEdit:true},
{ displayName:'Status',name: 'Status', enableCellEdit: true}
],
data : ctrl.people
};
}
I'm pretty sure I have a scope problem but can't seem to figure it out. How do I access row.entity? I have an isolated scope inside my controller (since it is part of a component)
plunker here: https://plnkr.co/edit/Wz7gKs
Thanks
just pass a function to cellEditableCondition instead of executing it:
cellEditableCondition: ctrl.checkStatus
and note, that parameter received by that function is not current controller's this (aliased in your case as ctrl), but ui-grid's scope, so I renamed ctrl to scope:
function memberDisplayCtrl ($scope, memberFactory,uiGridConstants) {
var ctrl = this;
ctrl.people = memberFactory.getMembers();
ctrl.checkStatus = function(scope) {
return scope.row.entity.Status === 'Y'
};
ctrl.gridOptions = {
enableSorting: true,
enableCellEdit:false,
cellEditableCondition: ctrl.checkStatus,
enableHorizontalScrollbar : 0,
enableVerticalScrollbar : 0,
enableColumnMenus: false,
minRowsToShow: ctrl.people.length,
columnDefs: [
{ displayName:'First Name', name: 'fname', enableCellEdit:true },
{ displayName:'Last Name', name: 'lname', enableCellEdit:true },
{ displayName:'Date of Birth', name: 'DOB', type:'date', enableCellEdit:true, cellFilter: 'date:"yyyy-MM-dd"'},
{ displayName:'Address', name: 'address', enableCellEdit:true},
{ displayName:'Status',name: 'Status', enableCellEdit: true}
],
data : ctrl.people
};
}
also, I see your commented code:
if (ctrl.row.entity.Status === 'Y') {
return 'true';
}
else {
return 'false';
}
here you intend to return string variable in both cases which will always evaluated as boolean true, you should return boolean:
if (ctrl.row.entity.Status === 'Y') {
return true;
}
else {
return false;
}
which is equal to much shorter version:
return ctrl.row.entity.Status === 'Y';
plunker: https://plnkr.co/edit/KXbJ40?p=preview
Nested property keys is working fine with default type. But it's not working with the below custom template. Why ?
Here is my fields:
vm.fields = [
{
type: 'editableInput',
key: 'profile.name.firstname',
templateOptions: {
label: 'First Name'
}
},
{
type: 'editableInput',
key: 'profile.name.lastname',
templateOptions: {
label: 'Last Name'
}
}
];
What I expected :
{
"profile": {
"name": {
"firstname": "rajagopal",
"lastname": "subramanian"
}
}
But this is what I get:
{
"profile.name.firstname": "rajagopal",
"profile.name.lastname": "subramanian"
}
My Formly Config:
formlyConfig.setType({
extends: 'input',
template: '<div><span editable-text="model[options.key]" e-name="{{::id}}"}}">{{ model[options.key] || "empty" }}</span></div>',
name: 'editableInput'
});
Here is JSBIN
Thanks in advance.
The issue is with how nested keys work with angular-formly. Basically it only works with elements that have an ng-model. The work around for you is to use the model property, and not nested keys (like this):
{
type: 'editableInput',
model: 'model.profile.name',
key: 'firstname',
templateOptions: {
label: 'First Name',
placeholder: 'Enter your First Name'
}
},
{
type: 'editableInput',
model: 'model.profile.name',
key: 'lastname',
templateOptions: {
label: 'Last Name',
placeholder: 'Enter your First Name'
}
}
Good luck!
profile.name.firstname - > profile[name][firstname]
It's my imagine.I have never used Angular
I've got a datagrid configured as follows:
<script>
angular.module("KendoDemos", [ "kendo.directives" ]);
function MyCtrl($scope) {
$scope.mainGridOptions = {
dataSource: {
transport: {
read: {
url: "http://localhost:8090/rest/mycodeapi/Salesman?app_name=mycode&fields=FirstName%2C%20LastName&include_count=true",
dataType : 'jsonp',
type: 'GET',
beforeSend: function (req) {
req.setRequestHeader('Authorization', 'b3pilsnuhsppon2qmcmsf7uvj6')
}
},
parameterMap: function(data, type) {
if (type == "read") {
// send take as "$top" and skip as "$skip"
return {
order: data.sort[0]['field'] + ' ' + data.sort[0]['dir'],
limit: data.pageSize,
offset: data.skip
};
}
}
},
schema: {
data : 'record',
total: 'meta.count'
},
pageSize: 5,
serverPaging: true,
serverSorting: true,
sort: { field: "SalesmanID", dir: "asc" }
},
sortable: true,
pageable: true,
mobile: 'phone',
columns: [{
field: "FirstName",
title: "First Name"
},{
field: "LastName",
title: "Last Name"
}]
};
}
</script>
Problem is: on 1st click of the any column, say FirstName, it sorts by ascending order which is fine.
On 2nd click it sorts by descending: still the expected behaviour.
On the 3rd click however, nothing happens and the console reveals "Uncaught TypeError: Cannot read property 'field' of undefined ". This means something happens to the data.sort array after the 2nd consecutive click.
Would appreciate any pointers.
On third click the sorting is removed. You can modify your script like following:
if (type == "read") {
var params = {
limit: data.pageSize,
offset: data.skip
};
if (data.sort && data.sort.length > 0)
params.order = data.sort[0]['field'] + ' ' + data.sort[0]['dir'];
return params;
}
I know this is a bit late, but I was facing the same challenge, and this is what I did to resolve the issue.
Change
sortable: true,
to
sortable: {
allowUnsort: false
},
I am using Kendo UI with Angular/Breeze. I have an editable grid with one column being a drop-down menu. Everything works fine until the save happens. The problem is my odata call is expecting:
Id(guid), Name, Description, CategoryId(guid)
When the drop-down is changed it triggers a save command and sends back like this:
Id(guid), Name, Description, Category(categoryId, Name, Desc)
Where and How do I make the grid send back only the `categoryId instead of the whole category object?
vm.columns = [
{ field: 'name', title: 'name' },
{ field: 'desc', title: 'description' },
{
field: 'categoryId',
title: 'group',
template: getCategory,
editor: categoryDropDown
}
];
function categoryDropDown(container, options) {
$('<input data-text-field="categoryName" data-value-field="categoryId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "categoryName",
dataValueField: "categoryId",
dataSource: vm.categories
});
}
function getCategory(item) {
for (var i = 0, length = vm.category; i < length; i++) {
console.log(vm.categories[i].categoryId);
if (vm.categories[i].categoryId === item.categoryId) {
return vm.categories[i].categoryName;
}
}
return '';
}
Here is the schema for the main datasource:
schema: {
model: {
id: 'Id',
fields: {
categoryName: { editable: true },
categoryDesc: { editable: true },
categoryId: { editable: true }
}
}
}
valuePrimitive was the missing key
function categoryDropDown(container, options) {
$('<input data-text-field="categoryName" data-value-field="categoryId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "categoryName",
dataValueField: "categoryId",
dataSource: vm.categories,
valuePrimitive: true
});
}