Im using this plugin to create a smart table in angualar 2:
https://akveo.github.io/ng2-smart-table/#/documentation
I need to customize the table.
ie) Only when user clicks on 'Create' link, the event should be trigerred, for which their documentation says:
'create' event : Triggered once a Create button clicked. Triggered only if table mode = external.
need to know how to set the mode external as I couldnt find anywhere in their doc.
As of now i am using like:
<ng2-smart-table [settings]="settings" [source]="source" (userRowSelect)="onUserRowSelect($event)" class="table table-hover table-striped"></ng2-smart-table>
onUserRowSelect(event): void {
//But this event triggers whenever(wherever in the table) user clicks, which is dont want !
}
Suggestion required!
1) set settings object of ng2-smarttable as below
settings = {
mode: 'external',
add: {
addButtonContent: '<i class="ion-ios-plus-outline"></i>',
createButtonContent: '<i class="ion-checkmark"></i>',
cancelButtonContent: '<i class="ion-close"></i>',
},
edit: {
editButtonContent: '<i class="ion-edit"></i>',
saveButtonContent: '<i class="ion-checkmark"></i>',
cancelButtonContent: '<i class="ion-close"></i>',
},
delete: {
deleteButtonContent: '<i class="ion-trash-a"></i>',
confirmDelete: true
},
columns: {
id: {
title: 'ID',
type: 'number'
},
name: {
title: 'Name',
type: 'string'
},
lastName: {
title: 'Last Name',
type: 'string'
},
username: {
title: 'Username',
type: 'string'
},
email: {
title: 'E-mail',
type: 'string'
},
age: {
title: 'Age',
type: 'number'
}
}
};
2) in html page define setting and source
<ng2-smart-table [settings]="settings" [source]="source" (create)="openCreateDialog($event)"></ng2-smart-table>
you can perform any action which you want on create button click.
define the openCreateDialog function in your ts file as below
openCreateDialog(event) {
//logic
}
I achieved by using (createConfirm) event of theirs like:
<ng2-smart-table [settings]="view_update_items_settings" [source]="source" (createConfirm)="onCreateConfirm($event)" class="table table-hover table-striped"></ng2-smart-table>
in .ts file:
onCreateConfirm(event) {
...
}
Related
I am new at this correct me if I'm wrong . I want to take the name data from the input with ng-model but i cant take the data at the onTap: function. I tried to alert $scope.name but it is empty doesnt work,then i tried $scope.name="" empty at the init but it doesnt change when the user writes his name.How can i get the name .Thank you.
`$scope.data = {
model: "Choose",
availableOptions: [
{id: '1', name: 'dummyText1'},
{id: '2', name: 'dummyText2'},
{id: '3', name: 'dummyText3'}
]
};`
var myPopup = $ionicPopup.show({
template:
'<div class="list list-inset">' +
'</label><label class="item item-input"><i class="icon ion-person placeholder-icon"></i>' +
'<input type="text" placeholder="Your name.." ng-model="name"></label>' +
'</div>' ,
title: 'Profile',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
if ($scope.name != null) {
alert($scope.name);
e.preventDefault();
} else {
alert($scope.name);
}
}
}
]
});
here is the popup screenshot
Thank you again
I figured out with adding ng-change="foo(data)" to input ,now im able to use this data at scope .
Thank you.
I am trying to use reactive-table (reactive-table) in Meteor to display users and to edit. I have a major problem:
- I am creating the users with Accounts.createUser() method and I have an extra field "profile" (using meteor-roles package). I am defining the table format using the following code:
Template.adminusers.helpers({
usersCol: function() {
return Meteor.users;
},
settings: function() {
return {
rowsPerPage: 10,
showFilter: true,
fields: [{
key: 'profile.lastname',
label: 'Last name'
}, {
key: 'profile.firstname',
label: 'First name'
}, {
key: 'roles',
label: 'Role'
}, {
key: 'emails.0.address',
label: 'Email'
}, {
key: 'edit',
label: '',
sortable: false,
fn: function() {
var html = '<button class="btn btn-info btn-xs" type="button"><i class="fa fa-paste"></i> Edit</button>'
return new Spacebars.SafeString(html);
}
}]
};
}
});
The problem is that roles and email are displayed only for the current user. I have no idea why...
The profile fields its published to the client by default.
Now in order to get all the user objects, you should do something like this (using allaning roles).
For example you have an user with the rol of Admin, this is how the publish should look and the subscribe.
if(Meteor.isClient){
Tracker.autorun(function(){
Meteor.subscribe('Admin')
})
}else if(Meteor.isServer){
Meteor.publish("Admin", function () {
var user = Meteor.users.findOne({_id:this.userId});
if (Roles.userIsInRole(user, ["Admin"])) {
return Meteor.users.find({}, {fields: {emails: 1, profile: 1, roles: 1}});
}
}
Witht his the Admin user will get all the users, also use a helper like this.
Template.example.helpers({
userList:function(){
return Meteor.users.find();
}
})
I'm trying to put an image background to my form panel, it doesn't display anything, I'm using the code in this tutoriel:
http://miamicoder.com/2012/adding-a-login-screen-to-a-sencha-touch-application-part-2/
here is my login view:
Ext.define('MyApp2.view.Login', {
extend: 'Ext.form.Panel',
alias: "widget.loginview",
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Img', 'Ext.util.DelayedTask'],
config: {
title: 'Login',
cls:'panelBackground',
// bodyStyle:'background-color:#fff;padding: 10px',
items: [
{
xtype: 'label',
html: 'Login failed. Please enter the correct credentials.',
itemId: 'signInFailedLabel',
hidden: true,
hideAnimation: 'fadeOut',
showAnimation: 'fadeIn',
style: 'color:#990000;margin:5px 0px;'
},
{
xtype: 'fieldset',
title: 'Login Example',
items: [
{
xtype: 'textfield',
placeHolder: 'Username',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
},
{
xtype: 'passwordfield',
placeHolder: 'Password',
itemId: 'passwordTextField',
name: 'passwordTextField',
required: true
}
]
},
{
xtype: 'button',
itemId: 'logInButton',
ui: 'action',
padding: '10px',
text: 'Log In'
}
],
listeners: [{
delegate: '#logInButton',
event: 'tap',
fn: 'onLogInButtonTap'
}]
},
onLogInButtonTap: function() {
var me = this,
usernameField = me.down('#userNameTextField'),
passwordField = me.down('#passwordTextField'),
label = me.down('#signInFailedLabel'),
username = usernameField.getValue(),
password = passwordField.getValue();
label.hide();
// Using a delayed task in order to give the hide animation above
// time to finish before executing the next steps.
var task = Ext.create('Ext.util.DelayedTask', function() {
label.setHtml('');
me.fireEvent('signInCommand', me, username, password);
usernameField.setValue('');
passwordField.setValue('');
});
task.delay(500);
},
showSignInFailedMessage: function(message) {
var label = this.down('#signInFailedLabel');
label.setHtml(message);
label.show();
}
});
and my app.css:
.panelBackground
{
background-image: url(http://localhost:8383/MyApp2/resources/images/login.png) !important;
background-repeat: no-repeat !important;
background-size: 100% 100% !important;
}
Ps: I've tried to put it in the index.html, but it seems that nothing is changing, what I'm doing wrong?
The problem is Ext.form.Panel, it renders a scroll container above the background (You can check it in the Chrome Debugger). But i don't know how to disable that.
But when you change it to
Ext.define('MyApp2.view.Login', {
extend: 'Ext.Container',
alias: "widget.loginview",
the code is going to work.
I had a look on the rest of your code, there will be no problem when using a container instead of a form panel.
I am also using same code and tring to set image in background of panel but i am getting blank border on image.
I want to set image in full screen.
Is your images fitted on full screen if yes then please post your code.
I want to create Grid that has 3 columns. One column is 'textfield' and the other two columns are image which I set editor as 'filefield'. On image column I can display image by using renderer but when it comes to edit or add new image I can't press the browse button to browse image. Here is my code.
var grid = Ext.create('Ext.grid.Panel', {
title: 'Author',
store: Ext.data.StoreManager.lookup('authorStore'),
renderTo: 'authorGrid',
columns: [{
header: 'Name',
dataIndex: 'name',
editor: {
xtype: 'textfield',
}
}, {
header: 'Icon',
dataIndex: 'iconImage',
renderer: function(val) {
return '<img src="' + val + '">';
},
editor: {
xtype: 'filefield',
allowBlank: false,
}
}, {
header: 'Background',
dataIndex: 'background',
renderer: function(val) {
return '<img src="' + val + '">';
},
editor: {
xtype: 'filefield',
allowBlank: false,
}
}],
selModel: Ext.create('Ext.selection.CheckboxModel'),
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
})
],
tbar: [{
iconCls: 'icon-add',
text: 'Add',
handler: function() {
// add record
}
}, {
iconCls: 'icon-delete',
text: 'Remove',
handler: function() {
// remove selected records...
}
}, {
iconCls: 'icon-save',
text: 'Save',
handler: function() {
store.save();
}
}]
});
What does it wrong? Can I put 'filefield' editor like this? Is it possible to click save button on grid for save grid data and upload images?
After quick investigation I didn't realized any easy solutions for this issue. In my view EditorGrid isn't supposed to support such type of operations.
And moreover - editor in grid is intended to modify value in corresponding row of the store. With fileupload you operate with files, but as I see in you code you are waiting for a string data in these cells.
What I suggest is replace the fileupload in cells with a popup. When user clicks a cell, you will open popup with fileupload. When they select a file and upload it - you close the popup and reload record in grid's store. Just an idea!
how can i change the button-text ("Done" and "Cancel") in the selectfield to german or in any text i like?
xtype: 'selectfield',
name: 'sector',
width: 150,
prependText: 'Sector:',
options: [
{text: 'Alle Termine', value: 'alldates'},
]
one easy possibilty would be to override the defaults of the picker, e.g.:
Ext.override(Ext.Picker, {
doneButton: 'Fertig',
cancelButton: 'Abbrechen'
});
You can extend Ext.form.Select to allow you to apply your own configuration to the picker it uses.
Ext.ns('MySite.ux.form');
MySite.ux.form.Select = Ext.extend(Ext.form.Select , {
getPicker: function() {
if (!this.picker) {
this.picker = new Ext.Picker(Ext.apply({
slots: [{
align : 'center',
name : this.name,
valueField : this.valueField,
displayField: this.displayField,
value : this.getValue(),
store : this.store
}],
listeners: {
change: this.onPickerChange,
scope: this
}
}, this.pickerConfig));
}
return this.picker;
}
});
Ext.reg('myselectfield', MySite.ux.form.Select);
And your selectfield configuration might look like this:
{
xtype: 'myselectfield',
name: 'sector',
label: 'Sector',
pickerConfig: {
doneButton: 'Fertig',
cancelButton: 'Abbrechen'
}
}