I have a FooTable that gets a part number returned as 3 separate cells. I'd like to combine them into one cell but I'm unsure of how the formatter and parser work for FooTable. my table html is just an empty table, everything is handledin the javascript. How would I go about doing this?
$(document).ready(function() {
jQuery(function($){
$('.table').footable({
"expandFirst": false,
"columns": [
{ "name": "PartID", "title":"PartID", "visible":false },
{"formatter": function(value){
return //I'm thinking this is where the code would go to join the next 3 columns? in the format ##.###.##
}},
{ "name": "PartCategory", "title": "PC" },
{ "name": "PartNumber1", "title": "PN1" },
{ "name": "PartNumber2", "title": "PN2", },
{ "name": "PartName", "title": "Name", },
{ "name": "DescShort", "title": "Description", },
{ "name": "SupplierName", "title": "Supplier", },
{ "name": "SupplierPartNumber", "title": "Supplier Part #", }
],
"rows": $.getJSON("../dist/scripts/testGetParts.php")
});
});
});
You can simply add data-hide="all" to the first two columns of those three:
{ "name": "", "title": "", data-hide="all"},
{ "name": "", "title": "", data-hide="all"},
{ "name": "Part Info", "title": "Part Information" }
Merge those in php (which you are good at) and just show them in here as one col in your dataset and Voila.
The simpler version if you can change the dataset is to not add those columns at all.
Another option if you cannot/don't want to change your server side code is to get the data and change it js and then bind them to rows afterwards.
var rows = $.getJSON("../dist/scripts/testGetParts.php");
foreach(row in rows) {
//merge those cols here in the third one
}
And then:
jQuery(function($){
$('.table').footable({
"expandFirst": false,
"columns": [
{ "name": "PartID", "title":"PartID", "visible":false },
{ "name": "PartCategory", "title": "PC", data-hide="all" },
{ "name": "PartNumber1", "title": "PN1", data-hide="all"},
{ "name": "Part Info", "title": "Part information" },
{ "name": "PartName", "title": "Name", },
{ "name": "DescShort", "title": "Description", },
{ "name": "SupplierName", "title": "Supplier", },
{ "name": "SupplierPartNumber", "title": "Supplier Part #", }
],
"rows": rows
});
});
Not sure how you do it persay in footable, in kendo you would do it like so.
$(document).ready(function() {
jQuery(function($){
$('.table').footable({
"expandFirst": false,
"columns": [
{ "name": "PartID", "title":"PartID", "visible":false },
{ "title":"PartNumber", formatter: function(data){
return data.PartCategory +"."+ data.PartNumber1 +"." + PartNumber2;
}},
{ "name": "PartName", "title": "Name", },
{ "name": "DescShort", "title": "Description", },
{ "name": "SupplierName", "title": "Supplier", },
{ "name": "SupplierPartNumber", "title": "Supplier Part #", }
],
"rows": $.getJSON("../dist/scripts/testGetParts.php")
});
});
});
Related
So I have two tables in my database. I want a DataGrid UI to print all my columns except the categoryId I want to print a label instead (like in selection valueOptions) :
const columns: GridColDef = [
{
"field": "title",
"headerName": "Titel",
"width": 350,
"editable": true
},
{
"field": "categoryId",
"headerName": "Kategorie",
"width": 250,
"editable": true,
"type": "singleSelect",
"valueOptions": [
{
"value": "miv560972ynqzk9",
"label": "stuff 1"
},
{
"value": "1t7n08l9tfdwotn",
"label": "stuff 2"
},
]
}
]
const rows: GridRowsProp = [
{
"categoryId": "miv560972ynqzk9",
"title": "Lineare Algebra Hausaufga",
},
{
"categoryId": "1t7n08l9tfdwotn",
"title": "Test",
},
]
So I want something like this:
const rows: GridRowsProp = [
{
"categoryId": { value:"miv560972ynqzk9", label: "stuff1"},
"title": "Lineare Algebra Hausaufga",
},
{
"categoryId": { value: "1t7n08l9tfdwotn", label: "stuff2" },
"title": "Test",
},
]
$scope.html = [{
"name": "teste",
"data": [{
"tag": {
"name": "h1",
"text": "Titulo 1",
"colValue": "col-xs-12"
}
}, {
"tag": {
"name": "text",
"colValue": "col-xs-4"
}
}, {
"tag": {
"name": "h1",
"text": "Titulo 2",
"colValue": "col-xs-12"
}
}, {
"tag": {
"name": "text",
"colValue": "col-xs-4"
}
}, {
"tag": {
"name": "text",
"colValue": "col-xs-8"
}
}]
}, {
"name": "teste",
"data": [{
"tag": {
"name": "h1",
"text": "Titulo 3",
"colValue": ""
}
}, {
"tag": {
"name": "text",
"colValue": "col-xs-4"
}
}]
}];
I having some issues creating a dynamically form using javascript (angular) and bootstrap. The idea is to create dynamically the html tags.
My issue: h1 is not rendering properly when h1 > 1, it's not jumping to next line.
First take a look here: http://jsfiddle.net/92z54z04/951/
It needs to be like this way:
Add class=col-xs-12 to the inner ng-repeat:
<div class="col-xs-12" ng-repeat="(i, t) in h.data">
http://jsfiddle.net/92z54z04/957/
I am have some trouble with a script I am working on. I have been provided with an object with multiple items from a product catalog.
What I am trying to do is to write a function which to which will allow me to render this data easily.
<script type="application/javascript">
SKUinfo =
{
"s238554": {
"Age": {
"Description": "Age 18+",
"Thumbnail": "/productImages/assets/img/icon18.gif"
},
"Barcode": {
"Barcode": "50622132430794"
},
"Currency": "£",
"Description": "Description goes here",
"Id": 44305,
"Packshots": [
"/productImages/238556/1min.jpg",
"/productImages/238556/2med.jpg",
"/productImages/238556/3max.jpg"
],
"Pegis": [],
"Platform": {
"Button": "Xbox 360",
"ID": 0
},
"Publisher": {
"Description": null
},
"Release": "/Date(1392940800000+0000)/",
"Screenshots": [
{
"ScreenshotMax": "/productImages/238556/5scrmax1.jpg",
"ScreenshotMin": "/productImages/238556/4scrmin1.jpg"
}
],
"Title": "Product title 2 goes here",
"Variants": [
{
"Id": 58242,
"MaxOrderQuantity": 3,
"Presellable": true,
"Price": 29.97,
"PriceCultureFormat": "29.97",
"PriceWithCurrencyFormat": "£29.97",
"Sku": 238556,
"Type": {
"Description": "New"
}
},
],
"Vendor": {
"Description": ""
},
},
"s238556": {
"Age": {
"Description": "Age 18+",
"Thumbnail": "/productImages/assets/img/pegi/icon18.gif"
},
"Barcode": {
"Barcode": "5060134530794"
},
"Currency": "£",
"Description": "Description here",
"Id": 654654,
"Packshots": [
"/productImages/238556/1min.jpg",
"/productImages/238556/2med.jpg",
"/productImages/238556/3max.jpg"
],
"Pegis": [],
"Platform": {
"Button": "PlayStation 3",
"ID": 0
},
"Publisher": {
"Description": null
},
"Release": "/Date(1392940800000+0000)/",
"Screenshots": [
{
"ScreenshotMax": "/productImages/238556/5scrmax1.jpg",
"ScreenshotMin": "/productImages/238556/4scrmin1.jpg"
},
{
"ScreenshotMax": "/productImages/238556/7scrmax2.jpg",
"ScreenshotMin": "/productImages/238556/6scrmin2.jpg"
},
],
"Title": "Product title 2 goes here",
"Variants": [
{
"Id": 58242,
"MaxOrderQuantity": 3,
"Presellable": true,
"Price": 29.97,
"PriceCultureFormat": "29.97",
"PriceWithCurrencyFormat": "£29.97",
"Sku": 238556,
"Type": {
"Description": "New"
}
},
],
"Vendor": {
"Description": ""
},
"VideoHTML": "html here",
"status": {
"Response": "product found",
"Success": true
}
}
}
</script>
The above example is the output I get for two products.
If I try to get access to this data this is where I have a problem
<script type="application/javascript">
function getSKU(s)
{
console.log(SKUinfo.s.Title);
}
getSKU(s238554);
</script>
I imagine this is being caused when I am passing the argument s back to the function getSKU a the node selection in the data object. In this I would expect the console output to be the Title from SKU s238554.
What I get however, is: Uncaught ReferenceError: s238554 is not defined
I would appreciate any guidance that can be offered as I am a javascript novice.
Access your property by used[] on SKUinfo.s.Title like SKUinfo[s].Title
And also pass your property name within the quotes 's238554' as it's not variable.
Something like this.
function getSKU(s){
console.log(SKUinfo[s].Title);
}
getSKU('s238554'); // s238554 within quotes.
When using the Facebook Open Graph explorer, I run the following, to get a list of my books read.
/706685881/books.reads?limit=25&offset=0
This returns only 5 results, even though I have more books read than that, and I've explicitly requested up to 25 results. Following the paging link to the (theoretical) more results, shows a page with no more results.
here's my output of the query:
{
"data": [
{
"data": {
"book": {
"id": "452418224806835",
"url": "https://www.facebook.com/pages/Fantastic-Voyage/452418224806835",
"type": "books.book",
"title": "Fantastic Voyage"
}
},
"id": "10151871872740882"
},
{
"data": {
"book": {
"id": "106151566083577",
"url": "https://www.facebook.com/pages/The-Andromeda-Strain/106151566083577",
"type": "books.book",
"title": "The Andromeda Strain"
}
},
"id": "10151870390740882"
},
{
"data": {
"progress": [
{
"timestamp": 1388668020,
"percent_complete": 0
},
{
"timestamp": 1392949225,
"percent_complete": 100
}
],
"book": {
"id": "10150233066083545",
"url": "http://www.goodreads.com/book/show/10664113-a-dance-with-dragons",
"type": "good_reads:book",
"title": "A Dance with Dragons (A Song of Ice and Fire, #5)"
}
},
"id": "10151867499170882"
},
{
"data": {
"progress": [
{
"timestamp": 1391350736,
"percent_complete": 0
},
{
"timestamp": 1392569208,
"percent_complete": 100
}
],
"book": {
"id": "1390736374489290",
"url": "http://www.goodreads.com/book/show/18405477-city-of-the-sun",
"type": "good_reads:book",
"title": "City of the Sun"
}
},
"id": "10151860185710882"
},
{
"data": {
"book": {
"id": "526531387368738",
"url": "http://apps.facebook.com/bookscout/?currworkid=9000000000133742",
"type": "books.book",
"title": "Gates of Fire"
}
},
"id": "10151226827780882"
}
],
"paging": {
"next": "https://graph.facebook.com/706685881/books.reads?fields=data&limit=25&offset=25&__after_id=10151226827780882"
}
}
Anybody seeing what I am doing wrong?
I am trying to load grid data from a ExtDirect router. The results contain a metaData object that should reconfigure the store's fields. I am getting the following error however when I try to load my data:
Uncaught TypeError: Cannot read property 'sortType' of undefined (ext-all-debug.js:23943)
The JSON result is:
{
"action": "Dashboard",
"method": "dashboarddata",
"type": "rpc",
"result": {
"success": true,
"metaData": {
"sortInfo": {
"direction": "ASC",
"field": "id"
},
"fields": [{
"mapping": "id",
"id": "id"
},
{
"mapping": "owner",
"id": "owner"
},
{
"mapping": "name",
"id": "name"
},
{
"mapping": "type",
"id": "type"
},
{
"mapping": "strategy",
"id": "strategy"
},
{
"mapping": "primebroker",
"id": "primebroker"
},
{
"mapping": "startdate",
"id": "startdate"
},
{
"mapping": "date_afc_prelim_approval",
"id": "date_afc_prelim_approval"
},
{
"mapping": "date_afc_approval",
"id": "date_afc_approval"
},
{
"mapping": "date_submit_regulator",
"id": "date_submit_regulator"
},
{
"mapping": "date_approval_regulator",
"id": "date_approval_regulator"
},
{
"mapping": "enddate",
"id": "enddate"
},
{
"mapping": "main_iso_currency",
"id": "main_iso_currency"
},
{
"mapping": "nav_frequency",
"id": "nav_frequency"
},
{
"mapping": "date_first_nav",
"id": "date_first_nav"
},
{
"mapping": "launch_size",
"id": "launch_size"
},
{
"mapping": "target_size",
"id": "target_size"
},
{
"mapping": "memo",
"id": "memo"
},
{
"mapping": "isin_codes",
"id": "isin_codes"
},
{
"mapping": "status",
"id": "status"
}],
"totalProperty": "total",
"successProperty": "success",
"idProperty": "id",
"root": "data"
},
"data": [{
"status": "Project closed",
"strategy": "Strategy X",
"date_afc_approval": "2010-01-01",
"startdate": "2010-01-01",
"nav_frequency": "Bi-monthly",
"date_first_nav": "2010-01-01",
"enddate": "2010-01-01",
"date_approval_regulator": "2010-01-01",
"id": "1",
"date_afc_prelim_approval": "2010-01-01",
"isin_codes": "123",
"target_size": "2000",
"owner": "Some name",
"name": "First project",
"memo": "TEXTEXTEXT",
"main_iso_currency": "TND",
"primebroker": "Yes",
"date_submit_regulator": "2010-01-01",
"launch_size": "1000",
"type": "TypeX"
}],
"total": 1
},
"tid": 6
}
The store itself is configured like:
var store = new Ext.data.DirectStore({
idProperty: 'id'
,paramsAsHash: true
,directFn: MyApp.Direct.Dashboard.dashboarddata
,root:'data'
,autoLoad: false
,totalProperty:'total'
,fields: [
{name: 'id', mapping: 'id'},
{name: 'type', mapping: 'type'}
]
,baseParams: {
type: this.type,
filters: this.filters
}
});
Can anyone please help me? This is driving me nuts, I cannot see what I am doing wrong.
Thanks!
Rob
PS. I am using ExtJS 3.3.0
Why not debug that place using Chrome or Firefox debug facility? The helpful options is setting the break on exception in the Chrome.
I fixed it. Debugging did the trick.
Apparently when updating the fields through the metaData object in the JSON response you need to name the fields. ExtJS uses the name field as a lookup field internally. Strange thing is that with static configuration of a store's fields you don't need that field...
...
"fields": [{
"mapping": "id",
"name": "id",
"id": "id"
},
{
"mapping": "owner",
"name": "owner",
"id": "owner"
},
...