Related
How do I add the below to an R4 Patient?
"search": {
"extension": [
{
"url": "http://hl7.org/fhir/StructureDefinition/match-grade",
"valueCode": "certain"
}
],
"mode": "match",
"score": 1.0
}
The objects that were under stu2 and stu3 (I think) have been deprecated.
DSTU3 and Later
// Create an example patient
Patient patient = new Patient();
patient.addIdentifier().setUse(Identifier.IdentifierUse.OFFICIAL).setSystem("urn:example").setValue("7000135");
// Create an extension
Extension ext = new Extension();
ext.setUrl("http://example.com/extensions#someext");
ext.setValue(new DateTimeType("2011-01-02T11:13:15"));
// Add the extension to the resource
patient.addExtension(ext);
Full "response" json from patient match below (sample data, not real data !! )
{
"resourceType": "Bundle",
"id": "94897c77-4120-482f-bdb4-4c8b9a71ade1",
"meta": {
"versionId": "1",
"lastUpdated": "2020-11-24T08:45:49.445-05:00"
},
"type": "searchset",
"total": 1,
"link": [
{
"relation": "self",
"url": "http://wildfhir4.aegis.net/fhir4-0-0/Patient/$match?"
}
],
"entry": [
{
"fullUrl": "http://wildfhir4.aegis.net/fhir4-0-0/Patient/9126db824dcf4d5ab3f68e63bd5eaced",
"resource": {
"resourceType": "Patient",
"id": "9126db824dcf4d5ab3f68e63bd5eaced",
"meta": {
"versionId": "1",
"lastUpdated": "2020-09-03T09:03:28.193-04:00",
"tag": [
{
"system": "http://terminology.hl7.org/CodeSystem/v3-ActReason",
"code": "HTEST",
"display": "test health data"
}
]
},
"text": {
"status": "generated",
"div": "<div xmlns=\"http://www.w3.org/1999/xhtml\"><table><tbody><tr><td>Name</td><td>Peter James \n <b>Chalmers</b> ("Jim") \n </td></tr><tr><td>Address</td><td>534 Erewhon, Pleasantville, Vic, 3999</td></tr><tr><td>Contacts</td><td>Home: unknown. Work: (03) 5555 6473</td></tr><tr><td>Id</td><td>MRN: 12345 (Acme Healthcare)</td></tr></tbody></table></div>"
},
"identifier": [
{
"use": "usual",
"type": {
"coding": [
{
"system": "http://terminology.hl7.org/CodeSystem/v2-0203",
"code": "MR"
}
]
},
"system": "urn:oid:1.2.36.146.595.217.0.1",
"value": "12345",
"period": {
"start": "2001-05-06"
},
"assigner": {
"display": "Acme Healthcare"
}
}
],
"active": true,
"name": [
{
"use": "official",
"family": "Chalmers",
"given": [
"Peter",
"James"
]
},
{
"use": "usual",
"given": [
"Jim"
]
},
{
"use": "maiden",
"family": "Windsor",
"given": [
"Peter",
"James"
],
"period": {
"end": "2002"
}
}
],
"telecom": [
{
"use": "home"
},
{
"system": "phone",
"value": "(03) 5555 6473",
"use": "work",
"rank": 1
},
{
"system": "phone",
"value": "(03) 3410 5613",
"use": "mobile",
"rank": 2
},
{
"system": "phone",
"value": "(03) 5555 8834",
"use": "old",
"period": {
"end": "2014"
}
}
],
"gender": "male",
"birthDate": "1974-12-25",
"_birthDate": {
"extension": [
{
"url": "http://hl7.org/fhir/StructureDefinition/patient-birthTime",
"valueDateTime": "1974-12-25T14:35:45-05:00"
}
]
},
"deceasedBoolean": false,
"address": [
{
"use": "home",
"type": "both",
"text": "534 Erewhon St PeasantVille, Rainbow, Vic 3999",
"line": [
"534 Erewhon St"
],
"city": "PleasantVille",
"district": "Rainbow",
"state": "Vic",
"postalCode": "3999",
"period": {
"start": "1974-12-25"
}
}
],
"contact": [
{
"relationship": [
{
"coding": [
{
"system": "http://terminology.hl7.org/CodeSystem/v2-0131",
"code": "N"
}
]
}
],
"name": {
"family": "du Marché",
"_family": {
"extension": [
{
"url": "http://hl7.org/fhir/StructureDefinition/humanname-own-prefix",
"valueString": "VV"
}
]
},
"given": [
"Bénédicte"
]
},
"telecom": [
{
"system": "phone",
"value": "+33 (237) 998327"
}
],
"address": {
"use": "home",
"type": "both",
"line": [
"534 Erewhon St"
],
"city": "PleasantVille",
"district": "Rainbow",
"state": "Vic",
"postalCode": "3999",
"period": {
"start": "1974-12-25"
}
},
"gender": "female",
"period": {
"start": "2012"
}
}
],
"managingOrganization": {
"reference": "Organization/1"
}
},
"search": {
"extension": [
{
"url": "http://hl7.org/fhir/StructureDefinition/match-grade",
"valueCode": "certain"
}
],
"mode": "match",
"score": 1.0
}
}
]
}
APPEND: I found this:
https://hapifhir.io/hapi-fhir/apidocs/hapi-fhir-structures-r4/org/hl7/fhir/r4/model/codesystems/MatchGrade.html
That extension isn't allowed on Patient. It's defined with a context of Bundle.entry.search. It's not a characteristic of the patient themselves, it's a characteristic of a particular entry in a search result based on a specific set of search criteria. The same Patient instance might well be a good result on one search and a poor result on a different search. So to add the extension, you'd have to add it on a 'search' object, not patient.
Ok.
Here it is. The primary objects were inner/nested objects under Bundle....thus why I didn't see them early. (example : Bundle.BundleEntrySearchComponent)
// a java example with the import statements. #shocking!
//import org.hl7.fhir.r4.model.Bundle;
//import org.hl7.fhir.r4.model.CodeType;
//import org.hl7.fhir.r4.model.Extension;
//import org.hl7.fhir.r4.model.Patient;
//import org.hl7.fhir.r4.model.codesystems.MatchGrade;
//import java.util.Collections;
Bundle innerBundle = new Bundle();
innerBundle.setType(Bundle.BundleType.SEARCHSET);
innerBundle.setTotal(1);
Patient pat = new Patient();
HumanName hn = new HumanName();
hn.setFamily("Smith");
p.setName(Collections.singletonList(hn));
Bundle.BundleEntrySearchComponent besc = new Bundle.BundleEntrySearchComponent();
besc.setScore(0.88);
besc.setMode(Bundle.SearchEntryMode.MATCH);
Bundle.BundleEntryComponent bec = new Bundle.BundleEntryComponent();
Extension matchGradeExtension = besc.addExtension();
matchGradeExtension.setUrl("http://hl7.org/fhir/StructureDefinition/match-grade");
matchGradeExtension.setValue(new CodeType(MatchGrade.PROBABLE.toCode()));
bec.setResource(pat);
bec.setSearch(besc);
innerBundle.setEntry(Collections.singletonList(bec));
Json looks like this:
{
"resourceType": "Bundle",
"type": "searchset",
"total": 1,
"entry": [
{
"resource": {
"resourceType": "Patient",
"name": [
{
"family": "Smith"
}
]
},
"search": {
"extension": [
{
"url": "http://hl7.org/fhir/StructureDefinition/match-grade",
"valueCode": "certain"
}
],
"mode": "match",
"score": 0.88
}
}
]
}
I have a table which is created by plugins datatable that is coming from external json,Just I need to get the text of first TD of first TR on page load, It is working fine with static data but with external json its not working.I have already tried but its not working.
Can anyone please help me.Below is my code.Thanks in advance.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="script.js"></script>
<style>
</style>
</head>
<body>
<div class="col-md-12">
</div>
<div id="div">
<div>
<table id="example">
<thead>
<tr>
<th>name</th>
<th>stargazerscount</th>
<th>forkscount</th>
<th>description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
Javascript
$( document ).ready(function() {
$('#example').DataTable( {
language: {
searchPlaceholder: "Search records"
},
"ajax": {
"type" : "POST",
"url": "http://localhost/members.json",
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : '<span onclick="f()">'+json[i].stargazerscount+'</span>',
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
var x = $('#example tbody tr:first').find('td:first').text();
alert(x);
}
);
members.json
[{
"name": "mango",
"stargazerscount": 526,
"forkscount": "critical",
"description": "fruits"
},
{
"name": "brinjal",
"stargazerscount": 526,
"forkscount": "critical",
"description": "vagetables"
},
{
"name": "grapes",
"stargazerscount": 526,
"forkscount": "major",
"description": "fruits"
},
{
"name": "soap",
"stargazerscount": 526,
"forkscount": "major",
"description": "groceries"
},
{
"name": "dates",
"stargazerscount": 526,
"forkscount": "critical",
"description": "dryfruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "shirt",
"stargazerscount": 526,
"forkscount": "critical",
"description": "clothes"
},
{
"name": "dates",
"stargazerscount": 526,
"forkscount": "critical",
"description": "dryfruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "shirt",
"stargazerscount": 526,
"forkscount": "critical",
"description": "clothes"
},
{
"name": "shirt",
"stargazerscount": 526,
"forkscount": "critical",
"description": "clothes"
},
{
"name": "dates",
"stargazerscount": 526,
"forkscount": "critical",
"description": "dryfruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "shirt",
"stargazerscount": 526,
"forkscount": "critical",
"description": "clothes"
},
{
"name": "dates",
"stargazerscount": 526,
"forkscount": "critical",
"description": "dryfruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
}
]
You have to assign a variable to your datatable declaration. Like var dtable in:
var dtable = $('#example').DataTable({
Inside your declaration add initComplete property so your needed code is successfully executed because your datatables is already fully loaded.
"initComplete": function(settings, json) {
var column = dtable .row(0).data();
alert(column[0]);
},
Updated Code:
<script>$(document).ready(function() {
var dtable = $('#example').DataTable({
language: {
searchPlaceholder: "Search records"
},
"initComplete": function(settings, json) {
var column = dtable.row(0).data();
alert(column[0]);
},
"ajax": {
"type": "POST",
"url": "http://localhost/members.json",
"dataSrc": function(json) {
var return_data = new Array();
for (var i = 0; i < json.length; i++) {
return_data.push({
'name': json[i].name,
'stargazerscount': '<span onclick="f()">' + json[i].stargazerscount + '</span>',
'forkscount': json[i].forkscount,
'description': json[i].description
})
}
return return_data;
}
},
"columns": [{
"data": "name"
},
{
"data": "stargazerscount"
},
{
"data": "forkscount"
},
{
"data": "description"
}
]
});
});
</script>
You should be able to select first instance of td (basically first tr's first td) by vanilla:
document.querySelector('td').innerHTML;
Only problem is that DOM is not updated yet when you are trying to select that element.
To avoid that, put it into initComplete:
$('#example').DataTable( {
language: {
searchPlaceholder: "Search records"
},
"ajax": {
"type" : "POST",
"url": "http://localhost/members.json",
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
$('#example').DataTable( {
language: {
searchPlaceholder: "Search records"
},
"ajax": {
"type" : "POST",
"url": "http://localhost/members.json",
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : '<span onclick="f()">'+json[i].stargazerscount+'</span>',
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
'name': json[i].name,
'stargazerscount' : '<span onclick="f()">'+json[i].stargazerscount+'</span>',
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
],
"initComplete": function(settings, json) {
console.log(document.querySelector('td').innerHTML);
}
});
This will wait for it to init and then execute the script.
More info can be found here.
I'm using Schema.org OpeningHoursSpecification in JSON-LD in such a way:
[{"#type":"OpeningHoursSpecification","dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],"open":"08:00","closes":"20:00"},{"#type":"OpeningHoursSpecification","dayOfWeek":["Saturday"],"open":"08:00","closes":"14:00"},{"#type":"OpeningHoursSpecification","dayOfWeek":["Sunday"],"open":"00:00","closes":"00:00"}]
I couldn't find any example for adapting this specification to include "siesta" - a situation when a place operates e.g. from 8AM to 1PM and from 3PM to 8PM.
EDITED PER #UNOR
This might get you started:
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "Service",
"url": "http://www.example.com/",
"hoursAvailable": [{
"#type": "OpeningHoursSpecification",
"opens": "08:00",
"closes": "13:00",
"dayOfWeek": [{
"#type": "DayOfWeek",
"#id": "http://schema.org/Monday",
"name": "Monday"
},
{
"#type": "DayOfWeek",
"#id": "http://schema.org/Tuesday",
"name": "Tuesday"
},
{
"#type": "DayOfWeek",
"#id": "http://schema.org/Wednesday",
"name": "Wednesday"
},
{
"#type": "DayOfWeek",
"#id": "http://schema.org/Thursday",
"name": "Thursday"
},
{
"#type": "DayOfWeek",
"#id": "http://schema.org/Friday",
"name": "Friday"
}]
},
{
"#type": "OpeningHoursSpecification",
"opens": "15:00",
"closes": "20:00",
"dayOfWeek": [{
"#type": "DayOfWeek",
"#id": "http://schema.org/Monday",
"name": "Monday"
},
{
"#type": "DayOfWeek",
"#id": "http://schema.org/Tuesday",
"name": "Tuesday"
},
{
"#type": "DayOfWeek",
"#id": "http://schema.org/Wednesday",
"name": "Wednesday"
},
{
"#type": "DayOfWeek",
"#id": "http://schema.org/Thursday",
"name": "Thursday"
},
{
"#type": "DayOfWeek",
"#id": "http://schema.org/Friday",
"name": "Friday"
}]
}]
}
</script>
You can embellish with a more precise type of #Service and add time zone information.
I have incorporated ace editor in my project
<div id="page-content-wrapper">
<pre id="editor">
</pre>
</div>
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/text");
editor.setShowPrintMargin(false);
$('#mode').on('change', function(){
console.log("Change");
var newMode = document.getElementById('mode').value
console.log(newMode);
editor.getSession().setMode("ace/mode/" + newMode);
});
</script>
I want to store the contents written on this editor as a text file using php or javascript.
Need help on this.
Thanks in advance.
Cheers :)
I have implemented download file from ACE editor using Controller.
<div id="editor"></div>
<form action="downloadFromAce" method="post">
<textarea type="text" hidden id="valueInput" name=value ></textarea>
<button class="btn btn-primary" id="downloadBtn" type="submit">Download</button>
</form>
And on click of download button send this data (setting data in text area using jquery) form ACE editor to controller on POST request.
<script>
let editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/yaml");
$(document).ready(function () {
$("#downloadBtn").click(function () {
const data = editor.getValue();
$("#valueInput").val(data);
})
})
#PostMapping("/download")
Public void downloadFile(#ModelAttribute DownloadFileContent fileContent,HttpServletResponse response){
try{
response.setContentType("text/plain");
response.setHeader("content-Disposition","attachment;filename=demo.txt");
InputStream is=new ByteArrayInputStream(fileContent.getValue().getBytes());
IOUtils.copy(is,response.getOutputStream());
response.flushBuffer();
}catch(Exception e){
e.printStackTrace();
}
}
}
I have used spring boot for backend. But you can do that using other language also.
Here is a complete example of how to save a file, with a particular extension based on the selected mode.
Populate the mode selection box
Enter text you wish to save
Click the "Save" button in the toolbar
Enter a filename; a default file extension will be provided, based on the mode
Confirm
A dialog will be presented asking where to save the file
I used the following libraries:
jQuery - ace-editor requires it
tingle - nice light-weight plain js modal windows
FileSaver - an HTML5 saveAs() FileSaver implementation
const MODES = getModes();
ace.config.set('basePath', 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.11');
$('select[name="sel-mode"]').append(MODES.map(mode => new Option(mode.text, mode.value)));
const defaultMode = 'text';
const editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode(`ace/mode/${defaultMode}`);
editor.setShowPrintMargin(false);
$('select[name="sel-mode"]').on('change', function(e) {
editor.getSession().setMode("ace/mode/" + e.target.value);
}).val(defaultMode);
$('button[name="btn-save"]').on('click', e => saveDialog.open());
const saveDialog = new tingle.modal({
footer: true,
stickyFooter: false,
closeMethods: ['overlay', 'button', 'escape'],
closeLabel: 'Close',
cssClass: ['dialog-save'],
onOpen: function() {
$('input[name="filename"]').val(`*.${lookupFileExtension()}`);
},
onClose: function() {},
beforeClose: function() {
return true;
}
});
saveDialog.addFooterBtn('Confirm', 'tingle-btn tingle-btn--primary tingle-btn--pull-right', function() {
const filename = $('input[name="filename"]').val();
const file = new File([editor.getValue()], filename, {
type: "text/plain;charset=utf-8"
});
saveAs(file);
saveDialog.close();
});
saveDialog.addFooterBtn('Cancel', 'tingle-btn tingle-btn--danger tingle-btn--pull-right', function() {
saveDialog.close();
});
saveDialog.setContent($('<div>')
.append($('<h1>', {
text: 'Enter a filename'
}))
.append($('<input>', {
name: 'filename'
})).unwrap().html());
function lookupFileExtension() {
const selectedMode = $('select[name="sel-mode"]').val();
const mode = MODES.find(currMode => currMode.value === selectedMode);
return mode.extension || mode.value;
}
// TODO: Extensions need some more work.
// Option text/values via: https://ace.c9.io/tool/mode_creator.html
function getModes() {
return [{
"text": "ABAP",
"value": "abap"
}, {
"text": "ABC",
"value": "abc"
}, {
"text": "ActionScript",
"value": "actionscript",
"extension": "as"
}, {
"text": "ADA",
"value": "ada"
}, {
"text": "Alda",
"value": "alda"
}, {
"text": "Apache Conf",
"value": "apache_conf"
}, {
"text": "Apex",
"value": "apex"
}, {
"text": "AQL",
"value": "aql"
}, {
"text": "AsciiDoc",
"value": "asciidoc"
}, {
"text": "ASL",
"value": "asl"
}, {
"text": "Assembly x86",
"value": "assembly_x86"
}, {
"text": "AutoHotkey / AutoIt",
"value": "autohotkey",
"extension": "ahk"
}, {
"text": "BatchFile",
"value": "batchfile",
"extension": "bat"
}, {
"text": "C and C++",
"value": "c_cpp",
"extension": "cpp"
}, {
"text": "C9Search",
"value": "c9search"
}, {
"text": "Cirru",
"value": "cirru"
}, {
"text": "Clojure",
"value": "clojure",
"extension": "clj"
}, {
"text": "Cobol",
"value": "cobol",
"extension": "cob"
}, {
"text": "CoffeeScript",
"value": "coffee"
}, {
"text": "ColdFusion",
"value": "coldfusion",
"extension": "cfm"
}, {
"text": "Crystal",
"value": "crystal",
"extension": "rpt"
}, {
"text": "C#",
"value": "csharp",
"extension": "cs"
}, {
"text": "Csound Document",
"value": "csound_document",
"extension": "csd"
}, {
"text": "Csound",
"value": "csound_orchestra",
"extension": "csd"
}, {
"text": "Csound Score",
"value": "csound_score",
"extension": "csd"
}, {
"text": "CSS",
"value": "css"
}, {
"text": "Curly",
"value": "curly"
}, {
"text": "D",
"value": "d"
}, {
"text": "Dart",
"value": "dart"
}, {
"text": "Diff",
"value": "diff"
}, {
"text": "Dockerfile",
"value": "dockerfile"
}, {
"text": "Dot",
"value": "dot"
}, {
"text": "Drools",
"value": "drools",
"extension": "drl"
}, {
"text": "Edifact",
"value": "edifact",
"extension": "edi"
}, {
"text": "Eiffel",
"value": "eiffel",
"extension": "e"
}, {
"text": "EJS",
"value": "ejs"
}, {
"text": "Elixir",
"value": "elixir",
"extension": "ex"
}, {
"text": "Elm",
"value": "elm"
}, {
"text": "Erlang",
"value": "erlang",
"extension": "erl"
}, {
"text": "Forth",
"value": "forth",
"extension": "4th"
}, {
"text": "Fortran",
"value": "fortran",
"extension": "f90"
}, {
"text": "FSharp",
"value": "fsharp",
"extension": "fs"
}, {
"text": "FSL",
"value": "fsl"
}, {
"text": "FreeMarker",
"value": "ftl"
}, {
"text": "Gcode",
"value": "gcode"
}, {
"text": "Gherkin",
"value": "gherkin"
}, {
"text": "Gitignore",
"value": "gitignore"
}, {
"text": "Glsl",
"value": "glsl"
}, {
"text": "Gobstones",
"value": "gobstones"
}, {
"text": "Go",
"value": "golang",
"extension": "go"
}, {
"text": "GraphQLSchema",
"value": "graphqlschema"
}, {
"text": "Groovy",
"value": "groovy"
}, {
"text": "HAML",
"value": "haml"
}, {
"text": "Handlebars",
"value": "handlebars",
"extension": "hbs"
}, {
"text": "Haskell",
"value": "haskell",
"extension": "hs"
}, {
"text": "Haskell Cabal",
"value": "haskell_cabal",
"extension": "hs"
}, {
"text": "haXe",
"value": "haxe"
}, {
"text": "Hjson",
"value": "hjson"
}, {
"text": "HTML",
"value": "html"
}, {
"text": "HTML (Elixir)",
"value": "html_elixir"
}, {
"text": "HTML (Ruby)",
"value": "html_ruby"
}, {
"text": "INI",
"value": "ini"
}, {
"text": "Io",
"value": "io"
}, {
"text": "Jack",
"value": "jack"
}, {
"text": "Jade",
"value": "jade"
}, {
"text": "Java",
"value": "java"
}, {
"text": "JavaScript",
"value": "javascript",
"extension": "js"
}, {
"text": "JSON",
"value": "json",
"extension": "json"
}, {
"text": "JSON5",
"value": "json5",
"extension": "json"
}, {
"text": "JSONiq",
"value": "jsoniq"
}, {
"text": "JSP",
"value": "jsp",
"extension": "jsp"
}, {
"text": "JSSM",
"value": "jssm"
}, {
"text": "JSX",
"value": "jsx"
}, {
"text": "Julia",
"value": "julia"
}, {
"text": "Kotlin",
"value": "kotlin"
}, {
"text": "LaTeX",
"value": "latex",
"extension": "tex"
}, {
"text": "LESS",
"value": "less"
}, {
"text": "Liquid",
"value": "liquid"
}, {
"text": "Lisp",
"value": "lisp"
}, {
"text": "LiveScript",
"value": "livescript"
}, {
"text": "LogiQL",
"value": "logiql"
}, {
"text": "LSL",
"value": "lsl"
}, {
"text": "Lua",
"value": "lua"
}, {
"text": "LuaPage",
"value": "luapage"
}, {
"text": "Lucene",
"value": "lucene"
}, {
"text": "Makefile",
"value": "makefile"
}, {
"text": "Markdown",
"value": "markdown"
}, {
"text": "Mask",
"value": "mask"
}, {
"text": "MATLAB",
"value": "matlab"
}, {
"text": "Maze",
"value": "maze"
}, {
"text": "MediaWiki",
"value": "mediawiki"
}, {
"text": "MEL",
"value": "mel"
}, {
"text": "MIXAL",
"value": "mixal"
}, {
"text": "MUSHCode",
"value": "mushcode"
}, {
"text": "MySQL",
"value": "mysql",
"extension": "sql"
}, {
"text": "Nginx",
"value": "nginx"
}, {
"text": "Nim",
"value": "nim"
}, {
"text": "Nix",
"value": "nix"
}, {
"text": "NSIS",
"value": "nsis"
}, {
"text": "Nunjucks",
"value": "nunjucks"
}, {
"text": "Objective-C",
"value": "objectivec"
}, {
"text": "OCaml",
"value": "ocaml"
}, {
"text": "Pascal",
"value": "pascal",
"extension": "pas"
}, {
"text": "Perl",
"value": "perl",
"extension": "pl"
}, {
"text": "Perl 6",
"value": "perl6",
"extension": "pl"
}, {
"text": "pgSQL",
"value": "pgsql"
}, {
"text": "PHP",
"value": "php"
}, {
"text": "PHP (Blade Template)",
"value": "php_laravel_blade",
"extension": "php"
}, {
"text": "Pig",
"value": "pig"
}, {
"text": "Powershell",
"value": "powershell"
}, {
"text": "Praat",
"value": "praat"
}, {
"text": "Prisma",
"value": "prisma"
}, {
"text": "Prolog",
"value": "prolog"
}, {
"text": "Properties",
"value": "properties"
}, {
"text": "Protobuf",
"value": "protobuf"
}, {
"text": "Puppet",
"value": "puppet"
}, {
"text": "Python",
"value": "python",
"extension": "py"
}, {
"text": "QML",
"value": "qml"
}, {
"text": "R",
"value": "r"
}, {
"text": "Razor",
"value": "razor"
}, {
"text": "RDoc",
"value": "rdoc"
}, {
"text": "Red",
"value": "red"
}, {
"text": "RHTML",
"value": "rhtml"
}, {
"text": "RST",
"value": "rst"
}, {
"text": "Ruby",
"value": "ruby"
}, {
"text": "Rust",
"value": "rust"
}, {
"text": "SASS",
"value": "sass"
}, {
"text": "SCAD",
"value": "scad"
}, {
"text": "Scala",
"value": "scala"
}, {
"text": "Scheme",
"value": "scheme"
}, {
"text": "SCSS",
"value": "scss"
}, {
"text": "SH",
"value": "sh"
}, {
"text": "SJS",
"value": "sjs"
}, {
"text": "Slim",
"value": "slim"
}, {
"text": "Smarty",
"value": "smarty"
}, {
"text": "snippets",
"value": "snippets"
}, {
"text": "Soy Template",
"value": "soy_template"
}, {
"text": "Space",
"value": "space"
}, {
"text": "SQL",
"value": "sql"
}, {
"text": "SQLServer",
"value": "sqlserver"
}, {
"text": "Stylus",
"value": "stylus"
}, {
"text": "SVG",
"value": "svg"
}, {
"text": "Swift",
"value": "swift"
}, {
"text": "Tcl",
"value": "tcl"
}, {
"text": "Terraform",
"value": "terraform"
}, {
"text": "Tex",
"value": "tex"
}, {
"text": "Text",
"value": "text",
"extension": "txt"
}, {
"text": "Textile",
"value": "textile"
}, {
"text": "Toml",
"value": "toml"
}, {
"text": "TSX",
"value": "tsx"
}, {
"text": "Twig",
"value": "twig"
}, {
"text": "Typescript",
"value": "typescript",
"extension": "ts"
}, {
"text": "Vala",
"value": "vala"
}, {
"text": "VBScript",
"value": "vbscript"
}, {
"text": "Velocity",
"value": "velocity"
}, {
"text": "Verilog",
"value": "verilog"
}, {
"text": "VHDL",
"value": "vhdl"
}, {
"text": "Visualforce",
"value": "visualforce"
}, {
"text": "Wollok",
"value": "wollok"
}, {
"text": "XML",
"value": "xml"
}, {
"text": "XQuery",
"value": "xquery"
}, {
"text": "YAML",
"value": "yaml",
"extension": "yml"
}, {
"text": "Zeek",
"value": "zeek"
}, {
"text": "Django",
"value": "django"
}];
}
html,
body {
height: 100%;
width: 100%;
}
#page-content-wrapper {
height: 100%;
width: 100%;
}
.toolbar {
display: flex;
flex-direction: row;
height: 2em;
background: #111;
padding: 0 0.25em;
}
.toolbar button,
.toolbar select {
display: inline-block;
height: 1.67em;
margin-right: 0.5em;
align-self: center;
}
#editor {
width: 100%;
height: calc(100% - 3.33em);
}
.dialog-save h1 {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 0.5em;
}
.dialog-save .tingle-modal-box__content {
padding: 2rem;
}
.dialog-save .tingle-modal-box__footer {
padding: 1rem;
}
.dialog-save .tingle-btn {
padding: 0.667rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tingle/0.15.2/tingle.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tingle/0.15.2/tingle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.11/ace.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.11/theme-monokai.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.11/mode-text.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver#2.0.2/dist/FileSaver.min.js"></script>
<div id="page-content-wrapper">
<div class="toolbar">
<select name="sel-mode"></select>
<button name="btn-save">Save</button>
</div>
<pre id="editor"></pre>
</div>
<input type="text" id="input-fileName" value="Result" placeholder="Enter file name">
<button id="download2" type="submit" class="btn btn-primary">Save</button>
<script type="text/javascript">
document.getElementById("download2").addEventListener("click", ()=>{
var filename = $("#input-fileName").val()
var file = new File([editor.getValue()],filename +".h4c", {type: "text/plain;charset=utf-8"});
saveAs(file);
})
Define a button as shown in the code which will trigger the function and the function gets the user input from ace editor and process it to a file with extension, by default i have set extension to .h4c change it according to your need and for the filename i have provided textbox.
I want to fill a grid with a complex json returned from a webservice.
My json contains two things:
data: array with the records that will fill the grid
columns: array with the config(layout) of the grid
I have successfully filled the grid with the "data" by specifying the schema.data.
My problem is that i how to get the "columns" (from the JSON) from the datasource so i can set the grid properties in my gridOptions.
Is there a way to do it?
Here is my JSON
{
"data": [
{
"id": 0,
"firstname": "Dalton",
"lastname": "Holden",
"gender": "male",
"email": "daltonholden#tellifly.com",
"phone": "871-407-2973",
"address": "22 National Drive, Brenton, Louisiana",
"birthday": "21/04/1965",
"currency": "GBP"
},
{
"id": 1,
"firstname": "Allyson",
"lastname": "Odom",
"gender": "female",
"email": "allysonodom#tellifly.com",
"phone": "922-548-2725",
"address": "44 Quincy Street, Thynedale, Georgia",
"birthday": "28/08/1961",
"currency": "CHF"
},
{
"id": 2,
"firstname": "Sweet",
"lastname": "Branch",
"gender": "male",
"email": "sweetbranch#tellifly.com",
"phone": "880-593-2244",
"address": "81 Fenimore Street, Veguita, Missouri",
"birthday": "08/08/1953",
"currency": "AUD"
}
],
"columns": [
{
"field": "firstname",
"title": "Frist Name",
"width": 200,
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "lastname",
"title": "Last Name",
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "gender",
"title": "Gender",
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "email",
"title": "e-mail",
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "phone",
"title": "Phone Number",
"attributes": {
"class": "",
"style": "text-align: right;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: right;"
}
},
{
"field": "address",
"title": "Address",
"attributes": {
"class": "",
"style": "text-align: left;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: left;"
}
},
{
"field": "birthday",
"title": "Birthday",
"attributes": {
"class": "",
"style": "text-align: center;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: center;"
}
},
{
"field": "currency",
"title": "Currency",
"attributes": {
"class": "",
"style": "text-align: center;"
},
"headerAttributes": {
"class": "table-header-cell",
"style": "text-align: center;"
}
}
]
}
And here is my code:
var customersSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://....",
dataType: "json"
}
},
schema: {
data: "data"
}
});
$scope.mainGridOptions = {
dataSource: customersSource,
//columns: Here it should be something like --> customersSource.columns,
height: 500,
scrollable: true,
selectable: true
};
The schema will only take care of fetching and parsing the data that your DataSource needs in order to create views, filter, sort, etc.
There is no built in way of handling "hybrid" content coming from one Ajax-request.
You make a workaround, though. Use the requestEnd event, access the missing data, and save it for later.
var customersSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://....",
dataType: "json"
}
},
schema: {
data: "data"
},
requestEnd: function(e) {
// According to the documentation, this gives you a reference to the datasource instance itself.
this.whatever = e.response.columns;
}
});
Now you can use this thing for later.
$scope.mainGridOptions = {
dataSource: customersSource,
columns: customersSource.whatever,
height: 500,
scrollable: true,
selectable: true
};