I am using JVector map and marking some locations on the map using Markers.
According to the documentaiton the following code can be used to mark locations.
markers: [
{ latLng: [53.3574436, 9.9076650], name: 'some city' },
{ latLng: [53.3574436, 10.2127204], name: 'another city' },
{ latLng: [56.5611120, 24.0300030], name: 'one more city' }
]
In my case I am not sure how many locations I need to mark. Some times 3, some times 5. So what I want to know is, it is possible to Generate the code inside markers : [ ] dynamically with JSON. Or may be any other way?
You could add code with ClientScriptManager.RegisterClientScriptBlock
See: https://msdn.microsoft.com/en-us/library/system.web.ui.clientscriptmanager.registerclientscriptblock(v=vs.140).aspx
Or you could do it inline in the markup with <% %> tags.
Related
How do I add and then access additional values My_Custom_Value to the Event Object?
events: [
{
title: 'My Title',
My_Custom_Value: 'some details',
allDay: false,
start: 1501056000000,
end: 1501057800000
}
],
Access your value through "extendedProps":
A plain object holding miscellaneous other properties specified during parsing. Receives properties in the explicitly given extendedProps hash as well as other non-standard properties."
https://fullcalendar.io/docs/event-object
eventRender: function(info){
console.log("_______ info _______\n");
console.log(info.event.extendedProps.My_Custom_Value);
}
Use extendedProps. You can include them in the event object directly (https://fullcalendar.io/docs/event-object), or add them afterwards using method Calendar::setExtendedProp (https://fullcalendar.io/docs/Event-setExtendedProp)
events: [
{
title: 'My Title',
My_Custom_Value: 'some details',
allDay: false,
start: 1501056000000,
end: 1501057800000
extendedProps: {
description: 'whatever',
madeupProperty: 'banana'
}
}
]
The answer to this is contained in the Event Parsing documentation at https://fullcalendar.io/docs/event-parsing.
The way you're setting the custom property in your object is fine. As per that documentation, fullCalendar will read it, and then place it in the extendedProps property of the event object it creates internally.
So if you then need come to access that event later (e.g. via one of fullCalendar's callbacks such as eventClick, perhaps) you would use event.extendedProps.My_Custom_Value to access it.
Im using foundation emails, i can use variables on a template by wrapping them in a raw tag, for example:
<raw><%= myVariable %></raw>
Now, I need to add attachments, and attachmeants come as an array with this form:
attachmentsData: [
{
id: '301e165f-130e-4f89-83da-a49ff43172ce_Screenshotfrom2018-11-1916-43-01.png',
title: 'Screenshotfrom2018-11-1916-43-01.png',
url: 'https://s3.eu-central-1.amazonaws.com/dev-messaging-attachments/301e165f-130e-4f89-83da-a49ff43172ce_Screenshotfrom2018-11-1916-43-01.png',
},
{
id: '301e165f-130e-4f89-83da-a49ff43172ce_Screenshotfrom2018-11-1916-43-02.png',
title: 'Screenshotfrom2018-11-1916-43-02.png',
url: 'https://s3.eu-central-1.amazonaws.com/dev-messaging-attachments/301e165f-130e-4f89-83da-a49ff43172ce_Screenshotfrom2018-11-1916-43-02.png',
},
],
On the documentation it also says that i can loop over arrays that are declared in src/data in yml format.
However in my case i need the array of objects to come from the backend.
but if it comes from the backend it i have to parse it with the raw tags.
But if use the raw tags i cant use the each helper:
https://foundation.zurb.com/emails/docs/panini.html#custom-data
Do you know how to loop over this array?
note that, If i do <raw><%= myArray[0].name %></raw> this works and prints the right value.
Any tips? Thanks
If <raw><%= myArray[0].name %></raw> works, then the following should work too.
<% myArray.forEach(data => { %>
<raw><%= data.name %></raw>
<% }); %>
It seems tapi18n is designed to only have one active language at any given time.
I'm showing a form which includes the same field in several languages. I want to translate the labels and placeholders, because it's useful information for the people filling in the forms, but since I only have access to the current language, I can't show words from others.
I'd like this:
## Description ##
English
[ enter the description ... ]
Español
[ enter the description ... ]
Deutsch
[ enter the description ... ]
to look like this:
## Description ##
English
[ enter the description ... ]
Español
[ introduzca la descripción ... ]
Deutsch
[ placeholder in german... ]
I can think of hacks like creating a pre-processor that copies keys like { "description_placeholder_$$": "introduzca la description" } from each json file to every other json file replacing the $$ to the language code, so each language has all the keys containing $$ from every other language.
Another trick would be to load all the json files into memory, independently from tapi18n, and access the required words directly.
Any more elegant ways to solve this?
As #kyll mentioned, this is how it should work:
TAPi18n.__('amusing spaghetti', { lng: 'ru'});
But it fails to load languages on demand. As a work around, I preload languages on client side and set a session variable to indicate that all languages have been loaded.
var langs = [
{ code: 'en', name: 'English' },
{ code: 'es', name: 'Español' },
{ code: 'de', name: 'Deutsch' }
];
Meteor.startup(function () {
_.each(langs, function(lang) {
TAPi18n._loadLanguage(lang.code).done(function() {
Session.set('langsLoaded',
langs.length == TAPi18n._loaded_languages.length);
});
});
});
Then, in a template I have:
{{trToLang 'amusing spaghetti' 'ru'}}
And finally in a helper:
trToLang: function(key, lang) {
return Session.get('langsLoaded') ? TAPi18n.__(key, { lng: lang }) : '';
}
The session variable is needed because without it sometimes the languages are not loaded before the template renders, and that breaks TAPi18n.
I hope someone posts a more beautiful solution.
Don't know if this is still relevant, but I saw it in use in Sam's md-blog package, maybe it will help to see someone else's implementation?
https://github.com/xolvio/md-blog
HTH
In the schema declaration I have:
CollectionName.attachSchema(new SimpleSchema({
issue: {
type: String,
label: "Describe the issue you noticed",
max:256
},
location: {
label: "Place a marker on your approximate location",
type: String,
autoform: {
type: 'map',
afFieldInput: {
type: 'map',
autolocate: true,
zoom:16
}
}
}
I'd like to allow a user to take a picture on this insert form
{{> quickForm collection="CollectionName" id="inserttoCollection" type="insert"}}
I'd like to be able to let an individual not only document the location of an issue but take a picture of what issue was noticed.
My question: How do I set up a field properly so that it allows a user to take and upload a photo.
This is one of the areas where Meteor shines - isomorphic APIs that work across desktop and mobile browsers.
You'll want to meteor add mdg:camera, add a button to your form, and set its click handler to run MeteorCamera.getPicture().
Read more at https://github.com/meteor/mobile-packages/tree/master/packages/mdg:camera
Can someone please throw some light on how to go about rendering an hyperlink in the cells of a particular column in ExtJS?
I have tried binding the column to a render function in my JS, from which I send back the html:
SELECT
However, with this, the problem is that, once I hit the controller through the link, the navigation is successful, but subsequent navigations to the data-grid show up only empty records.
The records get fetched from the DB successfully through the Spring MVC controller, I have checked.
Please note that this happens only once I use the row hyperlink in the extJS grid to navigate away from the grid. If I come to the grid, and navigate elsewhere and again come back to the grid, the data is displayed fine.
The problem only occurs in case of navigating away from the grid, using the hyperlink rendered in one/any of the cells.
Thanks for your help!
This is for ExtJS 4 and 5.
Use a renderer to make the contents look like a link:
renderer: function (value) {
return ''+value+'';
}
Then use the undocumented, dynamically generated View event cellclick to process the click:
viewConfig: {
listeners: {
cellclick: function (view, cell, cellIndex, record, row, rowIndex, e) {
var linkClicked = (e.target.tagName == 'A');
var clickedDataIndex =
view.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex;
if (linkClicked && clickedDataIndex == '...') {
alert(record.get('id'));
}
}
}
}
Try something like this:
Ext.define('Names', {
extend: 'Ext.data.Model',
fields: [
{ type: 'string', name: 'Id' },
{ type: 'string', name: 'Link' },
{ type: 'string', name: 'Name' }
]
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{
text: 'Id',
dataIndex: 'Id'
},
{
text: 'Name',
dataIndex: 'Name',
renderer: function (val, meta, record) {
return '' + val + '';
}
}
...
...
...
However my thanks to - ExtJS Data Grid Column renderer to have multiple values
Instead of using an anchor tag, I would probably use plain cell content styled to look like an anchor (using basic CSS) and handle the cellclick event of the GridPanel to handle the action. This avoids dealing with the anchor's default click behavior reloading the page (which is what I'm assuming is happening).
I created a renderer so it looked like you were clicking on it.
aRenderer: function (val, metaData, record, rowIndex, colIndex, store){
// Using CellClick to invoke
return "<a>View</a>";
},
But I used a cell event to manage the click.
cellclick: {
fn: function (o, idx, column, e) {
if (column == 1) // Doesn't prevent the user from moving the column
{
var store = o.getStore();
var record = store.getAt(idx);
// Do work
}
}
}
For these purposes I use CellActions or RowActions plugin depending on what I actually need and handle cell click through it.
If you want something that looks like an anchor, use <span> instead and do what #bmoeskau suggested.
You can use 'renderer' function to include any HTML you want into cell.
Thanks guys for your response.
AFter debugging the extJS-all.js script, I found the issue to be on the server side.
In my Spring MVC controller, I was setting the model to the session, which in the use-case I mentioned earlier, used to reset the "totalProperty" of Ext.data.XmlStore to 0, and hence subsequent hits to the grid, used to display empty records.
This is because, ext-JS grid, checks the "totalProperty" value, before it even iterates through the records from the dataStore. In my case, the dataStore had data, but the size was reset to null, and hence the issue showed up.
Thanks to all again for your inputs!