I have defined dgrid and a button for removing row:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.rawgit.com/SitePen/dgrid/v1.1.0/css/dgrid.css" media="screen" />
</head>
<body class="claro">
<div id="container"></div>
<button id="remove">Remove</button>
<script type="text/javascript">
var dojoConfig = {
async: true,
packages: [
{ name: 'dgrid', location: '//cdn.rawgit.com/SitePen/dgrid/v1.1.0' },
{ name: 'dstore', location: '//cdn.rawgit.com/SitePen/dstore/v1.1.1' }
]
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<script type="text/javascript">
require([
'dojo/_base/declare',
'dojo/on',
"dojo/dom",
"dstore/Memory",
"dstore/Trackable",
'dstore/SimpleQuery',
'dgrid/Grid',
'dgrid/extensions/Pagination',
'dgrid/extensions/DijitRegistry',
'dojo/domReady!'
],
function(declare, on, dom, Memory, Trackable, SimpleQuery, Grid, Pagination, DijitRegistry) {
var data = [];
for (var i = 1; i <= 500; i++) {
data.push({id:i,name: 'Name '+i, value: i});
}
var Store = declare([Memory, SimpleQuery, Trackable]);
var myStore = new Store({data:data});
var MyGrid = declare([Grid, Pagination]);
var grid = new MyGrid({
collection: myStore,
columns: {
'id' : 'Id',
'name' : 'Name',
'value' : 'Value'
},
className: "dgrid-autoheight",
showLoadingMessage: false,
noDataMessage: 'No data found.'
}, 'container');
grid.startup();
on(dom.byId('remove'),'click',function() {
myStore.remove(10);
});
});
</script>
</body>
</html>
The dgrid shows up, you can sort it, edit name or value.
The problem is, that when you click on the "remove" button, row is deleted, but then, at the end of the gird is 9x written: "No data found" and the dgrid stops to work (you cant delete any other row).
If you set showLoadingMessage: to true, then everything works without a problem.
Edit: I have simplified the example. Problem persists.
The grid may have been encountering error while updating the row data after the row has been removed. As the editor tries to update the row after the button loses focus. Try using the grid.removeRow method to remove the row. It might still encounter some other issues, but worth a try.
Editor might not be the best solution to achieve what your are trying to do.
User renderCell to add button to the grid, to remove the row/record. This might be a better solution.
Update: Just refresh the grid that should solve the problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.rawgit.com/SitePen/dgrid/v1.1.0/css/dgrid.css" media="screen" />
</head>
<body class="claro">
<div id="container"></div>
<button id="remove">Remove</button>
<script type="text/javascript">
var dojoConfig = {
async: true,
packages: [
{ name: 'dgrid', location: '//cdn.rawgit.com/SitePen/dgrid/v1.1.0' },
{ name: 'dstore', location: '//cdn.rawgit.com/SitePen/dstore/v1.1.1' }
]
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<script type="text/javascript">
require([
'dojo/_base/declare',
'dojo/on',
"dojo/dom",
"dstore/Memory",
"dstore/Trackable",
'dstore/SimpleQuery',
'dgrid/Grid',
'dgrid/extensions/Pagination',
'dgrid/extensions/DijitRegistry',
'dojo/domReady!'
],
function(declare, on, dom, Memory, Trackable, SimpleQuery, Grid, Pagination, DijitRegistry) {
var data = [];
for (var i = 1; i <= 500; i++) {
data.push({id:i,name: 'Name '+i, value: i});
}
var Store = declare([Memory, SimpleQuery, Trackable]);
var myStore = new Store({data:data});
var MyGrid = declare([Grid, Pagination]);
var grid = new MyGrid({
collection: myStore,
columns: {
'id' : 'Id',
'name' : 'Name',
'value' : 'Value'
},
className: "dgrid-autoheight",
showLoadingMessage: false,
noDataMessage: 'No data found.'
}, 'container');
grid.startup();
on(dom.byId('remove'),'click',function() {
myStore.remove(10);
grid.refresh();
});
});
</script>
</body>
</html>
Related
I'm pretty new in Vue and I'm trying to write down a function that returns true or false on a given data when input modified. I have 4 different data that I need possibly to change the truthiness.
My logic was to produce a function that accepts data as parameter but... It doesn't work. Maybe it's not the proper way to go for...
Here the HTML:
<input type="text" v-model="bannerContent.button" #input="checkMaxChar(48,bannerContent.button.length,isButtonTooLong)" id="banner-button">
And the JS
var app = new Vue({
el: '#app',
data: {
bannerContent: {
title : 'Title',
text: 'Text',
copyright: 'Copyright',
button: 'Button'
},
isButtonTooLong: false,
},
methods: {
checkMaxChar: function(a,b,c) {
var vm = this
if( a < b ) {
vm.c = true;
};
console.log(this.c);
}
}
})
I'm not sure why you are doing var vm = this and also where do you defined c?
for your purpose define c in the data section like code below and work wit your input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<input
type="text"
v-model="bannerContent.button"
#input="checkMaxChar(48,bannerContent.button.length,isButtonTooLong)"
id="banner-button"
/>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
bannerContent: {
title: "Title",
text: "Text",
copyright: "Copyright",
button: "Button",
},
isButtonTooLong: false,
c: false,
},
methods: {
checkMaxChar(a, b, c) {
if (a < b) {
this.c = true;
}
console.log(this.c);
},
},
});
</script>
</html>
Hope it helps You ;)
I am working on a site where the user can select an image via radio selection.
I would like to dynamically update the image URL depending on selection of the user. My approach is to use a computed variable which returns the URL from a list of objects depending on the selection of the user.
<template>
<v-img
:src="require(currBackgroundURL)"
class="my-3"
contain
width="397"
height="560"
></v-img>
</template>
<script>
// data() ...
currBackground: 0,
backgrounds: [
{
name: "Flowers",
url: "../assets/background/bg_1.png"
},
// ...
computed: {
currBackgroundURL: function() {
return this.backgrounds[this.currBackground].url
}
}
</script>
Unfortunately, i get an error which says Critical dependency: the request of a dependency is an expression.
And the browser console says: [Vue warn]: Error in render: "Error: Cannot find module '../assets/background/bg_1.png'"
Question: What is the right way to switch the URL of the image dynamically?
Thanks for your help!
Here is a working example:
var app = new Vue({
el: '#app',
data: () => ({
currBackground: 0,
backgrounds: [
{
name: "black",
url: "https://dummyimage.com/600x400/000/fff"
},
{
name: "blue",
url: "https://dummyimage.com/600x400/00f/fff"
},
{
name: "red",
url: "https://dummyimage.com/600x400/f00/fff"
}
]
}),
computed: {
currBackgroundURL: function() {
return this.backgrounds[this.currBackground].url
}
},
methods: {
nextImage() {
this.currBackground += 1
if (this.currBackground > 2) {
this.currBackground = 0
}
}
}
})
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app">
<v-btn #click="nextImage()">Change image</v-btn>
<v-img
:src="currBackgroundURL"
class="my-3"
contain
width="397"
height="560"
></v-img>
</div>
</body>
I removed the require.
The src is a link/path so you don't need require. require will try to take a path and load it into a module instead of a link/path.
Hopefully, this helps.
I'm trying to display a simple dgrid as per the first demo on this page:
http://dgrid.io/tutorials/1.0/grids_and_stores/
The only trick is that I'm trying to put it inside an existing structure of containers. So I tried the onFocus event of the container, but when I click on that container, the grid is not showing, and no console.log message appears.
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"CustomersGrid"'>
<script type='dojo/on' data-dojo-event='onFocus'>
require([
'dstore/RequestMemory',
'dgrid/OnDemandGrid'
], function (RequestMemory, OnDemandGrid) {
// Create an instance of OnDemandGrid referencing the store
var dom = require('dojo/dom');
console.log("onFocus event for CustomersGrid ContentPane");
dom.byId('studentLastname').value = 'test onFocus event';
var grid = new OnDemandGrid({
collection: new RequestMemory({ target: 'hof-batting.json' }),
columns: {
first: 'First Name',
last: 'Last Name',
totalG: 'Games Played'
}
}, 'grid');
grid.startup();
});
</script>
</div>
I could make it work by:
setting the id of the div to 'grid'
adding a "Click me" span (or I had nothing to focus on)
changing the event name from 'onFocus' to 'focus'
Then, the grid appears when you click on the 'Click me' text (to activate focus).
Below the corresponding full source page (for my environment):
<!DOCTYPE HTML><html lang="en">
<head>
<meta charset="utf-8">
<title>Neal Walters stask overflow test</title>
<link rel="stylesheet" href="dojo-release-1.12.2-src/dijit/themes/claro/claro.css" media="screen">
<link rel="stylesheet" href="dojo-release-1.12.2-src/dgrid/css/dgrid.css" media="screen">
</head>
<body class="claro">
<div id='grid' data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"CustomersGrid"'>
<span>click me!</span>
<script type='dojo/on' data-dojo-event='focus'>
require([
'dstore/RequestMemory',
'dgrid/OnDemandGrid'
], function (RequestMemory, OnDemandGrid) {
// Create an instance of OnDemandGrid referencing the store
var dom = require('dojo/dom');
console.log("onFocus event for CustomersGrid ContentPane");
//dom.byId('studentLastname').value = 'test onFocus event';
var grid = new OnDemandGrid({
collection: new RequestMemory({ target: 'hof-batting.json' }),
columns: {
first: 'First Name',
last: 'Last Name',
totalG: 'Games Played'
}
}, 'grid');
grid.startup();
});
</script>
</div>
<script src="dojo-release-1.12.2-src/dojo/dojo.js" data-dojo-config="async:true"></script>
<script type="text/javascript">
require(["dojo/parser", "dojo/domReady!"],
function(parser){
parser.parse();
});
</script>
</body>
The above is using declarative syntax. Alternatively, you may consider going programmatic, as in the source code below where the grid appears on loading the page. Also whereas with the declarative syntax above a breakpoint inside the script is ignored (using firefox), it is activated as expected with the programmatic syntax:
<!DOCTYPE HTML><html lang="en">
<head>
<meta charset="utf-8">
<title>Neal Walters stask overflow test</title>
<link rel="stylesheet" href="dojo-release-1.12.2-src/dijit/themes/claro/claro.css" media="screen">
<link rel="stylesheet" href="dojo-release-1.12.2-src/dgrid/css/dgrid.css" media="screen">
</head>
<body class="claro">
<div id='grid' data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"CustomersGrid"'></div>
<script src="dojo-release-1.12.2-src/dojo/dojo.js" data-dojo-config="async:true"></script>
<script>
require([
'dstore/RequestMemory',
'dgrid/OnDemandGrid'
], function (RequestMemory, OnDemandGrid) {
// Create an instance of OnDemandGrid referencing the store
var dom = require('dojo/dom');
console.log("onFocus event for CustomersGrid ContentPane");
//dom.byId('studentLastname').value = 'test onFocus event';
var grid = new OnDemandGrid({
collection: new RequestMemory({ target: 'hof-batting.json' }),
columns: {
first: 'First Name',
last: 'Last Name',
totalG: 'Games Played'
}
}, 'grid');
grid.startup();
});
</script>
</body>
I'm using forloop to check the items in my data in COMPONENT.
{
data:function(){
return {
items:[
{id:1,name:'John'},
{id:2,name:'FooBz'}
]
}
}
}
now I want to check the value first in console in ready hook of my component.
{
.....
ready:function(){
console.log(this.items);
// this return a [__ob__: Observer]
this.items.forEach(function(x,y){
............
});
}
}
the this.items return a '[ob: Observer]' which I can't iterate through because the length of that value is 0 it supposed to be 2.
EDIT:
this is strange on my JSBIN all are working but in my real code its not. Even though I copied my logic from my real code I'm using Laravel Elixir to compile my javascript and 1.0.24 version of Vue.
http://jsbin.com/gijaniqero/edit?html,js,console,output
Your code should be okay.
Just using your code, i have made demo. It should be okay
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<test_component></test_component>
</div>
<template id="test_component">
<div></div>
</template>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data: {
},
components : {
'test_component' : {
template : '#test_component',
data:function(){
return {
items:[
{id:1,name:'John'},
{id:2,name:'FooBz'}
]
}
},
ready : function(){
this.items.forEach(function(x,y){
console.log( 'id is : ' + x.id);
console.log( 'name is L ' + x.name);
console.log( 'key is ' + y);
});
}
}
}
})
</script>
</body>
</html>
In the 1.x version of the Rally SDK I was able to query and assign to an HTML DIV with a query like the following:
var querySI48 = {
type : 'portfolioitem',
query:'(Name = "Q3 2015 Release (2.8.0)")',
key : 'SI48Key',
fetch: 'PercentDoneByStoryCount'
};
And assign it to a DIV like this:
var WS215 = document.getElementById("WS215");
WS215.innerHTML = "<h2>" + pisInfo + "%</h2>";
How can I assign the PercentDoneByStoryPoint to a DIV with the 2.X SDK? I'm creating a dashboard in Confluence that contains Rally data.
Something similar to the following should do the trick:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="/apps/2.0/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('Rally.example.App', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var me = this;
var divTemplateString = "<h2>{0}: Percent Done by Story Count = {1}</h2>";
Ext.create('Rally.data.wsapi.Store', {
model: 'PortfolioItem/Feature',
fetch: true,
autoLoad: true,
filters: [
{
property: 'FormattedID',
value: 'F15'
}
],
listeners: {
load: function(store, data, success) {
var formattedID = data[0].get('FormattedID');
var pctDoneByStoryCount = data[0].get('PercentDoneByStoryCount');
var divHTML = Ext.String.format(divTemplateString, formattedID, pctDoneByStoryCount);
var div = Ext.get('F15');
me.add({
xtype: 'container',
html: divHTML,
renderTo: div
});
}
},
});
}
});
Rally.launchApp('Rally.example.App', {
name: 'Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="F15"</div>
</body>
</html>