I am trying to display a dojo grid on click of a button.
This is the function that gets called once the button is clicked:
function initAndDisplayDataGtrid(){
var dataStore = new dojox.data.CsvStore({url: path});
var chartDivNode=dojo.create("div");
chartDivNode.setAttribute("id","chartDivId");
chartDivNode.setAttribute("class", "toggle_container");
var grid = new dojox.grid.DataGrid({
query: {},
store: dataStore,
autoWidth:"2",
autoHeight:"5",
columnReordering:true,
structure: chartLayout,
noDataMessage: localizedLabel.NO_RESULTS
});
grid.placeAt("chartDivId");
grid.startup();
}
But this is throwing an error: TypeError: _3d6 is null when I check in firebug.
Not sure what might be null at this point.
In the code you have provided, you dynamically create a new element that you then call "chartDivId". You then execute a "placeAt" call to place your newly created grid as a child of "chartDivId". However, the placeAt call searches the document and won't find "chartDivId" because it has not yet been attached to the document as a whole.
See the following Dojo documentation on how to create a new element and insert it into the page.
http://dojotoolkit.org/reference-guide/1.7/dojo/create.html
It seems that there are parameters to the dojo.create() method. The 1st is the type of element to create, the 2nd are any options you may wish to pass ... but the 3rd is where within the document the new element should be attached.
Related
This is an instance of Rappid Toolkit which uses jointJS for building visual tools as for web development. http://i.stack.imgur.com/6XSis.png
In this toolkit you can make a graph which can become a website.
My problem is the following one:
In every single element of this graph there is a box below it with:x,y,width,height,angle.
I want to change this information of this boxcontent and to display some info from this element but the code in which I have to add my snippet is the following(var Halo is the var for my element in the graph):
var halo = new joint.ui.Halo({
cellView: cellView,
boxContent: function(cellView) {
return"Here I want to display my box content info instead of x,y,width,height, angle";
}
}).render();
If I try to add my code inside it to access in JSON format my current element info my full code is:
var halo = new joint.ui.Halo({
cellView: cellView,
boxContent: function(cellView) {
// Drawing
var selectedObjectDataText = JSON.stringify(this.cellView.toJSON());
var selectedObjectDataJSON = JSON.parse(selectedObjectDataText);
return(selectedObjectDataJSON[0].wi_name);
}
}).render();
where wi_name is the name of my element but in the first line I can't access the specific element of my graph.
var selectedObjectDataText = JSON.stringify(this.cellView.toJSON());
Is there any global way to access my halo(my graph element) since this.cellView.toJSON() doesn't work?
I tried this.model.toJSON() this.cellView.model.toJSON() etc with no result
Note that JointJS links and elements are Backbone Models (linkView and elementView are Backbone Views).
To get the current value of an attribute use get() method.
boxContent: function(cellView) {
return cellView.model.get('wi_name');
}
Alternatively you can use prop(), that can return also nested properties of a model.
boxContent: function(cellView) {
return cellView.model.prop('wi_name');
}
It worked for var selectedObjectDataText = JSON.stringify(cellView.model.toJSON());
Thank you all for your support.
I am displaying a form in pop up using window.showmodeldialog. The form which is being displayed in pop up contains multiple panels.I want to show/hide panel on the basis of dropdown value supplied as a parameter.
Please help.
You can use window.open method and use the object returned by that to access the new window instance. The returned object can be used to access properties and methods of the new window provided it complies with Same origin policy security requirements.
var url="url to the new page here";
var newWindow = window.open(url);
And in the new window's js code, you can create a method like
function updateOptions(selection)
{
alert("call reecived from parent");
//Hide or show based on selection value
}
When user changes something on the parent window, you may call the updateOptions() method on the handle received from the window.open method.
newWindow.updateOptions("PassSomeRealValuesHere");
I'm pretty new to Dojo and working version 1.10.
I'm looking for a solution to create a widget at runtime, based on data requested from a server.
The application has a tree. If you click on a item in the tree a new tab should be created and a script should be executed to get the data from the server and create the widget. (In most cases its a form, the data from the server describes the types of inputs). The location of the script is stored in the tree node.
At the moment in my application I can click on the tree node -> a contentpane is created and added as a tab. In the contentpane the href-attribute is set to static .html-site like this:
dynWidget.html?scriptlocation=abc
In the .html file I tried to read the parameters from the URL via the location attribute. This, of course, does not work, because the location attribute contains the URL of the complete site not the URL attached in the content pane.
Is there a possibility to get the href-attribute from the contentpane?
Is there a completely diffrent solution for this problem?
Any help appreciated!
Thank you very much!
Your question could do with more detail, but maybe you need:
var node = dojo.byId("contentpane");
var value = domAttr.get(node, "href-attribute");
Save data about tree items in dedicated store
Use Object Pool Pattern for saving opened tabs list
Use require and Widget.addChild()
// Custom name for click event handler. Replace to own.
onItemClick: function(item) {
// Getting data from store. Any item have full path to widget.
var dataItem = store.get(item.id),
requirePath = dataItem.requirePath; // Full path to widget
// Load widget via require function
require([ requirePath ], function(LoadedWidget){
var newTab = new ContentPane({}),
newWidget = new LoadedWidget({});
// Append tab in the global tabs store
desktop.tabs.add(newTab);
// Place new widget to tab
newTab.addChild(newWidget);
// Run new widget:
newWidget.startup();
});
}
Also example for creating widget in runtime:
define([
"dojo/dom-construct",
"dojo/_base/declare",
"dijit/_WidgetBase"
], function(
domConstruct,
declare,
_WidgetBase
){
return declare(
"My.Widget.Name",
_WidgetBase,
{
buildRendering: function(){
this.inherited(arguments); // Call parent method
this.domNode = domConstruct.create("div", {
// Detail properties of DOM element
});
this._button = domConstruct.create("button", {
label: "OKAY"
});
},
_okBtnHandler: function(event) {
// Handler for click by OKAY button
console.log(this); // Instance of widget, not button DOM node
},
startup: function(){
this.inherited(arguments);
// Connect handlers to widget dom elements
// Also, "this" for handler now is My.Widget.Name instance, not DOM Button element
this.connect(this._button, "onClick", "_okBtnHandler");
}
}
);
});
I am exploring using DGrid for my web application. I am trying to have a table similar to this.
The code for the example above is here.
The table uses a memory store as the source of its data - the summary field there is what shows up when we click and expand each row.
I want the details(i.e the text shown when we click a row) to be fetched from the server on clicking on the row instead of being statically loaded along with rest of the page.
How do I modify the above code to be able to do that?
(My requirement is that of an HTML table, each row expandable on clicking, where the data on each expansion is fetched from the server, using AJAX for instance. I am just exploring dgrid as an option, as I get sortable columns for free with dgrid. If there is a better option, please let me know)
EDIT: Basically I am looking for ideas for doing that and not expecting anyone to actually give me the code. Being rather unfamiliar with Dojo, I am not sure what would be the right approach
If your ajax call returns html, you could place a dijit/layout/ContentPane in your renderer, and set the url of the contents you want to fetch in the ContentPane's href property. Assuming that your initial data (the equivalent of the example's memory store) would have a property called "yourServiceCallHref" containing the url you want to lazy load, your could try this :
require(["dijit/layout/ContentPane", ...], function(ContentPane){
renderers = {
...,
table: function(obj, options){
var div = put("div.collapsed", Grid.prototype.renderRow.apply(this, arguments)),
cp = new ContentPane({
href : obj.yourServiceCallHref
}),
expando = put(div, "div.expando", cp.domNode);
cp.startup();
return div;
}
});
If your service returns json, you could probably do something with dojo/request in a similar fashion. Just add your dom creation steps in your request callback and put them inside the div called "expando"...
Another option would be to replace the Memory store by a JsonRest store, and have the server output the same json format than the one you see on the Memory store. That means all the data would be fetched in a single call though...
I tried removing all options from dijit.form.filteringselect and adding an option to dijit.form.filteringselect using the below function. However, I am getting an error: no method getOptions and addOption. am using dojo 1.7
function showTablesDropDown(tableDiv){
dijit.byId(tableDiv).removeOption(dijit.byId(tableDiv).getOptions());
dijit.byId(tableDiv).addOption(dojo.create("option", {label:"None", value:"None"}));
}
How to remove all options from dijit.form.filteringselect and add option to dijit.form.filteringselect?
The problem here is just a slight misunderstanding of how the FilteringSelect (and anything that inherits from _AutoCompleterMixin) interacts with its data. Regardless of how you are creating the FilteringSelect widget, the underlying mechanism for controlling its options is an object that adheres to the Dojo Store API.
This means that in order to modify your FilteringSelect widget's options, you need to interact with this store instead. I've set up this fiddle to demonstrate, but basically you want to change your function to something like:
function showTablesDropDown(tableDiv){
var filteringSelectWidget = dijit.byId(tableDiv);
// Clear current value since options are changing.
filteringSelectWidget.set("value", "");
var store = filteringSelectWidget.get("store");
var newData = [{label: "None", value: "None"}];
// Give the underlying store a new data array.
store.setData(newData);
}