We Keep Coding

How to change several data items to true one at a time in Vuejs

I am very new to Vuejs and I am wondering how I can make this work in Vuejs
I have a set of different data:
data() {
return {
recents: false,
frontend: false,
backend: false,
devops: false,
tutoriais: false,
};
},
And when I click on a button it invokes openOptions() and it changes a specific property to true or false.
openOptions(e) {
const optionClicked = e.target.text.toLowerCase();
this[optionClicked] = !this[optionClicked];
},
However, I can't have 2 properties being true. I need to set everything else to false but I am having a hard time understanding how I can make this work. So basically what I need is
set the one I clicked to true
and the rest to false
Can anyone help me with that?

You can first create an object as a single entity, I've used an object with name as collection
Live Demo
data() {
return {
collection: {
recents: false,
frontend: false,
backend: false,
devops: false,
tutoriais: false,
},
};
},
then, you can attach click listener on each elment(if you want, you can also attach a single click listener on its parent)
<button
v-for="[key, value] in Object.entries(this.collection)"
:key="key"
v-on:click="() => openOptions(key)"
>
{{ key }}
{{ value }}
</button>
when user click on any button then only its value will set to true and rest others are false as:
openOptions(clickedKey) {
Object.keys(this.collection).forEach((key) => {
this.collection[key] = key === clickedKey ? true : false;
});
},

Angular ng-smart-table delete confirm modal dose not work

Trying to use ng-smart-table to shows delete confirm modal when user try to delete row, but the modal does not appear.
I added delete related settings following documents and other examples but still modal does not show.
<ng2-smart-table [settings]="settings" [source]="data" (deleteConfirm)="onDeleteConfirm($event)">
</ng2-smart-table>
settings = {
mode: 'external',
pager: {perPage: 10},
hideSubHeader: true,
sort: false,
actions: {
position: 'right',
edit: false,
delete: true,
add: false,
},
delete: {confirmDelete: true},
columns: {
id: {title: 'ID'},
},
}
onDeleteConfirm($event: any) {
if (window.confirm('Are you sure you want to delete?')) {
$event.confirm.resolve();
} else {
$event.confirm.reject();
}
}
Nothing shows on Chrome Console log.

Remove mode: 'external' from the settings.
Please refer the demo for better understanding. DEMO https://stackblitz.com/edit/example-ng2-smart-table

As you can see in the ng2-smart-table documentation:
Triggered only if table confirmDelete = true and mode = inline.
So please change the mode in settings to inline instead of external.

How to remove sorting on ui-grid before reload another data set ui-grid

Im using ui-grid to load my data set. Here is my requirment;
step 01: I want to load dataset_01 (scope.gridOptions.data = res_01;).
step 02: I want to sort by First Name (Click by firstname column).
step 03: Click an external button and Reload ui-grid with an another data set (scope.gridOptions.data = res_02;).
Here is my result:
I dont want sort by First Name here for second dataset.
I want data without sorting. How can I do it ?
Expected result:
So I want to reload second data set without sorting (Means I want to remove first sorting before load second data set). how can I reset my ui-grid before load next data set (scope.gridOptions.data = res_01;).
How can I do it ?
Thank you. :)

You can set the sort property of your columnDefs to:
sort: {
direction: undefined,
}
and call for grid refresh using $sope.gridApi.core.refresh() after. This should re-render the whole grid and get rid of the sorting.

Visit this page: http://ui-grid.info/docs/#/api/ui.grid.core.api:PublicApi
After having instantiated your gridApi, you can just call:
$scope.gridApi.core.refresh();
Hope that helps! :)

Create your gridoption like this
example
$scope.gridOptions = {
useExternalPagination: true,
useExternalSorting: false,
enableFiltering: false,
enableSorting: true,
enableRowSelection: false,
enableSelectAll: false,
enableGridMenu: true,
enableFullRowSelection: false,
enableRowSelection: false,
enableRowHeaderSelection: false,
paginationPageSize: 10,
enablePaginationControls: false,
enableRowHashing: false,
paginationCurrentPage:1,
columnDefs: [
{ name: "FristName", displayName: "Frist Name", width: '6%', sort: { direction: undefined } },
]
};
after that you can remove the sorting where you want using below code
$scope.RemoveSorting = function ()
{
$scope.gridOptions.columnDefs.forEach(function (d) {
d.sort.direction = undefined;
})
}

CKEDITOR: how to I convert ALL html entities

here is the list: http://www.elizabethcastro.com/html/extras/entities.html
I either want to enable all of them, or disable all of them... (aside from < and > of course)
Is there a way to do this?
there is the config.entities_additional = "", but that is a comma separated list of all the entities you want to store.
preferably, I'd like to disable the entities entirely, but setting config.entities = false; doesn't do anything. o.o
#Cheery's answer solves the situation where the editor uses the config.js file.
however,
CKEDITOR.replace("selected_text_actual", {
uiColor: "#F5F5F5",
toolbar: "myToolbar",
scayt_autoStartup: false,
enterMode: CKEDITOR.ENTER_BR,
forcePasteAsPlainText: true,
forceSimpleAmpersand: true,
height: '170px',
entities: false,
basicEntities: false,
entities_greek: false,
entities_latin: false,
toolbarCanCollapse: false,
resize_enabled: false,
disableNativeSpellChecker: false,
removePlugins: 'elementspath',
editingBlock: false}).setData(text_for_editor);
Still has the HTML entities.

Set all of them to false:
config.entities = false;
config.basicEntities = false;
config.entities_greek = false;
config.entities_latin = false;

ExtJS buttons won't accept "id" config parameter?

I need specific IDs on ExtJS generated window buttons, but I'm having trouble specifying the ID. The documentation claims that this should be possible, but I still get an autogenerated id when I specify my own.
What gives?
dialog = new Ext.Window({
closeAction:'hide',
plain: true,
buttons: [
{
id: 'my-dialog',
text: 'Done',
handler: function() {
dialog.hide();
}
}
],
items:new Ext.Panel({
applyTo:'add-document-popup-panel'
}),
title: 'Add Documents',
layout: 'fit',
resizable: false,
draggable: false,
width: 300,
height: 300,
modal: true
});
}
dialog.show(this);

Check this topic: http://www.sencha.com/forum/showthread.php?24433-CLOSED-Cannot-assign-id-to-button-extjs-bug
The id of the container of the button is set, not the HTML button itself.

The id you specify is assigned to the button component (specific to extjs) and not necessarily to the underlying html button.
Does Ext.getCmp('my-dialog') successfully return the extjs button component?

The ID is set, but not on the actual button element. One of the containers is set with the correct id, and you can probably key off of this to get at whatever you need.

I had the same problem and I confirm:
The ID is set in the button's TABLE container.
Ext.getCmp('my-button') returns the extjs button component (object with xtype="button" and id="my-button").