I'm trying to create a grid from json data. Each cell will be editable eventually. One column contains type dependant data and based on the type I want to show either a pair of date pickers (start/end date) or Textarea or some other widget.
I'm using renderCell to attempt to render this type dependent column, but whenever I introduce Textarea to my code I get an error "TypeError: subRows is undefined" & just can't seem to shake it.
I'm quite new to dojo so I think I'm missing something obvious. I've read all the docs and in particular this post which didn't help in my case. Unfortunately many of the docs are slices of code & whatever it is I'm not getting means those code slices are too short to get started with.
Can someone help me out. Textarea is the one I'd like to solve as that seems simple & I've not attempted to configure the DateTextBox properly yet anyway. I figure get the Textarea working & that will explain the rest...
My code is below - whole page posted in case my error is missing a file somewhere;
<html>
<head>
<meta charset="utf-8">
<title>Role assignment</title>
<link rel="stylesheet" href="/library/js/dojo/dojo/resources/dojo.css">
<link rel="stylesheet" href="/library/js/dojo/dgrid/css/dgrid.css">
<link rel="stylesheet" href="/library/js/dojo/dgrid/css/skins/claro.css">
<link rel="stylesheet" href="/library/js/dojo/dijit/themes/dijit.css">
<LINK href="/library/css/custom.css" type="text/css" rel="stylesheet">
<LINK href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<script type="text/javascript" language="javascript" src="/library/js/script_main.js"></script>
</head>
<body class="claro">
<form>
<div id="grid"></div>
</form>
<!-- load Dojo -->
<script src="/library/js/dojo/dojo/dojo.js"></script>
<script>
require([
'dojo/_base/declare',
'dgrid/Grid',
"dgrid/Selection",
"dgrid/editor",
"dgrid/Keyboard",
"dijit/form/Button",
"dijit/form/Textarea",
"dijit/form/DateTextBox",
"dojo/domReady!"
], function (declare, Grid, Selection, editor, Keyboard, Button, Textarea, DateTextBox) {
var renderRoleData = function(object, value, node, options) {
if (object.role_type == "TIME_RANGE") {
return new DateTextBox();
// no attempt to initialise this yet
}
else if (object.role_type == "MULTI_STRING") {
return new Textarea({
name: "myarea",
value: object.role_data.text,
style: "width:200px;"
});
}
//....more types
}
var columns = [
{
field: 'role_name',
label: 'Role name'
},
{
field: 'role_type',
label: 'Role type'
},
{
field: 'role_enabled',
label: 'Role enabled'
},
{
field: 'role_data',
label: 'Role data',
renderCell: renderRoleData
}
];
var grid = new (declare([ Grid, Selection, editor, Keyboard, Textarea, DateTextBox ]))({
columns: columns,
postCreate: function() {
var data = [
{
"role_dn": "some_ldap_dn1,dc=com",
"role_name": "Water Controller",
"role_type": "TIME_RANGE",
"role_enabled" : true,
"role_data" : {"start_date" : "20150601", "end_date" : "20150701"}
}, {
"role_dn": "some_ldap_dn1,dc=com",
"role_name": "Waste Controller",
"role_type": "MULTI_STRING",
"role_enabled" : true,
"role_data" : { "text": "The reason I need this is very long and complicated. The big long reason is just big and long and honestly you wouldn't care if I told you anwyay" }
}
];
this.renderArray(data);
}
}, 'grid');
});
</script>
</body>
</html>
Initially, I notice a few issues which might be causing this problem. Try the following instead:
// Dijit widgets should not be mixed into the grid with declare.
// If you're using 0.3, editor should not be mixed in either,
// intended to be applied to specific columns (in 0.4 this is now a mixin).
// Only dgrid mixins should be mixed in via declare.
var CustomGrid = declare([ Grid, Selection, Keyboard ], {
postCreate: function () {
// Call this.inherited to run any postCreate logic in
// previous mixins first
this.inherited(arguments);
var data = [
{
"role_dn": "some_ldap_dn1,dc=com",
"role_name": "Water Controller",
"role_type": "TIME_RANGE",
"role_enabled" : true,
"role_data" : {"start_date" : "20150601", "end_date" : "20150701"}
}, {
"role_dn": "some_ldap_dn1,dc=com",
"role_name": "Waste Controller",
"role_type": "MULTI_STRING",
"role_enabled" : true,
"role_data" : { "text": "The reason I need this is very long and complicated. The big long reason is just big and long and honestly you wouldn't care if I told you anwyay" }
}
];
this.renderArray(data);
}
});
var grid = new CustomGrid({
columns: columns
}, 'grid');
I removed things from the declare array that didn't belong in it, which may have been causing the problem.
Note that postCreate is now defined in an object passed straight to declare. This object's properties will be mixed in after the constructors in the array, as opposed to properties of the object passed to the constructor when instantiating, which will simply override those properties straight on the instance. This also gives it access to call this.inherited(arguments) which will run any previous mixins' postCreate function first.
Related
Hello i`m using boostrap 4.3.1 and included popper 1.14.7.
Normally I can add input fields in the content of the popup/tooltip. I don`t since when, but at the moment when I put input field in the content then only the text is visible.
When I look in the source (compiled html) I can see that popper or bootstrap removed the input fields. Do I something wrong?
var options = {
html: true,
// content: function(){ return $(".amountElec.popup").html();},
placement: "bottom",
container: "body"
};
$(function(){
$('#manualinput').popover(options);
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="manualinput"
data-container="body"
data-toggle="popover"
data-content="test <input name='test' type='text' value='2'>"
data-html="true"
data-placement="bottom">
OPEN TOOLTUP
</div>
It's even easier as you think:
Add
sanitize: false
as config option if you want to disable sanitize at all. If you just want to adapt the whitelist, you are right with your solution
https://github.com/twbs/bootstrap/blob/438e01b61c935409adca29cde3dbb66dd119eefd/js/src/tooltip.js#L472
I found the solution...
I my case add this to the javascript:
var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList;
myDefaultWhiteList.input = [];
https://getbootstrap.com/docs/4.3/getting-started/javascript/#sanitizer
After searching in the debug console I found somehting in the tooltip.js from bootstrap.
content = sanitizeHtml(content, this.config.whiteList, this.config.sanitizeFn)
setElementContent($element, content) {
if (typeof content === 'object' && (content.nodeType || content.jquery)) {
// Content is a DOM node or a jQuery
if (this.config.html) {
if (!$(content).parent().is($element)) {
$element.empty().append(content)
}
} else {
$element.text($(content).text())
}
return
}
if (this.config.html) {
if (this.config.sanitize) {
content = sanitizeHtml(content, this.config.whiteList, this.config.sanitizeFn)
}
$element.html(content)
} else {
$element.text(content)
}
}
sanitizeHtml function removes the input fields :(.
I just turned of sanitize by default (globally):
$.fn.tooltip.Constructor.DEFAULTS.sanitize = false;
$.fn.popover.Constructor.DEFAULTS.sanitize = false;
https://getbootstrap.com/docs/3.4/javascript/#default-settings
I'm trying to create a custom widget using templates, but variable substitution does not seem to be working for me.
I can see the property value being updated inside the widget, but the DOM does not change. For example, when I use the get() method, I can see the new value of the widget's property. However, the DOM never changes its value.
Here is my template:
<div class="outerContainer">
<div class="container">
<span class="mySpan">My name is ${name}</span>
</div>
</div>
Now, here is my widget code:
define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!/templates/template.html",
], function (declare, _WidgetBase, _TemplatedMixin, template) {
return declare([_WidgetBase, _TemplatedMixin], {
templateString: template,
name: "",
constructor: function (args) {
console.log("calling constructor of the widget");
this.name = args.name;
},
startup: function() {
this.inherited(arguments);
this.set("name", "Robert"); // this does not work
},
postCreate: function() {
this.inherited(arguments);
this.set("name, "Robert"); // this does not work either
},
_setNameAttr: function(newName) {
// I see this printed in the console.
console.log("Setting name to " + newName);
this._set("name", newName);
// I also see the correct value when I get()
console.log(this.get("name")); // This prints Robert
}
});
});
I was expecting the DOM node to say "My name is Robert" i.e. the new value, but it never updates. Instead, it reads "My name is ". It does not overwrite the default value.
I'm sure I'm missing a silly step somewhere, but can someone help me figure out what?
You should bind the property to that point in the dom. So you will need to change the template to this:
<span class="mySpan">My name is <span data-dojo-attach-point='nameNode'></span></span>
And in your widget you should add this function to bind it whenever name changes:
_setNameAttr: { node: "nameNode", type: "innerHTML" },
Now when name changes, it will change the innerHTML of the nameNode inside your mySpan span. If you need to know more about this binding I recommend checking the docs out.
Hope this helps!
Is there a way to change a value in the model when an input gets/loses focus?
The use case here is a search input that shows results as you type, these should only show when the focus is on the search box.
Here's what I have so far:
<input type="search" v-model="query">
<div class="results-as-you-type" v-if="magic_flag"> ... </div>
And then,
new Vue({
el: '#search_wrapper',
data: {
query: '',
magic_flag: false
}
});
The idea here is that magic_flag should turn to true when the search box has focus. I could do this manually (using jQuery, for example), but I want a pure Vue.JS solution.
Apparently, this is as simple as doing a bit of code on event handlers.
<input
type="search"
v-model="query"
#focus="magic_flag = true"
#blur="magic_flag = false"
/>
<div class="results-as-you-type" v-if="magic_flag"> ... </div>
Another way to handle something like this in a more complex scenario might be to allow the form to track which field is currently active, and then use a watcher.
I will show a quick sample:
<input
v-model="user.foo"
type="text"
name="foo"
#focus="currentlyActiveField = 'foo'"
>
<input
ref="bar"
v-model="user.bar"
type="text"
name="bar"
#focus="currentlyActiveField = 'bar'"
>
...
data() {
return {
currentlyActiveField: '',
user: {
foo: '',
bar: '',
},
};
},
watch: {
user: {
deep: true,
handler(user) {
if ((this.currentlyActiveField === 'foo') && (user.foo.length === 4)) {
// the field is focused and some condition is met
this.$refs.bar.focus();
}
},
},
},
In my sample here, if the currently-active field is foo and the value is 4 characters long, then the next field bar will automatically be focused. This type of logic is useful when dealing with forms that have things like credit card number, credit card expiry, and credit card security code inputs. The UX can be improved in this way.
I hope this could stimulate your creativity. Watchers are handy because they allow you to listen for changes to your data model and act according to your custom needs at the time the watcher is triggered.
In my example, you can see that each input is named, and the component knows which input is currently focused because it is tracking the currentlyActiveField.
The watcher I have shown is a bit more complex in that it is a "deep" watcher, which means it is capable of watching Objects and Arrays. Without deep: true, the watcher would only be triggered if user was reassigned, but we don't want that. We are watching the keys foo and bar on user.
Behind the scenes, deep: true is adding observers to all keys on this.user. Without deep enabled, Vue reasonably does not incur the cost of maintaining every key reactively.
A simple watcher would be like this:
watch: {
user() {
console.log('this.user changed');
},
},
Note: If you discover that where I have handler(user) {, you could have handler(oldValue, newValue) { but you notice that both show the same value, it's because both are a reference to the same user object. Read more here: https://github.com/vuejs/vue/issues/2164
Edit: to avoid deep watching, it's been a while, but I think you can actually watch a key like this:
watch: {
'user.foo'() {
console.log('user foo changed');
},
},
But if that doesn't work, you can also definitely make a computed prop and then watch that:
computed: {
userFoo() {
return this.user.foo;
},
},
watch: {
userFoo() {
console.log('user foo changed');
},
},
I added those extra two examples so we could quickly note that deep watching will consume more resources because it triggers more often. I personally avoid deep watching in favour of more precise watching, whenever reasonable.
However, in this example with the user object, if all keys correspond to inputs, then it is reasonable to deep watch. That is to say it might be.
You can use a flat by determinate a special CSS class, for example this a simple snippet:
var vm = new Vue({
el: '#app',
data: {
content: 'click to change content',
flat_input_active: false
},
methods: {
onFocus: function(event) {
event.target.select();
this.flat_input_active = true;
},
onBlur: function(event) {
this.flat_input_active = false;
}
},
computed: {
clazz: function() {
var clzz = 'control-form';
if (this.flat_input_active == false) {
clzz += ' only-text';
}
return clzz;
}
}
});
#app {
background: #EEE;
}
input.only-text { /* special css class */
border: none;
background: none;
}
<!-- libraries -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- html template -->
<div id='app'>
<h1>
<input v-model='content' :class='clazz'
#focus="onFocus($event)"
#blur="onBlur"/>
</h1>
<div>
Good luck
You might also want to activate the search when the user mouses over the input - #mouseover=...
Another approach to this kind of functionality is that the filter input is always active, even when the mouse is in the result list. Typing any letters modifies the filter input without changing focus. Many implementations actually show the filter input box only after a letter or number is typed.
Look into #event.capture.
I want to build a app shows up the follow board.
So I create a custom html apps, the source code is listed here.
<!DOCTYPE html>
<html>
<head>
<title>StoryMap</title>
<script type="text/javascript" src="/apps/2.0/sdk-debug.js"></script>
<script type="text/javascript">
Rally.onReady(function () {
Ext.define('mycardcolumnheader', {
extend: Rally.ui.cardboard.ColumnHeader,
alias: 'widget.mycardcolumnheader',
});
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
//Fetch tree of items
// a) starting from item type in picker
// b) subject to a filter
//The number of columns is related to the number of lowest level PI type items that are found
//The header must show the top level (from the picker) and all the children
//The user stories are shown in a vertical line below
//Might want to introduce the concept of timebox in the vertical direction (for user stories)
//The cards for the PIs should show the progress bars
var ch = Ext.create( 'Ext.Container', {
});
var dTab = Ext.create('Ext.Container', {
items: [{
xtype: 'rallycardboard',
types: ['HierarchicalRequirement'],
// columnConfig: { xtype: 'mycardcolumn', displayField: 'feat', valueField: 'fest' },
// attribute: 'ScheduleState'
attribute: 'Feature',
rowConfig: { field: 'Release', sortDirection: 'ASC' },
enableDragAndDrop: true
}]
});
this.add(dTab);
}
});
Rally.launchApp('CustomApp', {
name:"StoryMap",
parentRepos:""
});
});
</script>
<style type="text/css">
.app {
/* Add app styles here */
}
</style>
</head>
<body>
</body>
</html>
It's very similar to what I want, but still have a small bug, I do not know how to fix it. the bug is if I choose the parent project, the board will show up the same release into multiple swimlanes. Here is a example.
this is probably because each Rally Project has its own Release and the App is not smart enough to recognize they are all logically the same Release.
If create Release 1 at the Parent Project level and cascade the Release to the child projects, Rally actually creates 3 Releases ... 1 for each project. Our application happens to know that if the Release name, start date, and end dates match, they should be treated as a single Release. It appears the App does not have this logic included in it.
But how to fix it? anyone could take a look?
This is sort of expected behavior, mostly due to the fact that we never built the ability for the board to "bucket" the like releases into its rows or columns.
You'll probably need to override the isMatchingRecord method on Rally.ui.cardboard.row.Row to be able to bucket the rows:
//add this at the top of your app
Ext.define('Rally.ui.cardboard.row.RowFix', {
override: 'Rally.ui.cardboard.row.Row',
isMatchingRecord: function(record) {
return this.callParent(arguments) ||
this.getValue().Name === (record.get('Release') && record.get('Release').Name);
}
});
The Google Custom Search integration only includes numbered page links and I cannot find a way to include Next/Previous links like on a normal Google search. CSE used to include these links with their previous iframe integration method.
I stepped through the javascript and found the undocumented properties I was looking for.
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('GOOGLEIDGOESHERE');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.setSearchCompleteCallback(null,
function() { searchCompleteCallback(customSearchControl) });
customSearchControl.draw('cse');
}, true);
function searchCompleteCallback(customSearchControl) {
var currentPageIndex = customSearchControl.e[0].g.cursor.currentPageIndex;
if (currentPageIndex < customSearchControl.e[0].g.cursor.pages.length - 1) {
$('#cse .gsc-cursor').append('<div class="gsc-cursor-page">Next</div>').click(function() {
customSearchControl.e[0].g.gotoPage(currentPageIndex + 1);
});
}
if (currentPageIndex > 0) {
$($('#cse .gsc-cursor').prepend('<div class="gsc-cursor-page">Previous</div>').children()[0]).click(function() {
customSearchControl.e[0].g.gotoPage(currentPageIndex - 1);
});
}
window.scrollTo(0, 0);
}
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
I've been using this to find the current page:
ctrl.setSearchCompleteCallback(null, function(gControl, gResults)
{
currentpage = 1+gResults.cursor.currentPageIndex;
// or, here is an alternate way
currentpage = $('.gsc-cursor-current-page').text();
});
And now it's customSearchControl.k[0].g.cursor ... (as of this weekend, it seems)
Next time it stops working just go to script debugging in IE, add customSearchControl as a watch, open the properties (+), under the Type column look for Object, (Array) and make sure there is a (+) there as well (i.e. contains elements), open[0], and look for Type Object, again with child elements. Open that and once you see "cursor" in the list, you've got it.