I'm having issues with Gridx while using IndirectSlect and below is my code
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-attach-point="metadataGrid" data-dojo-props="region:'left'">
<div id="updateMetadataManagerGrid" data-dojo-attach-point="updateMetadataManagerGrid" data-dojo-type="gridx.Grid"
data-dojo-props="cacheClass: 'gridx/core/model/cache/Sync',barTop: [
{ content: '<h3>Document Update Requests</h3>', style: 'color: blue;' },
{pluginClass: 'gridx/support/QuickFilter', style: 'text-align: right;'}
],modules: [
'gridx/modules/IndirectSelect',
'gridx/modules/RowHeader',
'gridx/modules/Pagination',
'gridx/modules/pagination/PaginationBar',
'gridx/modules/SingleSort',
'gridx/modules/Filter',
'gridx/modules/filter/FilterBar',
'gridx/modules/extendedSelect/Row',
'gridx/modules/VirtualVScroller',
'gridx/modules/extendedSelect/Row',
'gridx/modules/Focus',
'gridx/modules/move/Row',
'gridx/modules/CellWidget',
'gridx/modules/Edit',
'gridx/modules/ColumnResizer',
]",selectRowTriggerOnCell: true,>
</div>
</div>
When I run my code, in IE&Firefox console, I see an error message as shown below. Basically, two modules are not found while gridx creation.
The 1-th declared module can NOT be found, please require it before using it: gridx/modules/IndirectSelect
The 2-th declared module can NOT be found, please require it before using it: gridx/modules/RowHeader
Please help.
Regards,
Manju
You have to define the modules in the file that you use the grid.
And then you call it in the grid declaration.
var grid = new Grid({modules: [indirectSelect, RowHeader]})
Related
How do I add and remove custom attributes from a view-model?
Adding the attribute with targetElement.SetAttribute('mycustomelement') won't activate the Aurelia custom attribute.
Could TemplatingEngine.Enhance() bring life to the custom-attribute from the view-model?
You can do this:
<div id="dummy">lorum ipsum</div>
<button click.delegate="addAttribute()">click here</button>
with code behind
public addAttribute() {
let el = document.getElementById("dummy");
el.setAttribute("css.bind", "{ color: 'red' }");
if (el && !el.querySelectorAll('.au-target').length) {
var element = this.templatingEngine.enhance(el);
console.dir( element.viewFactory );
}
}
Don't know how to unbind this and it will (I guess) give either memory problems or errors when you attach an element multiple times (so added a check for .au-target). The documentation above the function says you are now responsible for the life cycle of it.
What is it that you try to accomplish? There might be a better way..
I know that InfiniteScroll and Masonry work well together. But I am using the Infinite Scroll Extension of Yii (called yiinfinite-scroll) and tried to apply Masonry on it. Infinite Scroll for itself works perfectly, Masonry for itself too. But after InfiniteScroll tries to load a new set of images (I've got an image page), the callback part of InfiniteScroll doesn't seem to fire, because the newly appended elements don't have any masonry code in it and appear behind the first visible items. (I know that this bug is reported often, but the solutions I found so far didn't work for me).
My structure for showing the picture looks like this:
<div class="items">
<div class="pic">...</pic>
<div class="pic">...</pic>
...
</div>
The first page load looks like this
<div class="items masonry" style="...">
<div class="pic masonry-brick" ...></div>
<div class="pic masonry-brick" ...></div>
...
</div> // everything's fine, masonry is injected into the code
After infinite scroll dynamically loads new images these look like this:
<div class="items masonry" ...></div>
<div class="pic masonry-brick" ...></div>
...
// appended pics:
<div class="pic"></div>
<div class="pic"></div>
</div> // so no masonry functionality was applied
My Masonry Code:
$(function (){
var $container = $('.items');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.pic',
columnWidth: 405
});
});
});
$container.infinitescroll({
// normally, the options are found here. but as I use infinitescroll as a Yii extension, the plugin is already initiated with options
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
});
});
I also tried to copy and replace the current InfiniteScroll-min.js file in the extension folder by the newest one. Same effect...
Best regards,
Sebastian
Okay I found a solution. I post it here if somebody else has the same issue:
I just modified the YiinfiniteScroller Class from the Yiinfinite Scroll Yii Extension and added the callback part for Infinite Scroll which was missing:
private function createInfiniteScrollScript() {
Yii::app()->clientScript->registerScript(
uniqid(),
"$('{$this->contentSelector}').infinitescroll(".$this->buildInifiniteScrollOptions().", ".$this->callback.");"
);
}
At the beginning of the class I added the line
public $callback;
to use it later in the method.
Then you can call the Widget with an additional option callback, for example like this:
'callback' => 'function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now theyre ready
$newElems.animate({ opacity: 1 });
$(".items").masonry( "appended", $newElems, true );
});
}',
Works like charm.
This is the JSON from my REST Server:
[{"name":"REL"},{"name":"RBOW"},{"name":"EMLAWEB"}]
This is the programmatic creation of the JSON data store:
dojo.addOnLoad(function(){
var appPrefixStore = new dojox.data.JsonRestStore({target:"http://localhost:9080/AtRest/AtRest/tag/prefix"});`
This is the declaratively use of the data store in the comboxbox:
<input id="selectPrefixCombo"
name="appPrefix"
data-dojo-type="dijit.form.ComboxBox"
data-dojo-props="autocomplete:'false', trim:'true', maxHeight:'200', store:'appPrefixStore'">
</input>
However, nothing can displayed in the combobox. What gives?
I have even tried declaratively use of the data store:
<div data-dojo-type="dojo.data.JsonRestStore" ...
Anyway... here's the working code by using global variable
<script type="text/javascript">
//global variable container
var widgets = {};
require(
// Set of module identifiers
[ "dojo",
"dojo/parser",
"dojo/_base/xhr",
"dijit/form/ComboBox",
"dojo/store/JsonRest",
],
// Callback function, invoked on dependencies evaluation results
function(JsonRestStore) {
widgets.appPrefixStore = new dojo.store.JsonRest({target:"http://localhost:9080/AtRest/AtRest/tag/prefix"});
});
</script>
<select id="selectPrefixCombo" name="appPrefix" data-dojo-type="dijit.form.ComboBox"
data-dojo-props="autocomplete:'false', trim:'true', maxHeight:'200', store:widgets.appPrefixStore">
</select>
Thanks, Apparently I may have been misled by all the tutorials and examples I have seen.
Constructing the JsonRestStore is insufficient to trigger a request to the server. I have to add an appPrefixStore.fetch() to make it work.
I have a dojo widget which uses a a custom-library code having a link like this in its template.
Go Back
I need to find a way to disconnect this event from my widget. The only way i know how an event can be disconnected is, using a
dojo.disconnect(handle)
I could use this if I had the event connected using dojo,connect() which returns me the handle.
However with dojoAttachEvent i don't have the event handle hence no way to disconnect it.
Note :
Changing this html is not an option for me, since this an external library i am using.
Also, I am not looking for a solution to disconnect all events.
CODE:
otherWidget.js:
dojo.provide("otherWidget");
dojo.declare("otherWidget", [], {
templateString : dojo.cache("otherWidget","templates/otherWidget.html"),
_goBack: function(){
this.destroyWidgetAndRedirect();
},
destroyWidgetAndRedirect: function(){
//Code to destory and redirect.
},
});
otherWidget.html:
<div>
Go Back
<!-- Other Widget related code -->
...
</div>
myWidget.js:
dojo.provide("myWidget");
dojo.require("otherWidget");
dojo.declare("myWidget", [], {
templateString : dojo.cache("myWidget","templates/myWidget.html"),
this.otherWidget = new otherWidget({}, dojo.byId('otherWidgetContainer'));
});
myWidget.html:
<div>
<div id="otherWidgetContainer"></div>
<!-- My Widget related code -->
...
</div>
Any thoughts..
Thanks.
Extension points can be used directly on your html, or in javascript. Suppose the widget you are using is called 'my.custom.dojowidget', and that it has an onClick extension point. I will show here the declarative way, in your html. Try this :
<div data-dojo-type="my.custom.widget">
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args"evt">
dojo.stopEvent(evt);
console.debug("did this work ?");
</script>
</div>
Now this depends on the existence of the extension point... if you can't still do what you want, please post the relevant parts of your widget's code.
So... based on the sample code you posted in your edit, I think you should do the following :
<div data-dojo-type="otherWidget">
<script type="dojo/method" data-dojo-event="destroyWidgetAndRedirect" data-dojo-args="evt">
dojo.stopEvent(evt);
// do whatever custom code you want here...
</script>
</div>
I have a hidden form and I am trying to put it into a variable via dijit.byId
Unfortunately it always returns undefined.
Am I missing something? dojo is flummoxing me at every corner - any help much appreciated.
js:
dojo.require("dijit.form.Form");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.ValidationTextBox");
dojo.addOnLoad(function() {
var regForm = dijit.byId("hiddenRegister");
//regForm is undefined
});
html:
<div id="hiddenRegister" dojoType="dijit.form.Form" jsId="hiddenRegister" encType="multipart/form-data" action="" method=""></div>
id and jsId should not be the same
and if you are using jsId, then there is no need for dijit.byId. The widget is already assigned to a variable using the jsId as the variable name.