I've been looking into dgrid and I'm trying to figure out if there's a way to attach an event to a grid that uses dojo/on without explicitly calling grid.on but, instead, passes it as a method (or set of methods) in the initial configuration of the grid. The reason for this is because the grid instance itself out of scope upon creation and I can't find any documentation on it.
So, instead of
var grid = new (declare[Grid])({}, element);
grid.on('.dgrid-row:click', function(){console.log('Hello World!')});
having something like
var grid = new (declare[Grid])({
'events' : {
'.dgrid-row:click' : function(){console.log('Hello World!')}
}
}, element);
Ideas? Alternatives?
You can use the the DijitRegistry extension, which will allow you to get a reference to your grid like you would with a normal dijit widget, through registry.byId... then you can use grid.on, as usual.
Example : https://github.com/SitePen/dgrid/wiki/DijitRegistry
Related
How to access/Find elements not read by FLAUI using UIA2 or UIA3?
since FLAUIInspect does not show up any of the available element under the window (while inspect.exe shows all available elements) FindAll (Children/Descendants) will not give any element.
is there a wat to get these elements using FLAUI??
First, you have to access the element you need to see. On your case, the ""pane it's a Control Type Panel inside the main window, so you gonna have to do something like this:
var automation = new UIA3Automation();
var app = FlaUI.Core.Application.Attach(application.Process.Id); //Here you can attach or start a application by path
var window = app.GetMainWindow(automation); //Get hold of the window
var allObj = window.FindAllChildren();
var panel = allObj.Where(x => x.AutomationId == "16386096").FirstOrDefault().FindAllChildren(); //Here you can use other property unique to the panel, I used the AutomationId for example
After you get hold of the panel, you can now find all the children objects.emphasized text
You need to expose the AutomationPeer for that element which is not being found by FlaUI
I would like to perform a programmatic view transition.
Here is a code I've tried :
var v = registry.byId('myenergy-pane');
v.transitionTo("home-pane");
Here is another one
var v = registry.byId('myenergy-pane');
v.performTransition("home-pane",1,"slide",null);
None of them is working.
Thanks for your help.
The second code you provided should work, but that's considering the following facts:
The code is executed after the DOM is loaded and the views are parsed by the dojo/parser. The correct way to indicate that is by using dojo/ready, for example:
require(["dojo/ready"], function(ready) {
var v = registry.byId('myenergy-pane');
v.performTransition("home-pane", 1, "slide", null);
});
Both given IDs (myenergy-pane and home-pane) are related to a widget (not only a DOM node) and are both views (dojox/mobile/View or inheriting from).
Make sure you are loading dijit/registry and the registry module alias is actually mapped to the correct module.
I also made a JSFiddle to demonstrate that it should be working: http://jsfiddle.net/g00glen00b/3JMnC/
I have an dojo enhanced grid inside a title pane which inturn in Tabcontainer. I am creating a tab container dynamically and painting the title pane which contains grid. For the first time the grid is painted properly but if i close the tab and again try it to open a tabcontainer title pane is painted but grid inside the titlepane is not painted (or rather its not visible) until i do a browser resize.
So anybody have faced similar kind of issue? Please let me know the solution for this.
I tried resize(), update() & startup() methods on grid nothing worked out.
I am kind of stuck please share your thoughts on this.
Thanks,
Vikram
I had the same problem and found a workaround by doing a dojo connect like:
dojo.connect(Datagrid,"_onFetchComplete",DataGrid,"_resize");
So it should automatically be resized, when DataGrid finished loading data.
Hope I could help.
Greeting, Simon
Have you tried setting an absolute height on the Grid?
Which browsers did you try? (I experienced various problems with DataGrid in TabCointainer using IE)
You must call the TabContainer.layout() each time its container is changing size. For doing this, you could 1) monitor DOMEvents onunderflow and onoverflow on containing DOMNode or 2) when container becomes visible (once-n-forall).
Reason why a window.onresize event fixes it is, that the TabContainer hooks on said event and calls its own layout.
In your situation, where the TabController fiddles with TabContainer's panes, there may be missing a 'layoutChildren' somewhere. Optimally, you should place the grid as the first on only child to tab.
After the grid is deployed, it will take an absolute, calculated height - 'inherited' from the TabContainer. This is fired once the TabContainer chooses to resize or instructed to do so.
Manually, you should be able to implement these lines - after re-opening a tab. The script is taken from _Grid.js to illustrate
var grid = dijit.byId('MYGRIDID');
require(["dijit/layout/utils"], function(layerUtils) {
layoutUtils.layoutChildren(grid.domNode,
grid._contentBox,
[grid.tablist, {
domNode: grid.tablistSpacer,
layoutAlign: titleAlign
}, {
domNode: grid.containerNode,
layoutAlign: "client"
}]);
grid._containerContentBox = layoutUtils.marginBox2contentBox(grid.containerNode,
{
domNode: grid.containerNode,
layoutAlign: "client"
});
// note this line in particular
grid.selectedChildWidget.resize(grid._containerContentBox);
}
My issue
I had a similar situation as yours:
Grid is in a titlepane (closed by default).
Grid can be destroyed and re-created on the fly.
Issue appears when user:
opens the pane.
closes the pane.
re-creates the grid.
re-opens the pane.
grid is not visible, until browser window is resized!
My solution
My approach was to force a resize() on my grid whenever the title pane was being opened.
I used code like this, in a place where I had access to both the grid and the panes:
var titlePane = registry.byId("title-pane-id");
var handle = aspect.after(titlePane, "toggle", function(deferred) {
if (titlePane.open) {
grid.resize();
}
});
The dojo/aspect doc
Don't forget to remove the aspect from your grid if you destroy it.
I did this on dojo v1.8.1
My solution is too easy: define on declaration of grid the bold parameter write here:
grid = new EnhancedGrid({id: 'MyIDgrid',
store: dataStore = new ObjectStore({objectStore: myStore}),
structure: structureGrid,
plugins: pluginGrid,
style : 'width: 725px; height: 350px',
autoWidth : true,
**autoHeight : false,height:'200px',**
elasticView : '2'
}, document.createElement('div'));
this resolve all!
Enjoy!
style="height: auto;" will fit the purpose.
I have a TabContainer with different tabs (ContentPanes). I am loading each type dynamically when the user selects something from a tree. I would like to be able to run a certain JS function on the newly loaded ContentPane/Tab. So something in this form:
dojo.forEach(
dojo.query("select"),
function(selectTag) {
selectTag.disabled = true;
}
);
However, I only want to process this on the newly loaded ContentPane/Tab... so let's say given a ContentPane/Tab Dojo Object, how do I do a forEach/query on its content only?
Thanks
You can give dojo.query a second argument telling it in which DOM node to start looking. So if you have a ContentPane with id "fooTab", you can do:
dojo.forEach(dojo.query("select", "fooTab"),
function(selectTag) {
....
}
);
Now, technically, "fooTab" is the "dijit ID", but the dijit's/ContentPane's outermost DOM node will also have an id "fooTab". Perhaps not the kosher way, but it works.
I have a requirement where I need to create a dojox.layout.ContentPane programmatically.
function constructContentPane(methodToBeCalled){
var testCntPane=new dojox.layout.ContentPane({
href: "some url",
executeScripts: true,
cleanContent: true,
onDownloadEnd: methodToBeCalled
}).placeAt("testContentPaneId");
testCntPane.startup();
}
This places the content pane inside testContentPaneId and calls methodToBeCalled method once the content pane is created.
I have two questions.
How do I check if the content pane is already created or not? I tried to check using the code below
if(dijit.byId("testContentPaneId") == undefined) {
//then don't create again
}
But this did not work. Each time it creates the content pane with the id dojox_layout_ContentPane_0. The last digit gets incremented each time.
Is this the right way to pass the onComplete method as argument? This is how I invoke this
constructContentPane(thisMethodWillBeCalled);
Is there any better way to do this? How do I invoke that method? I tried using eval(methodToBeCalled), but that did not work.
When you use the placeAt() method then the widget will be placed as a child to the specified dom node. I think in your case you should pass the dom directly to the constructor of the content pane.
Try doing like this instead:
var testCntPane=new dojox.layout.ContentPane({
href:"some url",
executeScripts:true,
cleanContent:true,
onDownloadEnd:methodToBeCalled
}, "testContentPaneId");
This will also make sure that the id of the content pane is testContentPaneId