i'm using the ng-grid now and want the column to be displayed in different color according to different value, i've tried..but not success....
$scope.gridOptions = {
........
columnDefs: [
{ field: "status", displayName: "Status", width:150,cellClass:"status" },
{ field: "",displayName: "Actions",cellClass: "actions",cellTemplate: "<a>xxxx....xxx</a>"}]
};
the status has two value, success or failed, and how can i set the success to green and failed to red, that means set the cellClass dynamic.
Thank you very much!
not sure how to achieve this with cellClass attribute. You could add cellTemplate to your status row add your styles with ngClass and do something like this:
<div ng-class='status ? "success":"failed"'></div>
greetings
Related
I have a grid with three numberfield widgetcolumn. Whenever I am changing the column A, I want column B and column C get change and and disable based on some backend response.
I have a couple of doubt here,
how to change the number and disable of column B and Column C because onchange is not disableing. So I am using onwidgetAttach which is firing on
on change. But here the problem is suppose if there is 1000 records, it is getting fier by 1000 times. AlsoIf i remove any record it is not working correctly.
Here si my code.
onWidgetAttachColumnB : function(column, widget){
_this.getCommonService().fetchDetails(options).then({
success: function (response){
widget.setValue(response.value);
widget.setDisabled(response.disable);
}
})
}
onWidgetAttachColumnC : function(column, widget){
_this.getCommonService().fetchDetails(options).then({
success: function (response){
widget.setValue(response.value);
widget.setDisabled(response.disable);
}
})
}
Any work around.
There are different ways to do that, each of them has advantages and disadvantages. To change column B and C depend on values of column A you can use calculated model fields:
Ext.define('TheModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'fieldA',
type: 'int'
}, {
name: 'fieldB',
calculate: function (data) {
return Math.pow(data.fieldA, 2);
}
}, {
name: 'fieldC',
calculate: function (data) {
return Math.pow(data.fieldA, 3);
}
}, ]
});
To disabled columns depend on "some backend response" you can put in the model "invisible" filed which will not be listed in the grid column model and will come from backend and use this field value to disabled/enable columns.
In the followin fiddle sample I disabled the column from renderer function: fiddle link
I've created a Stacked bar chart with Kendo ui, here: http://jsfiddle.net/Came19xx/t06zq2nr/4/
my problem is that chart put values not in order.
In my Datasource, i have an "open" and a "suspended" value, like that:
var data2 = [{"name":"abc","num":1,"state":"open"},
{"name":"abc","num":1,"state":"suspended"},
{"name":"def","num":2,"state":"open"},
{"name":"def","num":5,"state":"suspended"},
{"name":"ghi","num":3,"state":"open"},
{"name":"ghi","num":21,"state":"suspended"},
{"name":"jkl","num":4,"state":"open"},
{"name":"jkl","num":9,"state":"suspended"},
{"name":"mno","num":5,"state":"open"},
{"name":"mno","num":5,"state":"suspended"},
{"name":"pqr","num":6,"state":"open"},
{"name":"pqr","num":14,"state":"suspended"},
{"name":"stu","num":7,"state":"open"},
{"name":"stu","num":6,"state":"suspended"},
{"name":"vwxyz","num":8,"state":"open"},
{"name":"vwxyz","num":5,"state":"suspended"}];
So i grouped by state the datasource, but i don't get the open value corresponding to the name on the barchart and i can't sort it by name cause it will stop working.
For example, i want that abc is in the first line, with 1 in the left side (orange) of the stacked bar and 2 on the right side (red), instead i got vwxyz with the correct suspended value (5) and the wrong open value (3 instead of 8)
the "name" field and the "num" field may can change their value.
Try adding name as a sort field on the datasource:
dataSource: {
data: data2,
group: [{
field: "state",
dir: "desc"
}],
sort: {
field: "name",
dir: "asc"
}
}
Updated FIDDLE
Ok, I'm new to angular and angular ui-grid.
I'm using angularjs(v1.4) with angular-ui-grid(v3.0.7).
I have defined a grid as below
seec.gridOptions = {};
seec.gridOptions.rowEditWaitInterval = -1;
seec.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
};
seec.gridOptions.columnDefs = [
{name: 'pouch', displayName: 'Pouch', enableCellEdit: false, enableHiding: false, width: 250},
{name: 'content', displayName: 'Content', enableHiding: false, width: 150},
{
name: 'units',
displayName: 'Number of Items',
type: 'number',
enableHiding: false,
width: 150
},
{name: 'active', displayName: 'Status', type: 'boolean', enableHiding: false, width: 150}
];
The controller basically makes a http call and feeds data to the grid.
if (response.status === 200) {
seec.gridOptions.data = angular.copy(seec.data);
}
Currently, the last item in the grid is being displayed as either 'true' or 'false' based on the boolean field value., and when I double click on the field a checkbox appears.
So, I need to display true as 'active' and false as 'inactive'.
Is there any way of doing this with angular ui-grid?
There certainly is! One approach could be to use a cellTemplate and map your rowvalues to something different.
I created a Plunkr showcasing a possible setup.
There are two steps to take. First add a cellTemplate to your column:
cellTemplate: "<div ng-bind='grid.appScope.mapValue(row)'></div>"
Note: Instead of ng-bind you could also use "<div>{{grid.appScope.mapValue(row)}}</div>", if you are more familiar with that.
Second step is to define your mapping function, for example:
appScopeProvider: {
mapValue: function(row) {
// console.log(row);
return row.entity.active ? 'active' : 'inactive';
},
}
#CMR thanks for including the Plunkr. As I was looking at it I checked, and in this case it seems overkill to have the mapValue function.
This worked for me:
cellTemplate: "<div class='ui-grid-cell-contents'>{{row.entity.active ? 'active' : 'inactive'}}</div>"
(I added the class in there to match the other cells). I will say that this still smells a little hacky to me.
This question leads to using a function as the field itself: In ui-grid, I want to use a function for the colDef's field property. How can I pass in another function as a parameter to it?
I'd still like to see an answer with the logic directly in the columnDefs.
You can use angular filter specifying in your columnDef for a column cellFilters : 'yourfiltername:args'.
args can be a variable or a value, in that case pay attention to use right quoting. if args is a string cellFilters : 'yourfiltername:"active"'
Your filter can be directly a function or a filter name. Here a plunkr
I have following config foo column in grid:
field:
actionName: {
editable: true,
nullable: true,
defaultValue: {"name" : "TEST123"},
type: "object"
},
Column:
{
field :"actionName",
title : $translate.instant('ACTIONNAME'),
width: "200px",
editor: GlobalHelperService.getActionNamesListForAutocomplete,
template: '#: data.actionName.name #',
filterable: { cell: { operator:"contains"
}
}
},
Which works almost fine, but if i clicked on cell item i always got following value (see. image below), instead of the text defined in template attribute.
How can i solve it please?
Many thanks for any advice.
It might not be the cleanest way, but you could use the edit event like I do in this blog post.
$("#grid").kendoGrid({
edit: onEdit
});
function onEdit(editEvent) {
// Ignore edits of existing rows.
if(!editEvent.model.isNew()) { return; }
editEvent.model.set("actionName", {name: "TEST123"});
}
Although as I note in that post, setting the default value with .set() might not work in this case, and you might need to edit the text in the edit box directly:
editEvent.container
.find("[name=actionName]")
.val("TEST123")
.trigger("change");
Good day, i have a grid with boolean column:
var grid = Ext.create('Ext.grid.Panel', {
...
columns: [{
dataIndex: 'visibleForUser',
text: 'Visible',
editor: {
xtype: 'checkboxfield',
inputValue: 1 // <-- this option has no effect
}
},
...
Grid's store is remote via JSON proxy. When i save or update row, the resulting JSON
look like:
{... visibleForUser: false, ... }
As you see, ExtJS serializes checkbox value as true or false JSON terms.
I need to customize this and serialize to, say, 1 and 0, any suggestion how to accomplish this ? Thank you.
I've just changed my checkboxes system-wide to always act/respond to 0 and 1:
Ext.onReady(function(){
// Set the values of checkboxes to 1 (true) or 0 (false),
// so they work with json and SQL's BOOL field type
Ext.override(Ext.form.field.Checkbox, {
inputValue: '1',
uncheckedValue: '0'
});
});
But you can just add this configs per checkbox.
Ext JS 4.1.1 has a new serialize config on record fields. When a writer is preparing the record data, the serialize method is called to produce the output value instead of just taking the actual field value. So you could do something like this:
fields: [{
name: "visibleForUser",
type: "boolean",
serialize: function(v){
return v ? 1 : 0;
}
/* other fields */
}]
I try to avoid overriding default component behavior whenever possible. As I mentioned, this only works in 4.1.1 (it was introduced in 4.1.0 but I believe it was broken). So if you're using an earlier version, one of the other answers would suit you better.
You can try to override getValue
Ext.define('Ext.form.field.Checkbox', {
override : 'Ext.form.field.Checkbox',
getValue: function () {
return this.checked ? 1 : 0;
}
});