Ng2-smart-table bind 'Add New' button event to an external button - javascript

I have been using ng2-smart-table plugin for the table grid. There is an Add new button to add entry into the table.
But I just want to trigger the 'Add new' event from an external button (May be top of the table but not within the table). There is a feature already available in the ng2-smart-table which is completely reverse to my requirement. That can be achieved by using 'mode:external'.
Currently this is open with their Github page as an issue.
If they don't have an option with Ng2-smart-table, is there anyway to bind an event to other buttons(External) in Angular 6? If so, how can I do it?

You can trigger the ng2-smart-table's create event via DOM object event.
Let's say my ng2-smart-table's add button settings
add: {
addButtonContent : '<span class="add"><i class=""></i></span>',
createButtonContent:'<i class="far fa-save"></i>',
cancelButtonContent: '<i class="fas fa-times"></i>',
confirmCreate: true,
}
then on click of your external button trigger the click of 'add' button in the ng2-smart-table like
onAdd(event) {
$(".add").click();
}

You need to use LocalDataSource or ServerDataSource.
I had the same question, and after trying some examples, I saw the good one here.
In this part of the code they use the data source method load(data) with source(LocalDataSource):
constructor(protected service: BasicExampleLoadService) {
this.source = new LocalDataSource();
this.service.getData().then((data) => {
this.source.load(data);
});
}
Then i try with my code and did the same with LocalDataSource, but to add a row into the table I did this:
this.source.add({
name: 'name',
description: 'desc',
numQuestions: '8',
});
this.source.refresh();
And it work for me.
I hope it helps.

try it:
on your html:
<button (click)="addRecord()">Add</button>
<ng2-smart-table #smartTable [settings]="settings" [source]="source"></ng2-smart-table>
on your component:
#ViewChild('smartTable') smartTable;
.
.
.
addRecord() {
this.smartTable.grid.createFormShown = true;
this.smartTable.grid.getNewRow();
}

Related

Javascript button event not working after page 1

