AngularJS - Concatenate fields in ng-grid column not working - javascript

I am working on a site employing ajgularjs that will display data returning from a web api call in an ng-grid display. Earlier problems with the data not displaying after the $http.get were remedied through a service call such as:
services.factory('Filing', ['$resource',
function($resource) {
return $resource('/api/bills');
}]);
I have a need on the ng-grid to concatenate the values of three data columns to display in a single ng-grid column, and this is not working.
On Google's angular site I found a similar question to call a function to resolve the concatenation, so in trying this I came up with the following in my controller .js file:
$scope.billData= Filing.query(); // from services.js
$scope.gridData = $scope.billData;
$scope.gridDefs = [
{ field: 'billNumberColumnDisplay()', displayName: 'Bill' },
{ field: 'AuthorLastName', displayName: 'Author'},
{ field: 'Status', displayName: 'Status'},
{ field: 'Committee', displayName: 'Committee'}
];
$scope.gridOptions = {
data: 'gridData',
columnDefs: 'gridDefs',
enableColumnResize: true,
multiSelect: false
};
//function to concatenate the bill number fields
angular.forEach($scope.gridData, function(row) {
row.billNumberColumnDisplay = function() {
return this.BillId.Chamber + this.BillId.Type.trim() + ' ' + this.BillId.Suffix.replace(/^0+(?!\.|$)/, '');
};
});
The second, third, and fourth columns display just fine, so it's not that the data isn't being returned to the grid. If I just display a single column from my return /api call it also displays in the first column.
So, is there anyone out there who can point me in the right direction here? I wouldn't think concatenating fields would pose such a difficult task, but I am obviously doing something wrong.
Thank you in advance for any assistance,
Dan

Related

Tabulator field - Show Different Value

I would like to display field value as character, but underlying data as number, so when i do search query, i am able to utilize numeric data, instead of displayed data.
example
{ title: 'Plant' , field: 'plant.name'},
But required
{ title: 'Plant' , field [ex: search-column]: 'plant.id' , field [ex: display]:'plant.name' },
Ahhh. coming back to tabulator after long time, it totally skipped my mind 🧠.
here is the solution
{ title: 'Plant' , field: 'plant.id',
formatter:function(cell){
// This is eager loaded data in Laravel
return cell.getRow().getData().plant.title;
}
},
Now , in you query, you can search relationship with
->orWhereHas('plant', function($q) use($request){
$q->where('title','LIKE',"%$request->search%");
})
I hope this helps out others as well 🙂

Ng2-smart-table - Angular 2 - Columns and same name

Following are the columns of my table, i got just this part of the code
products: {
title: 'Prodotto',
filter: false,
class: "colonneTabella",
width: "15%",
valuePrepareFunction: (products) => {
var output ="";
var outputs = "";
products.forEach(function(item){
output = item.productDescription
/* item.variantList.forEach(function(d){
outputs= d.description;
})*/
})
return output+outputs;
}
},
products: {
title: 'Variante',
filter: false,
class: "colonneTabella",
width: "20%",
valuePrepareFunction: (products) =>
products.forEach(function(item){
item.variantList;
item.variantList.forEach(function(d){
outputs= d.description;
})
return outputs;
})
}
Hi all! I'm in the above situation. I need to get datas from a json starting from the "products" key. The problem is that ng2 smart table doesn't allow columns with the same name. I tried, then, to rename the second column with "product.variantList" but the code doesn't accept dot inside the name. Is there any solution? thanks
There was similar problem reported when code breaks if dash ("-") is used in the key. Same solution will apply when dot (".") appears in the key.
Refer to - Reading out JSON using JavaScript

Using ExpressionProperties to access different model templateOptions

