I'm going through this tutorial, and was fine until I changed the Records component and added React.createElement RecordForm, handleNewRecord: #addRecord between two DOM renderings. Seems to interfere and prevent the DOM from rendering at all.
Here's the component:
#Records = React.createClass
getInitialState: ->
records: #props.data
getDefaultProps: ->
records: []
addRecord: (record) ->
records = #state.records.slice()
records.push record
#setState records: records
render: ->
React.DOM.div
className: 'records'
React.DOM.h2
className: 'title'
'Records'
React.createElement RecordForm, handleNewRecord: #addRecord
React.DOM.hr null
React.DOM.table
className: 'table table-bordered'
React.DOM.thead null,
React.DOM.tr null,
React.DOM.th null, 'Date'
React.DOM.th null, 'Title'
React.DOM.th null, 'Amount'
React.DOM.tbody null,
for record in #state.records
React.createElement Record, key: record.id, record: record
Console error says "Uncaught ReferenceError: RecordForm is not defined". Which, yes I do, and it's:
#RecordForm = React.createClass
bla bla bla bla
handleChange: (e) ->
name = e.target.name
#setState "#{ name }": e.target.value
handleSubmit: (e) ->
e.preventDefault()
$.post '', { record: #state }, (data) =>
#props.handleNewRecord data
#setState #getInitialState()
, 'JSON'
render: ->
React.DOM.form
bla bla bla bla
What gives?
Looks like I had an unintended space before handleChange. Adding newlines between each function solved it. >:/
Related
this is my code below
const columns = [
{
key: '1',
title: 'id',
dataIndex: 'id'
},
{
key: '2',
title: 'status',
dataIndex: 'status',
render: (text) => <a> {text} </a>
},
];
I wanna display data ( text/id ) like below code
const columns = [
{
key: '1',
title: 'id',
dataIndex: 'id'
},
{
key: '2',
title: 'status',
dataIndex: ['status', 'id'],
render: (text) => <a> {text} / {id} </a>
},
];
I tried to like this samples
1. dataIndex: ['status', 'id']
2. dataIndex: 'status.id'
but that doesn`t work. (version 4.14.0)
how can I display like that? please reply here. thanks.
I'll answer assuming what you pass to the dataSource is an array of objects which looks like below.
interface DataModel {
id: number;
status: string;
}
If so, you can use the second parameter in the render method which will have the record. Hence record.id will give you the id.
const columns = [
{
key: '1',
title: 'id',
dataIndex: 'id'
},
{
key: '2',
title: 'status',
dataIndex: ['status'],
render: (text: any, record: any) => <a> {text} / {record.id} </a>
},
];
try this solution
{
title: 'Name',
dataIndex: 'address',
key: 'name',
render: ({ city, street }) => (
<Typography>{`${city} ${street}`}</Typography>
),
},
try this
{
title: "Task",
dataIndex: ["task","name"]
},
I have a device that get some telemetry data via REST API. Some of the data that it received is in the following format:
{
...
parameters: [
{
'name': 'parameter1',
'grade': '2',
'info': 'some informtion'
},
{
'name': 'parameter2',
'grade': '1',
'info': 'some informtion'
},
...
]
}
what I want to do is to visualize the data in the following way:
name | grade | info
---------------------------------------
parameter1 | 2 | some information
parameter2 | 1 | some information
... | ... | ...
now if I break down each parameter and send it to the device separately it will override the previous one.
How can I make that?
Figured out a way to do this:
Go to 'Widget Bundle' and create a new widget bundle.
Create a new widget of type 'Latest values'.
Here we have CSS/HTML section and a Javascript section.
HTML section:
<div class="my-data-table">
</div>
Javascript section:
self.defaultList = [
{
'id': 1,
'name': 'name 1',
'grade': 123,
'description': 'This is a description'
},
{
'id': 2,
'name': 'name 2',
'grade': 456,
'description': 'More description'
},
{
'id': 3,
'name': 'name 3',
'grade': 789,
'description': 'Even more description'
}
];
self.createTable = function(data) {
const columnNames = Object.keys(data[0]);
let tableHeadContent = $('<tr></tr>');
columnNames.forEach((columName) => {
tableHeadContent.append('<td>' + columName + '</td>');
});
let tableHead = $('<thead></thead>').append(tableHeadContent);
let tableBody = $('<tbody></tbody>');
data.forEach((currentElement, index) => {
const vals = Object.values(currentElement);
let currentRow = $('<tr></tr>');
vals.forEach((val) => {
currentRow.append('<td>' + val + '</td>');
});
tableBody.append(currentRow);
});
return $('<table></table>').append(tableHead).append(tableBody);
}
self.onInit = function() {
let currentList = [...self.defaultList];
if(self.ctx.defaultSubscription.data[0].data.length !== 0) {
currentList = JSON.parse(self.ctx.defaultSubscription.data[0].data[0][1]);
}
let currentTable = self.createTable(currentList);
$('.my-data-table', self.ctx.$container).append(currentTable);
}
self.onDataUpdated = function() {
self.ctx.detectChanges();
}
What you need to pay attention to and understand is self.ctx.defaultSubscription.data, when you visualize your data with a certain widget you subscribe the data to the widget. self.ctx.defaultSubscription.data give you access to the data, you can console.log() it to see how it is structured.
The self.defaultList is for the preview and when you set this widget to a specific data it will use that data.
There may be other way to do this but this is how I did it.
Is it possible to get row information by switching the switch in ant design table?
https://codesandbox.io/s/mmvrwy2jkp
Yes, the second argument of the render function is the record.
you can do this
{
title: 'switch',
dataIndex: 'age',
key: 'age',
render: (e, record) => (< Switch onChange={() => handleSwitchChange(record)} defaultChecked={e} />)
}
This is how I dealed with the switch component on each row item when using Ant design. Maybe this could give you some hints.
Table Columns
const COLUMN =
{
title: 'Status',
key: 'status',
dataIndex: 'status',
// status is the data from api
// index is the table index which could be used to get corresponding data
render: (status, record, index) => {
const onToggle = (checked) => {
status = checked;
onActiveUser(index, status);
};
return (
<Space>
<Switch defaultChecked={status} onChange={onToggle} />
</Space>
);
},
},
const onActiveUser = (index, status) => {
axios.patch({ id: users[index].id }, { is_active: status })
.then((response) => {
console.log(response);
})
.catch(() => {
console.log('Failed!');
});
};
I'm trying to make form with react-rails gem. But I receive an error:
SyntaxError: [stdin]:24:11: unexpected .
By trial I've found, that problem is in first React.DOM.div line (it's marked in code), but I don't understand, why it's happened, I've checked everything one hundred times :)
components/country_form.coffee:
#CountryForm = React.createClass
getInitialState: ->
name: ''
valid: ->
#state.name
handleChange: (e) ->
name = e.target.name
#setState "#{name}": e.target.value
handleSubmit: (e) ->
e.preventDefault()
$.post '', { country: #state }, (data) =>
#props.handleNewCountry data
#setState #getInitialState()
, 'JSON'
render: ->
React.DOM.form
onSubmit: #handleSubmit
React.DOM.div # Problem is here
className: 'form-group'
React.DOM.label
'Name'
React.DOM.input
type: 'text'
className: 'form-control'
name: 'name'
value: #state.name
onChange: #handleChange
React.DOM.div
className: 'form-group'
React.DOM.button
type: 'submit'
className: 'btn btn-primary'
disabled: !#valid()
'Save'
Thanks for any help!
I think it should be indented once more.
Right now it's even with the prop of onSubmit:
React.DOM.form
onSubmit: #handleSubmit
React.DOM.div # Problem is here
className: 'form-group'
but maybe it should be incremented once more:
React.DOM.form
onSubmit: #handleSubmit
# ->
React.DOM.div # Problem is here
className: 'form-group'
I've found the problem. RubyMine (and I think IntelliJ IDEA too) indent CoffeeScript files with spaces. Just change indentations to tabs, and error will disappear.
I am close on this but being a javascript / json newbie I am sure I am missing something obvious here. The JSON select2 example is a bit over the top so I am lost trying to convert it to my simple implementation.
I have a Model (City) with a big list of cities with other associated data etc. I am aiming for a basic typeahead input where the city / province gets displayed and the id from the City model gets passed in the form.
Here is my JS:
$(document).ready ->
$('#e6').select2
placeholder: 'Select a City...'
minimumInputLength: 3
ajax:
url: '/cities.json'
dataType: 'json'
quietMillis: 250
data: (query) ->
{ query: query }
results: (data) ->
{ results: $.map(data, (item) ->
{
id: item.id
text: item.name + ', ' + item.province
}
) }
# formatResult: formatResult
# formatSelection: formatSelection
# initSelection: initSelection
cache: true
return
My JSON is triggering as I can confirm from my logs. For example http://localhost:3000/cities.json?query=cal yields:
[[1714,"Calais","AB"],[1716,"Calder","SK"],[1717,"Calderbank","SK"],[1731,"Calgary","AB"],[1738,"Calling Lake","AB"],[1739,"Callingwood North","AB"],[1740,"Callingwood South","AB"],[1743,"Calmar","AB"]]
Now right off the bat I think this is my issue. Should this not be:
[ id: 1731, name: "Calgary", province: "AB"], etc..?
Here is my controller:
respond_to do |format|
format.json {
render json: #cities
}
end
Looking ahead I can see that I could probably have my controller spit out the 'text' values in the "City, Province" format I want too.
So my question(s) are: am I missing something obvious in my JS and / or do I need to fix my JSON and if so how?