Essentially I have some datatable like this: Now for some reason when I go to the second page, none of the buttons I have are working. Like when I click them nothing happens! But on the first page they work perfectly! Not sure how to fix this issue! [enter image description here][1]
//creation method of the table
var volunteerTable = $('#volunteerTable').DataTable({
paging: true,
pagingType: 'simple_numbers',
columns: [ title:"First Name", title:"Last Name", title:"Email"
The trash can button code:
$('.buttonVDelete').click(function () {
//fill out the fields
//open the delete volunteer modal
//prepare data to send
}
When you use click() you are reading the elements available at the moment of loading the page.
In order to read new rendered elements, you must use on
$(document).on('click','.buttonVDelete', function () {
// Your code
});
is it jQuery required? maybe better vanilla javascript:
document.querySelector('.buttonVDelete').addEventListener('click',
function(){
})
Most of modern browser can easy deal with es5/es6
I hope I helped.

Sign in Google - Customize button appearance

I use the following code to authenticate a user on my website:
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
window.onload = function() {
google.accounts.id.initialize({
client_id: "XXXXXXX.apps.googleusercontent.com",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" }
);
<div id="buttonDiv"></div>
But I need to customize the button with the design of my site...
Is it possible to create my own button like this ?
<button type="button" onclick="googleLogin();">Connection with Google</button>
And with the onlick I can connect. I tested several variants but it does'nt work, the initialization does'nt happen...
how i can customize the button keeping the current code (or just modifying it a bit) ?
Do you have an idea ?
Okay, probably there is no other way to modify the button style other than using renderButton options or just simply CSS.
But there is another option, there is a 'second' API. Afaik, that JS API is considered outdated and Google wants you to use the second one.
So it's here about integrating it into an app, and here about customizing the button itself.

angular-hotkeys , how to override comb?

I have one page which has simply save button and i set alt+s for that.
hotkeys.bindTo($scope).add({
combo: ['alt+s'],
description: 'Collect Payments',
callback: function() {
$scope.collectPayment();
}
});
Below that there is one add button. when add button is presed one model is opened.
On that model also have save button and i have to set alt+s for that also.
hotkeys.bindTo($scope).add({
combo: ['alt+s'],
description: 'Save Form',
callback: function() {
$scope.saveForm();
}
});
How it isa possible ?
i tryed but main page key is lost.
Fortunatly i find answer of this.
When open model just delete all combs and initialize model combs.
and when close model reinitialize that main page combs.

How to get the selected icon from js bootsstrap iconpicker?

I installed the js bootstrap iconpicker (http://www.jqueryscript.net/other/jQuery-Based-Icon-Picker-For-Bootstrap-3-iconpicker.html, http://victor-valencia.github.io/bootstrap-iconpicker/) but I do not see how to detect the selected icon.
The example code to configure the button is:
$('#convert').iconpicker({
iconset: 'fontawesome',
icon: 'fa-key',
rows: 5,
cols: 5,
placement: 'top',
});
But there's nothing in the examples telling how to get the selected icon. I'ld think of a callback or something like that.
How can I get the selected icon?
I've updated the plugin at Github, so a change event is fired when the user change the iconpicker.
I've already sent a pull request to the owner of the plugin (Victor Valencia).
While he doesn't approve the changes you can use the version modified by me.
How you use it:
$('#iconpicker').on('change', function(e) {
console.log( e.icon );
});
Log:
fa-key
fa-info-circle
fa-flag-checkered
Edit:
Victor Valencia already approved my pull request so you can download the source from his repository.
Theres a hidden input that changes based on what you select - you can access it with this: $('input[name=icon]')
As fas as mi knowledge, It just change the css of the component. You will not get the image value here or the path.
Can you please elaborate what you trying to achieve here.
the event is "iconpickerSelected"
$('#convert').iconpicker({
iconset: 'fontawesome',
icon: 'fa-key',
rows: 5,
cols: 5,
placement: 'top',
});
$('#convert').on('iconpickerSelected', function (e) {
//here you can get the value
$(this).val()
})

Ember Collapsible Container

I'm using Ember.js with handlebars and I need to make a div within my page collapse/expand when clicked. I know how to do this in jQuery, but I can't use any jQuery. Does anyone know how to accomplish this? Also I don't want to just toggle a hide attribute, I need the full sliding up and down feature for collapsing. If anyone has any ideas, I'd really appreciate it.
Thanks
Clicking on your view will cause a click event to be triggered. You can code your animation in any manner you want inside a click event handler in your view:
CollapsableView = Ember.View.extend({
click : function(event) {
this.$().toggle('fast');
}
})
The proper way of doing this in Ember is via the awesome Liquid Fire addon.
The outline:
Install Liquid Fire into your project.
Define a transition like this:
this.transition(
this.hasClass('transition-spoiler'),
this.toValue(true),
this.use('toDown'),
this.reverse('toUp')
);
In your controller/component, create a property spoilerIsVisible and a toggleSpoiler property:
spoilerIsVisible: false,
actions: {
toggleSpoiler: function() {
this.toggleProperty('spoilerIsVisible');
}
}
In your page/component template, create a button and a spoiler wrapper like this:
<button {{action 'toggleSpoiler'}}>
{{if spoilerIsVisible 'Show spoiler' 'Hide spoiler'}}
</button>
{{#liquid-if spoilerIsVisible class="transition-spoiler"}}
<p>Dumbledore dies</p>
{{/liquid-if}}
Note that you can wrap steps 3-4 into an x-spoiler component or something.
I do something similar, but with a tree-structure. I have written a blog post about this previously here: http://haagen-software.no/blog/post/2012-05-05-Ember_tree
It has the features you need in it, in that it adds and removed elements from the DOM when the nodes are clicked on.
A working example can be seen in an app I am currently building here: https://github.com/joachimhs/EurekaJ/tree/netty-ember/EurekaJ.View/src/main/webapp

Categories

Resources