Using ItemFileReadStore on Chrome, Safari, Opera or Mozilla works well, however when I try the same source code on Internet Explorer in the developer console writes dojo.data.ItemFileReadStore: Invalid item argument.
You can find JSON under this line:
{"label":"cid","identifier":"cid","items":
[{"cid":"0","cc1":"1111","cc2":"20171216","cc3":"NO TOCAR PRUEBA INFORMATICA","cc4":"<div class='imagepdf'></div>","cc5":"<div><img class='imagok'/></div>"}]}
and the message appears when I double clicked on a datagrid. Everything works well on every browser except Internet Explorer.
Datagrid structure:
tmonitor = new DataGrid({
id:"restmonitor",
//style: "width: 100%; height: 15em;",
escapeHTMLInData: false,
structure: [
{ name: "Id", field: "cid", width: "5%" },
{ name: "Tubo", field: "cc1", width: "15%" },
{ name: "Fecha", field: "cc2", width: "10%" },
{ name: "Nombre", field: "cc3", width: "50%" },
{ name: "PDF", field: "cc4", width: "10%" },
{ name: "Estado", field: "cc5", width: "10%" }
],
rowSelector: '20px',
onRowDblClick: function( evento )
{
var idx = evento.rowIndex;
console.log(idx);
item = tmonitor.getItem(idx); <---- Hangs here.
Thank you.
The problem was with the event. Using dojo/on works right instead using OnRowDblClick.
Thank you
Related
I have the chart bellow and I want to add the percentage to the series body. Like I manipulate the image bellow in red.
how Is this possible?
https://codesandbox.io/s/label-line-adjust-forked-09ukre?file=/index.js
var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
renderer: "canvas",
useDirtyRect: false
});
var app = {};
var option;
var datas = [
////////////////////////////////////////
[
{ name: "test1", value: 20 },
{ name: "test2", value: 40 },
{ name: "test3", value: 40 }
]
];
option = {
title: {
text: "test",
left: "center",
textStyle: {
color: "#999",
fontWeight: "normal",
fontSize: 14
}
},
series: datas.map(function (data, idx) {
return {
type: "pie",
radius: [80, 160],
top: "10%",
height: "33.33%",
left: "center",
width: 400,
itemStyle: {
borderColor: "#fff",
borderWidth: 1
},
label: {
alignTo: "edge",
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 10,
color: "#999"
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
data: data
};
})
};
if (option && typeof option === "object") {
myChart.setOption(option);
}
window.addEventListener("resize", myChart.resize);
Thanks
To place information inside the chart, you have to use position: "inside" in the label. Set what is put inside the label with the formatter. (Here, {c} is the value of a data item)
label: {
formatter: "{c}%",
position: "inside"
},
But it seems that it's not possible to have both a label inside AND one outside the same chart (like in your image). However, a workaround can do the job here. Like using 2 identical series except one has the label from your example code, and one has the label code I wrote above. One chart will be on top of the other (wich is a bit messy) but the result will be as you want :
I have used highcharts in my iphone application, Everything works great except one is that when I click on pagination arrows of legend in highchart, it skips one page and goes to next page.
Say I have 4 pages, so if I am on 1st page right now and click to view another page then it jumps to 3rd page. After clicking next for 3rd page I go to 4th page and when I click on prev it skips 3rd page and jumps to 2nd page. And very important to take note is, its happening on iphone only not browser.
I am surprised to see this and unable to identify why this behaviour is there with pagination...
following is my code for creating highchart
var defaultBarChart = {
options: {
chart: {
type: 'column',
alignTicks:false,
//height: 250,
width: Constants.analyticChartWidth
},
yAxis: {
title: {
text: ''+$filter('translate')('values')
}
},
tooltip: {
enabled: false,
style: {
width: 200,
padding: 10,
lineHeight: "normal"
},
useHTML:true
},
legend: {
verticalAlign: 'bottom',
align: 'left',
x: 0,
itemStyle: {
width: deviceWidth,
'color':'#434f5a',
'font-size':'12px'
},
maxHeight: 105,
navigation: {
activeColor: '#3E576F',
animation: true,
arrowSize: 18,
inactiveColor: '#CCC'
}
},
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [
''
],
crosshair: true
},
tooltip: {
/* style: {
width: 100
}*/
enabled: false
},
/* tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true,
style: {
width: 100
}
},*/
series: [{
name: '',
data: [0],
showInLegend: false
}],
loading: false,
credits: {
enabled: false
}
};
I want to ask, if problem anywhere else other than navigation can affect on it?
Please.. help me to get out of this...!!
I am new to jsTree. As I am in need to represent the node types also along with node names, I have moved to jsTreeGrid. I am in a need to create nodes, rename, delete, edit the tree nodes as well as edit the node types in the second column of the jsTreeGrid. Somehow I could edit the second column (ie.,type column) but the jsTree just displays the contextmenu but their corresponding functions are not called. Help on this would be very useful. Here is my code:
<div id="container"></div>
<script type="text/javascript">
$(document).ready(function(){
var data;
data = [{
text: "Satellite City",
data: {type: "<b>Project</b>", size: "30",spanclass:"root"},
children: [
{text: "Phase-1", data: {type: "<i>Phase</i>", size: "50",spanclass:"first"}},
{text: "Phase-2", data: {type: "<i>Phase</i>", size: "50",spanclass:"second"}, children:[
{text:"Ruby Towers",data:{type: "<i>Tower</i>",size:"50",spanclass:"third"}}
]}
]
}];
$("div#container").jstree({
plugins: ["themes", "json", "grid", "dnd", "contextmenu", "search"],
core: {
data: data
},
grid: {
columns: [
{width: 300, header: "WBS Tree",title:"_DATA_"},
{width: 100,
cellClass: "col1",
value: "type",
header: "<i>Node Type</i>",
valueClass:"spanclass"
},
],
resizable:true,
contextmenu:true
},
dnd: {
drop_finish : function () {
},
drag_finish : function () {
},
drag_check : function (data) {
return {
after : true,
before : true,
inside : true
};
}
}
});
$("input#search").keyup(function (e) {
var tree = $("div#container").jstree();
tree.search($(this).val());
});
});
</script>
I think your problem might be in the jsTree config. Try adding "check_callback": true to its core.
Or check out working fiddle - JS Fiddle.
We are upgrading tinyMCE from v3.5 to v4.2.6 and in previous we used tinyMCEPopup in many places for the requirement. But in new version it raising an error as "ReferenceError: tinyMCEPopup is not defined".
Please suggest me on this.
Please find the below sample custom plugin's js file where we used tinyMCEPopup.
tinyMCEPopup.requireLangPack();
var ImagepopupDialog = {
init : function() {
},
insert : function(text) {
tinyMCEPopup.editor.execCommand('mceInsertContent', false, text);
tinyMCEPopup.close();
}
};
tinyMCEPopup.onInit.add(ImagepopupDialog.init, ImagepopupDialog);
In Tinymce 4 popups are working differently than with Tinymce 3.
Now, you need to call the editor.windowmanager to open up a popup.
The code would be something like this:
win = editor.windowManager.open({
title: "Special character",
spacing: 10,
padding: 10,
items: [
charMapPanel,
{
type: 'label',
name: 'preview',
text: ' ',
style: 'font-size: 40px; text-align: center',
border: 1,
minWidth: 100,
minHeight: 80
},
{
type: 'label',
name: 'previewTitle',
text: ' ',
style: 'text-align: center',
border: 1,
minWidth: 140,
minHeight: 80
}
],
buttons: [
{text: "Close", onclick: function() {
win.close();
}}
]
});
I have a Dojo-DataGrid which is programatically populated as below :
var jsonStore = new dojo.data.ItemFileWriteStore({ url: "json/gaskets.json" });
var layout= [
{ field: "description", width: "auto", name: "Tier/Description", editable:true },
{ field: "billingMethod", width: "auto", name: "Billing Method", editable: true,
type: dojox.grid.cells.Select, options: [ '0', '1' ] },
{ field: "offeringComponents", width: "auto", name: "Offering Component", editable: true,
type: dojox.grid.cells.Select, options: [ '0', '1' ] },
{ field: "serviceActivity", width: "auto", name: "Service Activity", editable: true,
type: dojox.grid.cells.Select, options: [ '0', '1' ] },
{ field: "hours", width: "auto", name: "Hours" },
{ field: "rate", width: "auto", name: "Rate <br/> (EUR)" },
{ field: "cost", width: "auto", name: "Cost <br/> (EUR)" },
{ field: "price", width: "auto", name: "Price <br/> (EUR)" },
{ field: "gvn", width: "auto", name: "Gvn" }
];
grid = new dojox.grid.DataGrid({
query: { description: '*' },
store: jsonStore,
structure: layout,
rowsPerPage: 20
}, 'gridNode');
The options for the field billingMethod (Currently defined as dojox.grid.cells.Select) are hard coded right now, but I would like to get those values dynamically from the backend as JSON. But dojox.grid.cells.Select currently(I am using Dojo 1.5) does not have a option to define a "store".
I am trying to use dijit.form.FilteringSelect, but this needs a id(of a Div) for its constructor and I cannot specify one as this select box has to go with in the grid, rather than a separate DIV.
Thanks
Sandeep
Your answer works fine, the issue is that in the combo the user can select A, but once the combo lose the focus, the value 1 will be shown. Some months ago I had the same problem, and I got a solution from KGF on #dojo. The idea is to have a formatter on the cell that just creates a SPAN element, and then it invokes a query over the store to get the label of the selected element and put it on the SPAN. I modified your example to get that working.
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.cells.dijit");
dojo.require("dojox.grid.DataGrid");
dojo.require("dijit.form.Select");
dojo.require('dojox.grid.cells.dijit');
dojo.require('dijit.form.FilteringSelect');
var grid;
var jsonStore;
dojo.addOnLoad(function() {
jsonStore = new dojo.data.ItemFileWriteStore({
data: {
"identifier": "identify",
"label": "description",
"items": [
{
"identify": 123,
"description": "Project Manager"},
{
"identify": 234,
"description": "Developer"},
{
"identify": 536,
"description": "Developer",
"billingMethod":2}
]
}
});
var myStore = new dojo.data.ItemFileReadStore({
data: {
identifier: 'value',
label: 'name',
items: [{
value: 1,
name: 'A',
label: 'A'},
{
value: 2,
name: 'B',
label: 'B'},
{
value: 3,
name: 'C',
label: 'C'}]
}
});
//[kgf] callback referenced by formatter for FilteringSelect cell
function displayValue(nodeId, store, attr, item) {
if (item != null) { //if it's null, it wasn't found!
dojo.byId(nodeId).innerHTML = store.getValue(item, attr);
}
}
var layout = [
{
field: "identify",
width: "auto",
name: "Id 2 Hide",
hidden: true},
{
field: "description",
width: "auto",
name: "Tier/Description",
editable: true},
{
field: 'billingMethod',
name: 'Billing Method',
editable: true,
required: true,
width: '150px',
type: dojox.grid.cells._Widget,
widgetClass: dijit.form.FilteringSelect,
widgetProps: {
store: myStore
},
formatter: function(data, rowIndex) { //[kgf]
//alert("data "+data)
var genId = 'title' + rowIndex;
var store = this.widgetProps.store;
var attr = "label";
setTimeout(function() {
store.fetchItemByIdentity({
identity: data,
onItem: dojo.partial(displayValue, genId, store, attr)
});
}, 50);
//for now return a span with a predetermined id for us to populate.
return '<span id="' + genId + '"></span>';
}
}
];
grid = new dojox.grid.DataGrid({
query: {
description: '*'
},
store: jsonStore,
singleClickEdit: true,
structure: layout,
rowsPerPage: 20
}, 'gridNode');
grid.startup();
});
I was finally able to figure this out..Incase someone wants to implement same kind of stuff using DOJO Datagrid+FilteringSelect.
Sample Code
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.cells.dijit");
dojo.require("dojox.grid.DataGrid");
dojo.require("dijit.form.Select");
dojo.require('dojox.grid.cells.dijit');
dojo.require('dijit.form.FilteringSelect');
var grid;
var jsonStore;
dojo.addOnLoad(function() {
jsonStore = new dojo.data.ItemFileWriteStore({
data: {
"identifier": "identify",
"label": "description",
"items": [
{
"identify": 123,
"description": "Project Manager"},
{
"identify": 234,
"description": "Developer"},
{
"identify": 536,
"description": "Developer"}
]
}
});
var myStore = new dojo.data.ItemFileReadStore({
data: {
identifier: 'value',
label: 'name',
items: [{
value: 1,
name: 'A',
label: 'A'},
{
value: 2,
name: 'B',
label: 'Y'},
{
value: 3,
name: 'C',
label: 'C'}]
}
});
var layout = [
{
field: "identify",
width: "auto",
name: "Id 2 Hide",
hidden: true},
{
field: "description",
width: "auto",
name: "Tier/Description",
editable: true},
{
field: 'billingMethod',
name: 'Billing Method',
editable: true,
required: true,
width: '150px',
type: dojox.grid.cells._Widget,
widgetClass: dijit.form.FilteringSelect,
widgetProps: {
store: myStore
}}
];
grid = new dojox.grid.DataGrid({
query: {
description: '*'
},
store: jsonStore,
singleClickEdit: true,
structure: layout,
rowsPerPage: 20
}, 'gridNode');
grid.startup();
});