I am a new bee to Silverlight and its controls, at present I am doing experiments with Child windows so at present this is my scenario,
I have created a child window by adding a child window item my project, to use it I have created an object like below
ChildWindow1 obj_ChildWindow1 = new ChildWindow1()
Generally we assign a content that we create in the respective child window, but I append different xaml page to its content by creating a new xaml page like below
Page2 obj_page2 = new Page2();
obj_ChildWindow1.Content = obj_page2
so that what ever controls and function I do on the page2 that are present inside the Childwindow, until now it is fine everything is working as per my guess,
but how to close the child window after firing of some event in the page2, how to do that?
Second point is how set the size of the Page2 with respect to the ChildWindow
Thanks in advance.......
Got the answer but I don't think that is the right way to approach,i sent the object of the childwindow and I received it in the Constructor of the page2, and close the Childwindow using that
Related
I have a dashboard built using dojo dijits. One of the dijit is dojo calendar widget.
In this dashboard I am embedding an iframe to it. I want to change the value of the calendar widget from within the iframe.
The issue is since it is not just about changing the text value in the input box of calendar dijit it is also about calling the on change event. So I am using the following
dijit.byId('dijit_form_DateTextBox_1').set('value', datFrom);
This way the value gets updated as well as the change event is fired.
Now since I want to do this from within the iframe I need to get reference to calendar dijit in parent HTML page.
If this is a simple Javascript I would have used following to get to that DOM Element and change the value.
const targetNode = $('#'+divId, window.parent.document)[0];
But since this is dojo so I am unable to get this as a dijit object. Is there a way to get dijit from Parent page
Since the dataTextBox is inside iframe, it's in different scope, and looks like you are not using dojo in AMD pattern.
What you could do is get the object from iFrame's contentWidow and call byID() like any other function, example
var _dijit = document.getElementById("iframeId").contentWindow.dijit;
var dateTextBox = _dijit.byId('dijit_form_DateTextBox_1');
dateTextBox.set('value', datFrom);
or better is, you just call a global reference your own function rather than taking reference of dijit.
Is there a way to bind an event callback so that it's called for all instances of Magnific Popup? On a site I'm building several elements have fixed position and "jump" when the main browser scrollbar disappears. I want to set a callback to add padding for those elements before any popup is opened, and remove the padding when the popup is closed. I don't want to re-use the callbacks every time I initialize Magnific Popup – I'd rather set one set of callbacks that is run every time Magnific opens and closes a popup.
My first thought was to use event delegation and bind pretty high in the document tree. I was trying to bind to the mfpOpen event and listen on the BODY tag, but it doesn't seem like the event bubbles. Is there another solution?
Events are dispatched only on target element or on document (if target element is not present).
But you may override open function globally using prototype, e.g.:
$.magnificPopup.instance.open = function(data) {
console.log('before open anything');
$.magnificPopup.proto.open.call(this,data);
console.log('after open anything');
};
You may do the same thing with close function (it doesn't have any arguments).
I make a partialRefresh on a tab container with 4 tabs:
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="djContentPane1">
<xp:this.action><![CDATA[#{javascript:viewScope.put("hideRelatedDocuments", true);}]]></xp:this.action>
</xp:eventHandler>
The viewScope is then used to some fields which I want to hide/show. Those fields lay on the tab container.
And after this, the tab container looks strange:
What might be the problem? Thanks for your time.
I tried adding a mainPanel, and on this panel I added the TabContainer. Then, I updated the panel but sttill, no work. The result:
You can refresh the fields to show/hide them depending on current value in combobox field if you
put the fields into panels which have an id and always gets rendered
place the panels into the Tab Panels
refresh all panels on onchange event of your combobox with XSP.partialRefreshPosts
Look for the sample code here.
It's because you're refreshing the content pane. I've not pinned down the cause, but refresh either an area outside the Dojo Tab Container or a panel/div that's inside the Tab Container Pane you want to refresh.
I suspect it's something to do with Dojo then processing the response HTML. As a client-side framework, I don't think Dojo is really designed to handle replacing HTML by injection into an existing page.
Tommy Valand added a snippet to handle this problem: http://dontpanic82.blogspot.co.uk/2013/03/fix-for-partial-refresh-on-dojo-tab.html
In our application, there is a tabpanel in which we are adding/removing the panel dynamically.
The panels get added at the click of a menu item by the following code in menu handler:
Ext.getCmp('mainTabPanelId').add(getPanel());
Here getPanel() method returns the panel after creating it.
Assuming that the id of main tab panel is mainTabPanelId and that of the child panel is panelId, in this context, could someone guide at the following:
Is it necessary to call doLayout() on mainTabPanel after the add method?
Should the doLayout() be called on the mainTabPanel or on the newly added child panel, that is, Ext.getCmp('mainTabId').doLayout() or Ext.getCmp('panelId').doLayout()?
Will a call to doLayout() take care of all the issues related to rendering, like scrollbars esp.?
The method getPanel() should return an already created panel (using Ext.create) or should it return a config object (having xtype:'panel')? Which one should be preferred for better performance keeping time in mind?
AbstractContainer::add()
<...> If the Container was configured with a size-managing layout manager, the Container will recalculate its internal layout at this time too.
So you don't have to do 1 — 3 because:
AbstractContainer::doLayout()
<...> The framework uses this internally to refresh layouts form most cases.
AbstractContainer::defaults
For defaults to work, the child items must be added using {xtype: ......} NOT using Ext.create("widget.type",{}) © roger.spall
So I'd prefer return configuration object instead of components itself.
I see that there are three events fired when a tab is selected and I see the order in which the events are fired but I'm rather confused about which event to use or how these are truly different. If all three are fired, couldn't I just put my code in any of the events?
I must be missing something here. Can someone clarify?
So after messing with this more I'm going to share what I ended up doing in the hopes that it might help someone else.
I had to generate dynamic tabs based on data returned in an Ajax call. It's basically data by date where the tabs are the date and they display whatever data falls within that date.
Generating the tabs from the returned data was easy but I couldn't figure out how to write out the associated data. Finally (and I should have started here), I looked that the generated dom and noticed that a dynamically created tab also creates a div. Maybe that's obvious to some (it wasn't to me) and if it was in the documentation I missed it. Anyway, this code will generate tabs from an array and then append html to the associated div when the tab is clicked. I don't need all the variables but I thought that might make it more readable. Put the function for show before adding the tabs or it wont work!
var _sessionDates = getSessionDates(sessionData.Sessions);
var $tabs = $("#sub-tabs");
$tabs.tabs({
show: function(event, ui) {
var selected = $tabs.tabs('option', 'selected');
var _sessionDates = getSessionDates(sessionData.Sessions);
var grid = buildGrid(_sessionDates[selected]);
$('#' + _sessionDates[selected]).html(grid);
}
});
$(_sessionDates).each(function(i, dayOfShow) {
var d = dateFormat(dayOfShow, "mediumDate");
$tabs.tabs('add', '#' + dayOfShow, d);
});
Finally, I have to "scroll" through my data shown in the tab and I was able to do that with these two lines. The first line gives me the id of the div element corresponding to the selected tab (which is really the important part) and the second line just calls my method and passes in the id of the div less the '#'. My date is also my id. There's a global variable that I've changed outside of this that makes it work. I know that's bad and I'll remove it when I refactor it.
var $el = $($('#sub-tabs a')[$('#sub-tabs').tabs('option', 'selected')]).attr('href');
$($el).html(buildGrid($el.replace('#', '')));
select is triggered when a tab is clicked on, but before the tab has been shown
load is triggered after the contents of a remote tab have been loaded (i.e. a tab whose content is not part of the initial page payload, but that is loaded via an ajax call when the user clicks on the related tab)
show is triggered after a tab has been shown
The jQuery documentation makes this relatively clear, but I had to experiment in order to fully understand the difference between select and show.
This has been made more clear since the original question was asked so now the following is true:
Effectively, the functionality for "show" is now provided by "activate" and "select" is done with "beforeActivate" while "load" is still the same.
activate: (previously show) Triggered after a tab has been activated (after animation completes)
beforeActivate: (previously select) Triggered immediately before a tab is activated.
load: Triggered after a remote tab has been loaded.
Also provided are:
beforeLoad: Triggered when a remote tab is about to be loaded, after the beforeActivate event.
create: Triggered when the tabs are created.