I'm building a web-application in JavaScript using the dojo framework. I want to create new tabs during runtime (I have a TabPane and add ContentPanes) and want to create data grids in that Panes. (Specificly LazyTreeGrids but they extend the data grid class so it should be the same)
When I do this I get several errors:
ReferenceError
../dojo-release-1.7.2-src/dojo/_base/Deferred.js:216
Error parsing in _ContentSetter#Setter_dijit_layout_ContentPane_0_0
ReferenceError
../dojo-release-1.7.2-src/dijit/layout/ContentPane.js:543
Error undefined running custom onLoad code: This deferred has already been resolved
When I run the TabPane without the data grid or if I run the data grid without the TabPane (and at page load) it works just fine. Do you have any ideas how I could solve my problem?
The relevant code:
dojo.ready(function(){
var tabPanel = new dijit.layout.TabContainer({
style: "height: 100%; width: 100%;"
}, "mainWindow");
//console.error("tset");
var console = new contentPane.console("test");
var cp1 = new dojox.layout.ContentPane({
title: "HomeScreen",
content: ""
});
tabPanel.addChild(cp1);
var cp2 = new dojox.layout.ContentPane({
title: "+",
content: ""
});
tabPanel.addChild(cp2);
tabPanel.startup();
require(["dojo/dom-attr"], function(domAttr){
domAttr.set(cp1, "content", console.getContent() );
});
});
You have to make sure the pane is loaded before starting the grid.
Note that you could have the grid being the direct child of the TabContainer.
tabContainer.addChild(myGrid);
Related
I want to add a new navigation button in telerik radwizard(reference). Is there any way to do so in ASP.NET, I read all the documents shared by telerik but couldn't find a way to achieve it. Any help would be appreciated.
I also had a similar requirement, but was not able to find a out of the box solution to include a custom navigation button for the Telerik RadWizard.
Please in-cooperate the the below JavaScript, which would to add a custom button to the navigation button area:
<telerik:RadScriptManager runat="server"></telerik:RadScriptManager>
<script type="text/javascript">
/* NOTE: This code block is inserted at this location, but not in the main Script block within RadCodeClock at the begining of this page due to the the below error;
'JavaScript runtime error: '$telerik' is undefined'
In order to avoid such errors, move the script tag below the declaration of the ScriptManager.
*/
var $ = $telerik.$;
var oldInitializeEvents = Telerik.Web.UI.RadWizard.prototype._initializeEvents;
Telerik.Web.UI.RadWizard.prototype._initializeEvents = function () {
/*var myLi = $('<li>', { "class": "rwzLI rwzRight" }).appendTo('.rwzNav'); // Add the button adjacent to Next/ Previous*/
var myLi = $('<li>', { "class": "rwzLI" }).appendTo('.rwzNav'); // Add the button adjacent to Cancel/ Submit
var spanElement = $('<span>').addClass("rwzText").text("Save");
$("<button>", {
"id": "rwCustNavBtn_Save", "class": "rwzButton", "type": "button", click: function myfunction() {
CustNavBtn_Save_OnClick(); // Save the Grant
return false;
}
}).append(spanElement).appendTo(myLi);
oldInitializeEvents.call(this);
}
</script>
Note:
Ensure to include the above JavaScript tag below the declaration of the ScriptManager, to avoid runtime errors.
rwzRight CSS class determine the location of the custom button and make use it based on your requirement (refer the comments within the script tag)
Hope this is what you are after and Mark as Reply if so. Good luck!
Source: RadWziard navigation button templates/control
I want show the info window for google maps. But the data or view is a ui5 view as below,
var oView = sap.ui.view({
type : sap.ui.core.mvc.ViewType.XML,
viewName :"com.example.view.ListView"
});
And this view is perfect.
Mainly I have the google info window and I need to place this inside that info window as follows,
var infowindow = new google.maps.InfoWindow({
content: view, //Here I am getting below error
position: coordinate
});
infowindow.open(map);
So i am getting
InvalidValueError: setContent: not a string; and Element-
In this I know I can place a domNode or string inside the google info window's content. So I need to know how can we convert this ui5 view to domNode or any other solution.
You can get the DOM Node of a SAPUI5 View or Control by using the method getDomRef
var infowindow = new google.maps.InfoWindow({
content: view.getDomRef(),
position : coordinate
});
infowindow.open(map);
Please be aware that a SAPUI5 View/Control only has a DOM Reference after it was first rendered. Furthermore after a potential rerendering you might have to re-apply the above code.
BR Chris
from the last version update (from openui5 1.36.12 to openui5 1.38.4) the following code is not working anymore:
var myTable = new sap.ui.table.Table();
myTable ._oVSb.attachScroll(function() {
colorTheTableRows();
})
I'm using the "attachScroll" event in order to color the table rows with a specific logic.
Since last openui5 version update I get this error in console:
Uncaught TypeError: Cannot read property 'attachScroll' of undefined
I've tried to debug the problem and it seems that the object _oVSb has be removed from sap.ui.table.Table.
My final goal is to paint the rows with different colors based on the content ... is there any other way to reach this feature?
Thanks
Even i want this event some how came to this thread. i tried #Dopedev solution it was not working then i changed bit in that as below
$("#<tablid>-vsb").scroll(function() {
console.log("Table is scrolled")
});
instead of getting the tbody get the table-id-vsb and attach the scroll function
You can still get scroll event for your table using .scroll() of jQuery.
onAfterRendering: function(){
//Register handler for scroll event
$("tbody").scroll(function(){
// your stuff
});
}
Demo
I know that one of the earlier posts was already marked as the 'right' answer, but it did not work for me, so I thought I would post my working solution, as it might be helpful to others. The following code will work to effectively 'attach' to the vertical scroll event of a table in 1.38:
onAfterRendering: function() {
if (this.firstTime) { //You only want to override this once
var oTable = this.getView().byId("<YOUR_ID_HERE>");
//Get a reference to whatever your custom handler is
var oHandler = this.handleScroll;
//Store a reference to the default handler method
var oVScroll = oTable.onvscroll;
oTable.origVScrollHandler = oVScroll;
oTable.onvscroll = function(i) {
//Call the 'default' UI5 handler
oTable.origVScrollHandler(i);
//Call your handler function, or whatever else you want to do
oHandler();
};
this.firstTime = false;
}
},
var myTable = new sap.ui.table.Table("myTable");
After rendering:
sap.ui.getCore().byId("myTable-vsb").attachScroll(function() {
colorTheTableRows();
})
I'm data binding to a div which I am then setting as the content of an InfoWindow. When markers on the map are clicked I'm changing the bound observable, which updates the content in the info window. All of this works fine until the info window is closed. Google Maps removes the info window from the DOM, along with my div which had the bindings on it. Re-opening the info window results in its contents being frozen in the state it was in at its closing.
Any changes to the observable no longer update the ui, including using valueHasMutated. I've tried just resetting the content of the info window and rebinding, but the JQuery element still exists and I get duplicated content. I've also tried using cleanNode and rebinding but also get duplicate content with that.
The div which I'm binding too:
<div id="placeTmpl" data-bind="with: place">
<h3>
<a data-bind="text: name, attr: { 'href': detailsUrl($data) }"></a>
</h3>
</div>
The Google Maps InfoWindow:
window.infoWindow = new window.google.maps.InfoWindow({
content: ''
});
window.infoWindow.setContent($('#placeTmpl')[0]);
Event listener and updating observable
window.google.maps.event.addListener(marker, "click", function() {
window.viewModel.openInfoWindow(marker, data);
});
self.openInfoWindow = function (marker, data) {
for (var i = 0; i < self.places().length; i++) {
if (self.places()[i].placeId == data.PlaceId) {
self.place(self.places()[i]);
}
}
window.infoWindow.open(map, marker);
};
Like I said, this all works great until the info window is closed. I'm just looking for a way to force knockout to start updating the ui again or to clear and rebind when the info window is closed.
I was able to go around this by setting the InfoWindow content as an html string rather than a DOM node.
i.e:
window.infoWindow.setContent($('#placeTmpl').html());
rather than:
window.infoWindow.setContent($('#placeTmpl')[0]);
By doing this the html with the knockout bindings remains in place, rather than being transferred into the info window where it was subsequently being destroyed on close. Knockout now updates the bounded DOM elements as usual and I just update the info window with the html string on each click.
If you try to put knockout bindings in a Google Maps InfoWindow, you're gonna' have a bad time.
I was able to solve this without having to resort to using strings when calling setContent. In my case, the info window had dynamic elements that would update while the info window was open, so the string solution would not have taken this into account.
I added a closeclick handler in which I keep track of the original DOM element I passed to the info window and just add the element back to the body after the info window took it out. This keeps knockout happy and the info window doesn't care.
var $node = $('#placeTmpl');
var infoWindow = new google.maps.InfoWindow({
content: $node[0]
});
google.maps.event.addListener(infoWindow, "closeclick", function () {
//google maps will destroy this node and knockout will stop updating it
//add it back to the body so knockout will take care of it
$("body").append($node);
});
Is there a way to set a button inside the dojo dialog box and have it close the dialog box it is residing in?
Putting dijits inside of dijits doesn't work, and I can't beleive there isn't a way to do that.
Sure you can put a dijit widget inside another widget. And in a standard Dojo release there's even a test case Dijit Dialog focus & destroy included that demonstrates closing dialog with a button inside of it. Here's the relevant part:
var btn = new dijit.form.Button({ label: "Close" });
dlg.containerNode.appendChild(btn.domNode);
dojo.connect(btn, "onClick", function(){
console.log("destroying, while visible");
dlg.destroy();
});
Note, since Dojo 1.7 onwards, the connect module has been replaced with dojo/on. The equivalent of the above is therefore:
require(['dojo/on', 'dijit/form/Button'], function (on, Button) {
// etc
var btn = new Button({ label: "Close" });
dlg.containerNode.appendChild(btn.domNode);
on(btn, "onClick", function(){
console.log("destroying, while visible");
dlg.destroy();
});
});