Develop Reference

Display Custom Boolean Value in Angular ui-grid

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

(Google Tag Manager) GTM enhanced ecommerce checkout steps not tracking

I've implemented GTM on an ecommerce site and have some tags set up for a few thins (page impressions, add to cart etc.) These all work and track in Analytics as expected however I've now added the checkout funnel pushes and these are firing but not tracking.
Data flow is basically:
User Visits Cart Page >> Step 1 dataLayer.push request >> Console shows Checkout Tag has fired >> Data doesn't show up in analytics.
An example of this dataLayer push event is as follows:
dataLayer.push({
'event' : 'checkout',
'ecommerce' : {
'currencyCode' : 'GBP',
'checkout' : {
'actionField' : {'step' : 1},
'products' : [
{
'name' : '"Some product name"',
'id' : '55',
'price' : '35',
'quantity' : 1
}
]
}
}
});
It looks like the problem is more likely a setup issue with GTM so I've included the current settings I have for the Checkout Tag:
Tag Type - Universal Analytics
Tracking ID - {{ Tracking-ID }}
Track Type - Event
Category - Ecommerce
Action - Checkout
Enable Enhanced Ecommerce Features - True
Use data layer - True

After some trial and error deleting the tag from GTM and re-adding it solves the issue.
I'm not really sure why this is. It's also worth noting if using the dataLayer.push() method included on page load (rather than attached to an action) it can fire before GTM is ready which may lose data. Instead wrap it in a $(document).ready (if you're using jQuery)

String vs Integer
Quantity is an Integer type, you have string type.
https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#ecommerce-data
dataLayer.push({
'event' : 'checkout',
'ecommerce' : {
'currencyCode' : 'GBP',
'checkout' : {
'actionField' : {'step' : 1},
'products' : [
{
'name' : '"Some product name"',
'id' : '55',
'price' : '35',
'quantity' : 1
}
]
}
}
});

The following works absolutely fine for me, may be try adding 'option' with your step
dataLayer.push({
'event': 'checkout',
'ecommerce': {
'checkout': {
'actionField': {'step': 1, 'option': 'Billing Address'},
'products': [{
'name': 'Sony VAIO',
'id': 'VGN-TXN27N/B',
'price': '2494.22',
'category': 'Peripherals',
'quantity': '1'
}]
}
},
'eventCallback': function() {
//document.location = 'checkout.html';
}
});
Here is the GTM settings

Execute scripts AJAX returns

TIP: "you could simple send an json object / array from php to js, and execute every entry like "update_match('1');" using the eval() function, please stop sending js code that way"- Lucian Depold.
In the index.php, I have this code, which executes when the document is ready:
$.post('php/main.php', {elements: 1}, function(return_msg) {
alert(return_msg);
});
The respond I get is a bunch of scripts, as expected, with the expected values. However, they do not execute! How to make them execute?
Here is the response:
<script>jsfunction(37069);</script><script>updateTextbox('');</script><script>update_match('1', '19.30 Friday 15/5', '1');</script><script>update_player('1', '1', 'recoba', 'cmf', 'teo', '0', '0');</script><script>update_player('1', '2', 'nesta', 'cb', 'tsoulou', '0', '0');</script><script>update_player('1', '3', 'raul', 'cf', 'striker', '0', '0');</script><script>update_player('1', '4', 'samuel', 'cb', 'mafia', '', '1');</script><script>update_player('1', '5', 'deisler', 'cmf', 'free_kick', '1', '');</script><script>update_player('1', '6', 'ferdinard', 'cb', 'strong', '1', '');</script><script>update_match('2', 'Match 2', '0');</script>
When I had the PHP code that produced these scripts in the bottom of the index.php, all the js functions where called correctly. Because of this question though, I had to move the code to another .php file.

Do it this way:
In PHP...
$arrayOfCalls = array();
$arrayOfCalls[]="update_match('1')";
$arrayOfCalls[]="update_match('2')";
$dummy = array();
$dummy['calls'] =$arrayOfCalls;
echo json_encode($dummy);
And in Javascript...
$.post('php/main.php', {elements: 1}, function(return_json) {
return_json = JSON.parse(return_json);
return_json.calls.forEach(function(code){
eval(code);
})
});

You can append the result to your page :
$.post('php/main.php', {elements: 1}, function(return_msg) {
$('body').append(return_msg);
});
The code will be executed but I'm not sure if it's safe to do that.

The date delivered by the AJAX call is just data - or text. In order to interpret that as JavaScript, you must append it to the dom.
Two ways:
first, by appending the data directly:
$.post('php/main.php', {elements: 1}, function(return_msg) {
alert(return_msg);
$('body').append(return_msg);
});
but there's also a shorthand method:
$.getScript('php/main.php?elements=' + 1, function () {
// script loaded
});
Please read the docs, there are some caveats!

Dynamically Update Radio inputValue (EXT JS 4.2.1)

I am creating a radiogroup and when it's created, I set the "inputValue" to set the value of the field. For the first radio button, inputValue is set to 'I' (for in) and 'O' (for out) is set for the second radio button.
If someone clicks the "OUT" radio, then a window pops up and asks them to choose a value from a combo box. The possible values there are 'F', 'R' or 'T' and if they select one of those, I'd like to modify the 'OUT' inputValue to reflect that. So when the form is submitted, it should, for example, send back 'F' instead of 'O'.
Here is the code for the radio buttons:
items: [
{
xtype: 'container',
defaultType: 'radiofield',
allowBlank: false,
blankText: 'Required',
hideLabel: true,
layout: 'hbox',
items: [
{
xtype: 'radiofield',
boxLabel: 'IN',
name: 'susceptible_populations_1',
width: 50,
padding: '2 0 0 10',
checked: true,
inputValue: 'I',
id: 'susceptible_populations_1_in'
},
{
xtype: 'radiofield',
boxLabel: 'OUT',
name: 'susceptible_populations_1',
width: 115,
padding: '2 0 0 10',
inputValue: 'O',
id: 'susceptible_populations_1_out',
listeners: {
click: {
element: 'el',
fn: function() {
show_popup_window('susceptible_populations_1_out', '9A(5)');
}
}
}
}
]
}
]
I have Googled around and found a couple of solutions, but none of them seem to work for me. All of them still return 'O' when I submit the form.
Here are some definitions for my popup window:
FIELD_NAME is passed as the first parameter to the function. In this instance it is 'susceptible_populations_1_out'
TRUNCATED_FIELD_NAME is the same as above, except the '_out' has been removed. In this instance, it is 'susceptible_populations_1'. This is the name of the field that actually gets returned with my form post.
record is the value of the combo box. For this example, we can use the letter 'F'.
Here are some of the examples I am trying:
Ext.getCmp(FIELD_NAME).setValue(record);
This appears to set the value of the radio to true. The value should have already been set to true when I clicked on it, so this is redundant and doesn't change the inputValue to 'F'
Ext.get(FIELD_NAME).set({inputValue:record});
This appears to do nothing that I can tell. I'm guessing that it's because to set something, the set needs a current name AND value and just sets that instance to true when it makes a match. This is not what I'm attempting to do.
var temp = Ext.get(Ext.ComponentQuery.query('[name=' + TRUNCATED_FIELD_NAME + ']')).getValue().elements[1];
Ext.get(temp).set({value:record});
Here I am attempting to access the element directly and it doesn't seem to do anything either. I've tried many different combinations of the preceeding code snippets also, (including replacing FIELD_NAME with TRUNCATED_FIELD_NAME in the above examples), but the value of the radio always comes back as 'O'.
In Sencha Touch, there seems to be a setGroupValue, but I couldn't find that in the EXT JS 4 docs anywhere. (Although getGroupValue works as expected.)
Can someone please give me some guidance on this?
Thanks so much!

you can set the config property later at any time
Ext.getCmp(FIELD_NAME).inputValue = 'F'
only notice that getCmp with static ids should not be used, instead use ComponentQuery and itemId.

Extjs 4 gridrow draws blank after model save

I have a couple of grids, divided in an accordion layout. They basicly show the same kind of data so an grouped grid should do the trick, however it looks really good this way and so far it works good too.
Left of the grids there is a form panel which is used to edit grid records, when I click on a record in the grid the appropriate data shows up in the form. I can edit the data, but when I click the save button, which triggers an 'model'.save() action, the related grid row draws blank and a dirty flag appears. I checked the model and the 'data' attribute doesn't contain any data but the id, the data is present in the 'modified' attribute.
I read that the red dirty flag means that the data isn't persisted in the back-end, but in this case it is. The request returns with a 200 status code and success : true.
The onSave method from the controller:
onSave : function() {
// Get reference to the form
var stepForm = this.getStepForm();
this.activeRecord.set( stepForm.getForm().getValues() );
this.activeRecord.save();
console.log( this.activeRecord );
}
The step store:
Ext.define( 'Bedrijfsplan.store.Steps', {
extend : 'Ext.data.Store',
require : 'Bedrijfsplan.model.Step',
model : 'Bedrijfsplan.model.Step',
autoSync : true,
proxy : {
type : 'rest',
url : 'steps',
reader : {
type : 'json',
root : 'steps'
},
writer : {
type : 'json',
writeAllFields : false,
root : 'steps'
}
}
} );
Step model:
Ext.define( 'Bedrijfsplan.model.Step', {
extend : 'Ext.data.Model',
fields : [ 'id', 'section_id', 'title', 'information', 'content', 'feedback' ],
proxy : {
type : 'rest',
url : 'steps',
successProperty : 'success'
}
} );
Step grid
Ext.define( 'Bedrijfsplan.view.step.Grid', {
extend : 'Ext.grid.Panel',
alias : 'widget.stepsgrid',
hideHeaders : true,
border : false,
columns : [ {
header : 'Titel',
dataIndex : 'title',
flex : 1
} ]
} );
I spend a couple of hours searching and trying, but I still haven't found the solution. Some help on this matter would be appreciated :)

Your model updating code:
this.activeRecord.set( stepForm.getForm().getValues() );
Should work, but I might try splitting it into two lines and setting a breakpoint to verify that getValues() is returning what you're expecting.
Also ensure that you have the name attribute set for each field in your form and that it matches exactly to the names of fields in your model.
Finally, it's better to call .sync() on the store rather than .save() on the model when you're working with a model that belongs to a store. They option autoSync: true on the store will make this happen automatically each time you make a valid update to one of its models.
The BasicForm.loadRecord and BasicForm.updateRecord methods provide a nice wrapper around the functionality you're seeking that may work better:
onRowSelected: function(activeRecord) {
stepForm.getForm().loadRecord(activeRecord);
}
onSaveClick: function() {
var activeRecord = stepForm.getForm().getRecord();
stepForm.getForm().updateRecord(activeRecord);
activeRecord.store.sync();
}

The only oddity I see is with your: this.activeRecord.set( stepForm.getForm().getValues() );
I've always used .set() on the store never on the record. e.g.:
myDataStore.set( stepForm.getForm().getValues() );