Firstly I would like to say Angular Formly is a fantastic library for novices such as myself. I am not a web developer, however find this library to be intuitive and powerful.
However I do need assistance with use of Expression Properties.
I have a model library which contains library items, for example:
{
"itemId":"STX001",
"title":"Grey Wolf",
"category":"White", etc.
}
{
"itemId":"STX002",
"title":"Noble Black",
"category":"Black", etc.
}
etc.
I also have a formly form which uses ui-select in top field to lookup all values from Library, select one of these (I will call this Item), and then populate remaining fields in the form with Items properties, then submit form to Catalogue model.
The problem I am facing is I cannot reference the properties of Item from within other fields. I have tried using expressionProperties but can only extract the valueProp value (which is uniqueID), however I am after Item.title, Item.category, etc.
Code below:
{
//This is form fields for creating a new Catalogue entry
key: 'libraryId',
type: 'ui-select',
templateOptions: {
label: gettextCatalog.getString('Search Library'),
options: [],
valueProp: 'itemId',
itemTitle: 'title',
itemCategory: 'category',
labelProp: 'title',
focus: true,
placeholder: 'Start typing keywords..'
},
controller: function ($scope) {
getLibrary().then(function(data){
$scope.options.templateOptions.options = data;
return data;
});
}
}
{
key: 'title',
type: 'input',
templateOptions: {
label: gettextCatalog.getString('Name'),
required: true
},
expressionProperties : {
//This is what i'm trying to achieve but doesn't work
'templateOptions.placeholder' : 'model.libraryId.itemTitle'
}
},
Use the call back function provided
expressionPropertyObj = {
'templateOptions.required': (model, formState: any, field: FormlyFieldConfig) => {
console.log('model',model);
console.log('state',formState);
console.log('field',field);
},

Why does this datagrid sort in a weird order?

I have a datagrid where each row has a column where I have defined a formatter to format the display result depending on what it says in the database and create a div with a background color depending on the database.
I have this structure for my datagrid:
structure: [
{
name: "Name",
field: "name",
width: "auto"
},
{
name: "Initials",
field: "initials"
},
{
name: "E-mail",
field: "email",
width: "auto"
},
{
name: "Kerberos",
field: "kerberos",
width: "120px",
formatter: function(kerberos){
var format = "";
if(kerberos == "password expired" || kerberos == "account expired"){
format = '<div class="yellow" title="'+kerberos+'">'+kerberos+'</div>';
}else if(kerberos == "ok"){
format = '<div class="green" title="'+kerberos+'">'+kerberos+'</div>';
}else{
format = '<div class="red" title="Has no kerberos account">not available</div>';
}
return format;
}
},
When I press the column header to sort, it sorts the rows, put not consistent, so I don't know if it sorts correctly (see image below). How do I define the way the datagrid have to sort this column?
I was thinking it was the HTML <div...> part I do in the formatter due to the <> characters, but it still sorts weird if I only output the text (which by my understanding, should be sorted alphabetically). Does anyone know why this happens and how I can fix it?
EDIT:
forgot to add how i get/assign data. I get a lot of data from a xhr.post in JSON format, then i do as follows:
dojo.xhr.post({
url: "/cgi-bin/users.cgi",
handleAs: "json",
content: {
psearch: "dojoXhrBlank"
},
load: function(jsondata){
// Creating a store for the datagrid
var personStore = new Memory({ data: jsondata });
// Create datastore for datagrid
var gridStore = ObjectStore({objectStore: personStore});
...
I found an answer. The problem lies in ObjectStore. This store (for some reason) wont sort properly and after changing the store type to ItemFileReadStore it sortet properly. The other reason for switching store was that ItemFileReadStore also supports the comparatorMap attribute which allows for custom sorting, ObjectStore dose not support this attribute.
solution:
load: function(jsondata){
var store = new ItemFileReadStore({
data: { identifier: "id", items: jsondata }
});
pgrid = new DataGrid({
store: store,
...

Saving the whole EditorGrid with a single Ajax request

I would like to save an ExtJS (3.3.1) editorgrid with a single Ajax request.
I've created an editorgrid, based on an ArrayStore.
var store = new Ext.data.ArrayStore({
data: arrayData,
fields: [ 'id', 'qty', 'idService', 'idSubscription',
'description', 'vat', 'amount' ]
});
[...]
var grid = {
xtype: 'editorgrid',
store: store,
view: gridView,
colModel: colModel,
selModel: selModel,
stripeRows: true,
tbar: tbar,
autoHeight: true,
width: 872,
clicksToEdit: 1
};
I've created a Save button with the following handler:
app.inv.saveButtonHandler = function () {
var myForm = Ext.getCmp("formHeader").getForm();
if (!myForm.isValid()) {
Ext.MessageBox.alert('Form Not Submitted',
'Please complete the form and try again.');
return;
}
myForm.el.mask('Please wait', 'x-mask-loading');
Ext.Ajax.request({
params: {
idCustomer: myForm.findField("idCustomer").getValue(),
issueDate: myForm.findField("issueDate").getValue(),
documentType: myForm.findField("documentType").getValue(),
documentNumber: myForm.findField("documentNumber").getValue()
},
url: 'save-sales-document-action',
method: 'POST',
success: function (response, request) {
myForm.el.unmask();
Ext.MessageBox.alert('Success', 'Returned: ' + response.responseText);
},
failure: function (response, request) {
myForm.el.unmask();
Ext.MessageBox.alert('Failed', 'Returned: ' + response.responseText);
}
});
};
In other words, I can send form elements with a simple value, but I don't know how to send the whole data grid. I would like to send the whole data grid with a single Ajax request.
I've already used before the cell-by-cell saving method, but in this case I would prefer to save the whole grid in one go. I don't need help for the server-side part, that I will do in Java, only for the client-side JavaScript.
Can someone help? Thanks!
After a night sleep and still no answers, I made further tries and I can answer my own question. I will leave the question open anyway, in case someone knows a better way.
To solve my problem, I added the property "storeId: 'gridStore'" to the ArrayStore, so I could locate the store later with Ext.StoreMgr.lookup(), then, at saving time, I proceed to re-build an Array record by record in the following way:
var gridData = new Array();
Ext.storeMgr.lookup('gridStore').each(function (record) {
gridData.push(record.data);
});
The essential part is that I don't get the whole Record, but only the data field of it.
After I've an array with the data, the easy part is add it to the params of Ajax.request:
params: {
...
gridData: Ext.encode(gridData)
},
This finally works. All the data is encoded in a single field. Of course on the server it will have to be decoded.

Categories