I receive JSON(that has products/categories related information) from a Rest API call, on my ReactJS page. I render this information on ag-grid.
Categories are showed horizontally and against each category, products are shown in the columns.
---------|----- |----------|------------
Product1| Product2 | Product3
---------|-------------------------------
Category1|abc1 | abc2 | abc3
-----------------------------------------
Category2|xyz1 | xyz2 | xyz3
-----------------------------------------
The JSON can have any number of categories/products.
I need to able to render the rows/columns dynamically based on this info.
Not sure how to go about this?
Products could be maximum five in number.
Shall I define header definitions of these five products in my reactJS page and then dynamically set the hidden property to true or false, depending upon which product is present in JSON?
[{
headerName: "Product1",
resizable: true,
wrapText: true,
cellStyle: {
'white-space': 'normal'
},
autoHeight: true,
hide: true
},
{
headerName: "Product2",
resizable: true,
wrapText: true,
cellStyle: {
'white-space': 'normal'
},
autoHeight: true,
hide: false
}]
JSON:
Example1:
"raw_message":
[
{
"category": "category1"
[
{
"product": "Product1"
},
{
"product": "Product2"
},
]
}
]
Example2:
"raw_message":
[
{
"category": "category1"
[
{
"product": "Product1"
},
{
"product": "Product2"
},
{
"product": "Product3"
},
]
}
]
Thanks for your help. I managed to resolve the issue by using ag-grid's onRowDataChanged eventhandler and columnAPi's SetColumnVisible property.
Related
I'm trying to create a slide show (2-3 images) using the Alexa authoring tool.I have managed to do this using the APL Pager which displays a series of components one at a time. The thing is that in order to switch from image A to image B..C I have to touch the screen and swipe left/right.
i want to make this happen automatically and have alexa swicth the images within a certain time, and it seems that this can be achieved using APL autopage but for some reason this is not working 😩
What I've done
Set up the APL using the APL pager
Added the auto page to the APL document
Component Id
duration
delay
After trying the simulation and directly in an echo show 5 it still only triggers when the display is touched.
Also tried:
Adding the standard command (auto pager) directly in the handler of alexa but same response.
Some doubts
Does it matter if i put the commands in the APLdocument.json[1] file or directly in the handler when i call .addDirective[2]..the only difference i see if i want the content or duration to be dynamic i should put it directly in the backend code(index.js) right?
[1]
{
"type": "APL",
"version": "1.4",
"settings": {},
"theme": "light",
"import": [],
"resources": [],
"styles": {},
"onMount": [],
"graphics": {},
"commands": [
{
"type": "AutoPage",
"componentId": "fisrtpager",
"duration": 1000,
"delay": 500
}
],
[2]
handlerInput.responseBuilder.addDirective({
type: 'Alexa.Presentation.APL.RenderDocument',
token:'arrugas',
document: physiolift,
commands: [{
"type": "AutoPage",
"componentId": "fisrtpager",
"duration": 1000,
"delay": 500
}]
});
}
Expected outPut
Have Alexa (echo show 5) to display a series of images like a carousel (without the need to touch the screen)
My code
APL Document
{
"type":"APL",
"version":"1.4",
"settings":{
},
"theme":"light",
"import":[
],
"resources":[
],
"styles":{
},
"onMount":[
],
"graphics":{
},
"commands":[
{
"type":"AutoPage",
"componentId":"fisrtpager",
"duration":1000,
"delay":500
}
],
"layouts":{
},
"mainTemplate":{
"parameters":[
"payload"
],
"items":[
{
"type":"Pager",
"id":"fisrtpager",
"width":"100%",
"height":"100%",
"items":[
{
"type":"Image",
"width":"100%",
"height":"100%",
"scale":"best-fill",
"source":"https://dyl80ryjxr1ke.cloudfront.net/external_assets/hero_examples/hair_beach_v1785392215/original.jpeg",
"align":"center"
},
{
"type":"Image",
"width":"100%",
"height":"100%",
"source":"https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
"scale":"best-fill"
},
{
"type":"Text",
"text":"Just text content shown on page #3",
"textAlign":"center"
}
],
"navigation":"wrap"
}
]
}
}
index.js
// somewhere inside the intent im invoking
if (Alexa.getSupportedInterfaces(handlerInput.requestEnvelope)['Alexa.Presentation.APL']) {
// Create Render Directive.
handlerInput.responseBuilder.addDirective({
type: 'Alexa.Presentation.APL.RenderDocument',
token:'arrugas',
document: require('./documents/ImageTest.json')
});
}
speakOutput += ' just saying somthing'
return handlerInput.responseBuilder
.speak(speakOutput)
.reprompt('just saying something else')
.getResponse();
Just add the command in the "onMount" event handler. Here is the modified code which does exactly what you need:
{
"type": "APL",
"version": "1.4",
"settings": {},
"theme": "light",
"import": [],
"resources": [],
"styles": {},
"onMount": [],
"graphics": {},
"layouts": {},
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"type": "Pager",
"id": "fisrtpager",
"width": "100%",
"height": "100%",
"items": [
{
"type": "Image",
"width": "100%",
"height": "100%",
"scale": "best-fill",
"source": "https://dyl80ryjxr1ke.cloudfront.net/external_assets/hero_examples/hair_beach_v1785392215/original.jpeg",
"align": "center"
},
{
"type": "Image",
"width": "100%",
"height": "100%",
"source": "https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
"scale": "best-fill"
},
{
"type": "Text",
"text": "Just text content shown on page #3",
"textAlign": "center"
}
],
"navigation": "none",
"onMount": [{
"type": "AutoPage",
"componentId": "fisrtpager",
"duration": 1000,
"delay": 500
}]
}
]
}
}
to update dynamically this feature from your backend code you can do the following:
// check if device supports APL
if (Alexa.getSupportedInterfaces(handlerInput.requestEnvelope)['Alexa.Presentation.APL']) {
// Create Render Directive.
handlerInput.responseBuilder.addDirective({
type: 'Alexa.Presentation.APL.RenderDocument',
token: "dialogManagementPagerDoc",
document: require('./PATH-TO/YOUR-APL-FILE.json')
})
.addDirective({
type: "Alexa.Presentation.APL.ExecuteCommands",
token: "dialogManagementPagerDoc",
commands: [
{
type: "AutoPage",
componentId: "YOUR_PAGER_ID",
delay: 1000,
duration: 5000
}
]
});
}
I am having below json data in ExtJS store. I am using Ext.grid.Panel to show this content with colum Name and Phone.
{
"name": "Doris Ryan",
"phone": "1-536-934-9500"
},
{
"name": "Nissim Hines",
"phone": "1-937-975-0044"
},
{
"name": "Walter Gallegos",
"phone": "863-4112"
},
{
"name": "Miranda Boyd",
"phone": "1-820-817-5049"
},
{
"name": "Sonya Booth",
"phone": "468-0669"
},
{
"name": "Rose Steele",
"phone": "1-581-774-8023"
},
So with this I am getting Grid in below format
Name Phone
Doris Ryan 1-536-934-9500
Nissim Hines 1-937-975-0044
Walter Gallegos 863-4112
Miranda Boyd 1-820-817-5049
But what i want to display the content in Grid as described below
Name Phone Name Phone
Doris Ryan 1-536-934-9500 Nissim Hines 1-937-975-0044
Walter Gallegos 863-4112 Miranda Boyd 1-820-817-5049
User is able to edit the phone number. So also share details on how will I handle the updates on grid.
The solution to this is to change how you assemble the data in the model, and then you also change the exposure via the grid.
ExtJS does not have the property to automatically replicate two rows of records in a single row.
Crete a model like this:
Ext.define('YourApp.model.yourFeature.Model', {
extend: 'Ext.data.Model',
fields: [{
name: 'Phone1',
type: 'string'
}, {
name: 'Name1',
type: 'string'
}, {
name: 'Phone2',
type: 'string'
}, {
name: 'Name2',
type: 'string'
}]
});
Define your data, like your question:
var data = [{
"name": "Doris Ryan",
"phone": "1-536-934-9500"
}, {
"name": "Nissim Hines",
"phone": "1-937-975-0044"
}, {
"name": "Walter Gallegos",
"phone": "863-4112"
}, {
"name": "Miranda Boyd",
"phone": "1-820-817-5049"
}, {
"name": "Sonya Booth",
"phone": "468-0669"
}, {
"name": "Rose Steele",
"phone": "1-581-774-8023"
}]
So you make a kind of odd / even logic to abound your record.
i have a model of how this:
_id:ObjectId("5705005b240166e927f841cb")
figures: [
{
id: "5433234"
figure: [
{
"id":"figure_543",
"active": false,
"name": "Alvar"
},
{
"id":"figure_431",
"active": false,
"name": "Peter"
}
]
},
{
id: "1276544"
figure: [
{
"id":"figure_123",
"active": false,
"name": "Jhon"
}
]
},
{
id: "1231645"
figure: [
{
"id":"figure_154",
"active": false,
"name": "Luka"
}
]
}
]
I'am doing this:
db.collection.update({"_id": userId, "figures.figure.id": figureId}, {$set:{"figures.figure.$.active": true}})
userId and figureId are variables that come from req.body on expressjs.
But i see this:
The positional $ operator cannot be used for queries which traverse more than one array, such as queries that traverse arrays nested within other arrays, because the replacement for the $ placeholder is a single value
My question is, how can i update the field active of figure on nested array with mongoose?
Thank's!!!
The following data is being used to load and display a grid dynamically. The only difference between the two grids is that the first reader takes in the data below as is, but the second grid only knows about the data and the metaData will be generated on the fly. I placed stubs for the fields and columns as this is not the issue and I haven't decided on how I will generate the data yet.
Both of the readers eventually pass the data below to the JsonReader's readRecords()' function via this.callParent([data]);, but the second one does not display the data. The data is there, but I am not sure why it does not display?
There are two links to demos below. The first is a JSFiddle that loads from memory and the second is a Sencha Fiddle that loads through AJAX.
Snippet
var rawFields = [
{ "name": "year", "type": "int" },
{ "name": "standard", "type": "string" },
{ "name": "bitRate", "type": "float" }
];
var rawColumns = [
{ "text" : "Year", "dataIndex" : "year", "flex" : 1 },
{ "text" : "Standard", "dataIndex" : "standard", "flex" : 1 },
{ "text" : "Bit/Sec", "dataIndex" : "bitRate", "flex" : 1 }
];
Ext.define('Example.reader.DynamicReader', {
extend : 'Ext.data.reader.Json',
alias : 'reader.dynamicReader',
readRecords : function(data) {
var response = {
data: data,
metaData : this.createMetaData(data),
success: true
};
console.log(response);
return this.callParent([response]);
},
createMetaData : function(data) {
return {
idProperty : "id",
fields : rawFields, // These will eventually be generated...
columns : rawColumns // These will eventually be generated...
};
}
});
Data
{
"data": [
{
"id": 0,
"year": 1997,
"standard": "802.11",
"bitRate": 2000000
},
{
"id": 1,
"year": 1999,
"standard": "802.11b",
"bitRate": 11000000
},
{
"id": 2,
"year": 1999,
"standard": "802.11a",
"bitRate": 54000000
},
{
"id": 3,
"year": 2003,
"standard": "802.11g",
"bitRate": 54000000
},
{
"id": 4,
"year": 2007,
"standard": "802.11n",
"bitRate": 600000000
},
{
"id": 5,
"year": 2012,
"standard": "802.11ac",
"bitRate": 1000000000
}
],
"metaData": {
"idProperty": "id",
"fields": [
{
"name": "year",
"type": "int"
},
{
"name": "standard",
"type": "string"
},
{
"name": "bitRate",
"type": "float"
}
],
"columns": [
{
"text": "Year",
"dataIndex": "year",
"flex": 1
},
{
"text": "Standard",
"dataIndex": "standard",
"flex": 1
},
{
"text": "Bit/Sec",
"dataIndex": "bitRate",
"flex": 1
}
],
"success": true
}
}
Demos
The following examples both achieve the same thing, so the only difference is the loading of the data.
Loading from Memory
http://jsfiddle.net/MrPolywhirl/zy4z5z8a/
Loading from AJAX
https://fiddle.sencha.com/#fiddle/d3l
I figured out the answer. I needed to specify a root value for the reader so that the data can be mapped properly.
Ext.onReady(function() {
Ext.widget("dynamicGrid", {
title: 'WiFi LAN Data Rates [Dynamic]',
renderTo: Ext.get('example-grid-dynamic'),
readerType: 'dynamicReader',
// This need to match the 'data' key specified in the `response` object
// that was created in readRecords().
readerRoot: 'data',
data : rawData
});
});
The documentation for root notes that the root property has to map to the data portion of the response.
Documentation for Json.root:
Ext.data.reader.Json.root
root : String
The name of the property which contains the data items corresponding to the Model(s) for which this Reader is configured. For JSON reader it's a property name (or a dot-separated list of property names if the root is nested). For XML reader it's a CSS selector. For Array reader the root is not applicable since the data is assumed to be a single-level array of arrays.
All the question is in my title =).
I started with checkBox Tree exemple, add property checked:false for the first level that work i see my checkbox just on left icone folder.
But have radio in level that is so different, i tryed some change to transform checkbox in radio, but nothing *:_:*
Some topic given by broogle talk only some levels with checkbox but none with radio.
Have you an idea ?
Thx a lot, have a nice day.
The Example is using a JSON file to load the nodes.
In de JSON file you can set "checked" to true or false.
{"text": "Grocery List",
"cls": "folder",
"children": [{
"text": "Bananas",
"leaf": true,
"checked": false
},{
"text": "Milk",
"leaf": true,
"checked": false
},{
"text": "Cereal",
"leaf": true,
"checked": false
},{
"text": "Energy foods",
"cls": "folder",
"children": [{
"text": "Coffee",
"leaf": true,
"checked": false
},{
"text": "Red Bull",
"leaf": true,
"checked": false
}]
}]}
You can only have a checkbox in the tree but you can always write your own extension :)
Well, i'm brb on this thread for give a little function. put that on your tree and normaly you have checkbox with radio behavior.
listeners: {
'checkchange': function( n, check )
{
if( check )
{
var p = n.parentNode;
p.eachChild( function( c )
{
if( c.isLeaf() && c.get('checked') )
{
c.set('checked', false);
}
});
n.set('checked', true);
}
else
{
n.set('checked', false);
}
}
}