How i can load data to array after click select ?
I need load data after open select
<v-select #click="clickSelect"
:items="array"
label="Outlined style"
outlined
></v-select>
data(){
return {
array:['1','2','3'],
}
}
clickSelect(){ // load after click select
api.getArray(res=>{
this.array = res.data
})
},
Related
I have a simple grid containing an editable column with phone numbers.
I would like to add a small icon that the user can click on containing a "tel: link" so that their "phone hardware" can pick it up from there.
I have prepared a simple demo -> https://dojo.telerik.com/ogAgURep/2
Goal: When clicking the Phone-Button do not enter "Edit Mode" ..otherwise enter "Edit Mode"
Problem: Clicking Phone-Button enters "Edit Mode"
In the schema set your "Tel" column to editable false.
schema: {
model: {
fields: {
firstColumn: { editable: false },
name: { validation: { required: true } },
tel: { editable: false }
}
}
},
To make it so the column is still editable except when the phone icon is clicked, you could change icon to a javascript function that exits edit mode as well as the original action:
template: function(args){
if(args.tel==null){ return ''; }
return args.tel + '<span class="k-cell-link-i"> </span>';
}
function call(e){
var grid = $('#grid').data('kendoGrid');
grid.cancelChanges();
//other logic originally in the template
}
I'm struggling to edit a single item with vue and firebase.
My edit page url receives item's id.
So what I want is to load this single item from firebase.
Edit it and save it back into firebase.
I use vue version 2 and vuefire.
I'm stuck at loading a single item from firebase and displaying it in a form.
Here is what I've got so far:
<template>
<div>
<h1>Item: {{ item.name }}</h1>
<label>Name</label>
<input type="text" value="" name="hive-name"/>
</div>
</template>
<script>
import { db } from '../firebase';
export default {
data() {
return {
id: this.$route.params.id,
item: {},
}
},
firebase() {
return {
items: db.ref('items'),
item: db.ref('items/' + this.id),
}
},
methods: {
updateitem() {
this.$firebaseRefs.item.push(this.item);
},
},
}
</script>
according to VueFire in Github (https://github.com/vuejs/vuefire):
To delete or update an item you can use the .key property of a given object. But keep in mind you have to remove the .key attribute of the updated object:
updateItem: function (item) {
// create a copy of the item
item = {...item}
// remove the .key attribute
delete item['.key']
this.$firebaseRefs.items.child(item['.key']).set(item)
}
Please, note that you have to use "item.set" instead of "item.push".
"push" would create a new item instead of updating it.
I'm trying to re-render a collection of words in a column every time a word is submitted or deleted. It re-renders when the word is deleted but not when a word is submitted.
Here's my template:
<template name = "wordColumn">
{{#each words}}
<button class = "label label-default" draggable="true">
{{word}}
</button>
{{/each}}
</template>
Here's my helper:
Template.wordColumn.helpers ( {
words: function () {
var words;
var wordIds = Session.get ( "wordIds" );
words = Words.find( { '_id': { $in: wordIds } }, { sort: { createdAt: -1 } } );
return words;
},
} )
And here is the word submit code within the template events. When I do Words.find(), it's clear that the underlying database has changed so Words.find() above should be reactive and update the column automatically:
"submit .new-word": function ( e ) {
var text = e.target.word.value;
Meteor.call ( "addWord" , text, function ( err, data ) {
Session.set ( "displayInMainBox", Words.find( data ).fetch()[0] );
} );
e.target.word.value = "";
return false;
}
Yet no cigar - the word I just submitted doesn't display automatically unless I refresh the page.
You can check out the deployed app here: contextual.meteor.com, and submit a new word. It'll show in the main box but not the list of all words on the right-hand side.
You need to have a Session.set( "wordIds"... somewhere in that callback. If that doesn't change, your cursor in your helper won't change. Since your current cursor includes all the current docs, when you delete something it will react.
PS, try doing away with the session var all together. Handle that logic in the subscription if possible (or sub to all, from the look of the app).
I have started to use ExtJs 4. I have grid with buttons in one column. I can't manage to get button click for button in selected cell by controller. I would like to get click and then details for row in order to open extra window with details.
Code:
Ext.define('AP.controller.List', {
extend : 'Ext.app.Controller',
stores : ['Users'],
models : ['User'],
views : [ 'List', 'Details' ],
init : function() {
console.log("users");
this.control({
'viewport > listPanel > userlist' : {
itemdblclick : this.userDbCClicked
},
'viewport > listPanel button AND WHAT MORE ?' : {
click : this.statusButtonClicked
}
});
},
userDbCClicked : function(grid, record) {
console.log("user db clicked");
},
statusButtonClicked : function(grid, record) {
// Here I would like to get row details after click on button in column
console.log("statusButtonClicked clicked ");
}
});
What should be put instead this code:
'viewport > listPanel button AND WHAT MORE?' : {
click : this.statusButtonClicked
}
Of course it dosen't work. How to get row by click on button in cell ?
Thanks in advance for help.
ExtJs is very powerfull framework but first steps are realy difficulted sometimes.
Bogus
put an action:'statusbutton' in your button config
then use 'viewport > listPanel > button[action=statusbutton]'
What Chris says is true. You can also you a name property on your button, it's just a way of querying your components. Explained here:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentQuery
{
xtype: 'button',
name: 'statusbutton'
}
'viewport > listPanel > button[name=statusbutton]'
Here is a good starting guide for Ext.Apps:
http://docs.sencha.com/ext-js/4-1/#!/guide/mvc_pt1
and another one:
http://docs.sencha.com/ext-js/4-1/#!/guide/application_architecture
I have a dojo grid which is using some editable dijit form fields. All is well, until I try ot implement an country (multi) select cell as an Tooltip Dialog; i.e., show a drop down button which opens the tooltip dialog populated with a checkbox array to select one or more country. Once checked and clicked OK, the cell should update with a list of selected countries. Obviously I'll take care of updating the server via the store later on.
I've implemented a country select tooltip dialog which works fine like so:
dojo.provide("CountrySelector");
dojo.declare(
"CountrySelector",
[dijit.form.DropDownButton],
{
label: 'Countries',
dropDown: new dijit.TooltipDialog({ execute: function() {
console.log("EXECUTE : ", arguments[0]);
this.value = arguments[0].country;
}, href:'/cm/ui/countries' }),
postCreate: function() {
this.inherited(arguments);
this.label = this.value;
dojo.connect(this.dropDown, 'onClose', function() { console.log('close'); });
console.log("CountrySelect post create", this);
},
}
);
And the grid cell is typed as:
{ name: 'Countries', field: 'targeting.countries', editable: true, hidden: false, type:dojox.grid.cells._Widget, widgetClass: CountrySelector },
All is working fine but I can't figure out how to update cell's content and store once the widget is executed. As well, I don't seem to have the row id of the updated row.
Any ideas?
Thanks,
Harel
//Layout:
gridLayout: {rows: [{name: 'Coll Name',field: 'colField', type: dojox.grid.cells.ComboBox, editable:'true', width:'8%',options: [], alwaysEditing:false}]}
//Grid Store:
this.gridStore = new dojo.data.ItemFileReadStore({data: {items: data}});
//
var setOptions = function(items, request){
this.gridLayout.rows[0].options.push('Val 1','Val 2');
this.gridLayout.rows[0].values.push('1','2');
dojo.connect(this.gridLayout.rows[0].type.prototype.widgetClass.prototype, "onChange",this, "_onComboChange");
}
this.gridStore.fetch({onComplete: dojo.hitch(this,setOptions)});
_onComboChange: function (selectedOption) {
console.info("_onComboChange: ",selectedOption);
},
// If you need to populate combos with different values you can use onItem
var getArray = function(item, request){
// populate one by one
// attach an event to each combo
}
this.gridStore.fetch({onItem: dojo.hitch(this,getArray)});
This is what i used to update my grid
var idx = yourGrid.getItemIndex(item);
if (idx >- 1) {
yourGrid.updateRow(idx);
}
More detail
every row is identified by its identifier
yourGrid.store.fetchItemByIdentity({
identity: <yourIdentity>,
onItem: function(item){
// Update your attributes in the store depending on the server response
// yourGrid.store.setValue(item, <attribute>,<value>);
var idx = yourGrid.getItemIndex(item);
if (idx >- 1) {
yourGrid.updateRow(idx);
}
}
});
I didn't set up a test with your code but you should be able to do it by just creating a method named getValue in your widget that returns the value.
Take a look at the other examples (like dojox.grid.cells.ComboBox) to get an idea of what getValue should look like.