Hello i am have two kendo ui drodDownList:
kendo-drop-down-list(
ng-model = 'vm.firstList'
k-data-source='vm.filterData'
k-data-text-field='"title"'
k-data-value-field='"name"'
k-value-primitive='true'
k-filter='"contains"'
k-on-change='vm.onChange($event)'
)
and
kendo-drop-down-list(
ng-model = 'vm.secondList'
k-data-source='vm.filterData'
k-data-text-field='"title"'
k-data-value-field='"name"'
k-value-primitive='true'
k-filter='"contains"'
k-on-change='vm.onChange($event)'
)
it is data source:
this.filterData = [
{ name: 'Brown', title: 'Soier' },
{ name: 'Maks', title: 'Inkl' },
{ name: 'Lint', title: 'Baks' },
{ name: 'Hover', title: 'Niyou' }
]
they have same data source, and i am want when choosing item in first dd then remove this item from other dd (and likewise for the second). At the same time, two identical elements can not be selected.
my solution:
in first dd add:
k-on-change='vm.onFirstSelect(kendoEvent)'
k-data-source='vm.firstFilterElements'
for second dd:
k-on-change='vm.onSecondSelect(kendoEvent)'
k-data-source='vm.secondFilterElements'
in controller add:
this.filterElements = [
{ name: 'Brown', title: 'Soier' },
{ name: 'Maks', title: 'Inkl' },
{ name: 'Lint', title: 'Baks' },
{ name: 'Hover', title: 'Niyou' }
]
this.firstFilterElements = this.filterElements;
this.secondFilterElements = this.filterElements;
onFirstSelect(e) {
this.secondFilterElements = this.filterByItem(e);
}
onSecondSelect(e) {
this.firstFilterElements = this.filterByItem(e);
}
filterByItem (e) {
return this.filterElements.filter(function (el) {
return el.name !== e.sender.dataItem(e.item)
[e.sender.options.dataValueField];
});
}
if someone can optimize it i will be glad)
Related
Given is following data structure
const list = [
{
title: 'Section One',
data: [
{
title: 'Ay',
},
{
title: 'Bx',
},
{
title: 'By',
},
{
title: 'Cx',
},
],
},
{
title: 'Section Two',
data: [
{
title: 'Ay',
},
{
title: 'Bx',
},
{
title: 'By',
},
{
title: 'Cx',
},
],
},
];
What i want to do ist to filter this list based on title property in the data array of each object.
An example would be to have the list where the title property of the childs starts with "B", so the list will look like that:
const filteredList = [
{
title: 'Section One',
data: [
{
title: 'Bx',
},
{
title: 'By',
}
],
},
{
title: 'Section Two',
data: [
{
title: 'Bx',
},
{
title: 'By',
}
],
},
];
What i tried so far was something like that:
const items = list.filter(item =>
item.data.find(x => x.title.startsWith('A')),
);
or
const filtered = list.filter(childList => {
childList.data.filter(item => {
if (item.title.startsWith('B')) {
return item;
}
return childList;
});
});
But i think i am missing a major point here, maybe some of you could give me a tip or hint what i am doing wrong
Best regards
Your issue is that you're doing .filter() on list. This will either keep or remove your objects in list. However, in your case, you want to keep all objects in list and instead map them to a new object. To do this you can use .map(). This way you can map your objects in your list array to new objects which contain filtered data arrays. Here's an example of how you might do it:
const list=[{title:"Section One",data:[{title:"Ay"},{title:"Bx"},{title:"By"},{title:"Cx"}]},{title:"Section Two",data:[{title:"Ay"},{title:"Bx"},{title:"By"},{title:"Cx"}]}];
const filterByTitle = (search, arr) =>
arr.map(
({data, ...rest}) => ({
...rest,
data: data.filter(({title}) => title.startsWith(search))
})
);
console.log(filterByTitle('B', list));
I am using react-select2-wrapper which has the same functionality as select2.
I'm trying to change All to the text of whatever basisList is selected. I am able to correctly update it to Users (ID) using componentWillMount().
My problem is, if I change the basisList that is selected to machines which calls this.updateResolutionText() does not cause select2 to re-render. I can see that my state has been updated correctly, however select2 isn't updating.
What am I missing? I would think that by updating this.state.resolutionOptions that my select2 component would automatically update, thus displaying the new text.
this.state = {
resolutionOptions: [
{ text: 'All', id: 0, value: 'all' },
{ text: 'Month', id: 1, value: 'Monthly' },
{ text: 'Day', id: 2, value: 'day' },
{ text: 'Day-Hour', id: 3, value: 'Day-Hour' },
{ text: 'Hourly (0-23)', id: 4, value: 'hourly' },
{ text: 'Day of Week', id: 5, value: 'dow' }
]
}
componentWillMount() {
this.updateResolutionText()
}
componentDidUpdate() {
// this returns correctly {text: 'Machines', id: 0, value: 'all'}
console.log(this.state.resolutionOptions[0]);
}
updateResolutionText() {
let basisList = [
{text: 'Users (ID)', id: 0, value: 'users'},
{text: 'Machines', id: 1, value: 'machines'}
];
let options = this.state.resolutionOptions;
let comparison = 'users';
if(basisList) {
for(let i = 0; i < basisList.length; i++) {
if(basisList[i].value === comparison) {
options[0].text = basisList[i].text
break;
}
}
}
this.setState({ resolutionOptions: options });
}
<Select2 className="form-control"
ref="resolution"
data={this.state.resolutionOptions}
defaultValue={0}>
You should not update the state directly
this.state = {
resolutionOptions: [
{ text: 'All', id: 0, value: 'all' },
{ text: 'Month', id: 1, value: 'Monthly' },
{ text: 'Day', id: 2, value: 'day' },
{ text: 'Day-Hour', id: 3, value: 'Day-Hour' },
{ text: 'Hourly (0-23)', id: 4, value: 'hourly' },
{ text: 'Day of Week', id: 5, value: 'dow' }
]
}
componentWillMount() {
this.updateResolutionText()
}
componentDidUpdate() {
// this returns correctly {text: 'Machines', id: 0, value: 'all'}
console.log(this.state.resolutionOptions[0]);
}
updateResolutionText() {
let basisList = [
{text: 'Users (ID)', id: 0, value: 'users'},
{text: 'Machines', id: 1, value: 'machines'}
];
let options = [...this.state.resolutionOptions];
let comparison = 'users';
if(basisList) {
for(let i = 0; i < basisList.length; i++) {
if(basisList[i].value === comparison) {
options[0].text = basisList[i].text // HERE
break;
}
}
}
this.setState({ resolutionOptions: options });
}
<Select2 className="form-control"
ref="resolution"
data={this.state.resolutionOptions}
defaultValue={0}>
This line:
options[0].text = basisList[i].text // HERE
so you can avoid that doing a new object
let options = [...this.state.resolutionOptions];
I have a problem when adding a newRecord, the console always outputs [].
Please help me.
_storePR2.add(_key.data);
_storePR2.commitChanges();
var newRecord = _storePR2.getNewRecords();
console.log('newRecord',newRecord);
Output: newRecord []
enter image description here
this my store code and model :
Ext.define('Sasmita.store.vending.purchase.Purchasegoodrec', {
extend: 'Ext.data.Store',
requires: [
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json',
'Ext.data.Field'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
storeId: 'vending.purchase.Purchasegoodrec',
proxy: {
type: 'ajax',
url: 'jsonresult/Sasmita_Vending_Purchase/getPurchaseGoodrec',
reader: {
type: 'json',
root: 'data',
idProperty: 'sitecode2'
}
},
fields: [
{
name: 'purchase_id_tr'
},
{
name: 'parent_id'
},
{
name: 'file_ext'
},
{
name: 'file_name'
},
{
name: 'file_size'
},
{
name: 'description'
},
{
name: 'id'
},
{
name: 'id_file'
},
{
name: 'id_po'
},
{
name: 'qty_hasil'
},
{
name: 'no_pr'
},
{
dateFormat: 'Ymd',
name: 'date_pr',
type: 'date'
},
{
name: 'warehouse'
},
{
name: 'warehouse_name'
},
{
name: 'row_created_by'
},
{
name: 'row_created_datetime'
},
{
name: 'row_changed_by'
},
{
name: 'row_changed_datetime'
},
{
name: 'title'
},
{
name: 'notes'
},
{
name: 'qty_order'
},
{
name: 'no_po'
},
{
name: 'date_po'
},
{
name: 'supplier'
},
{
name: 'package'
},
{
name: 'qty_approve'
},
{
name: 'purchase_product_name'
},
{
name: 'unit'
},
{
name: 'unit_price'
},
{
name: 'total_price'
},
{
name: 'total_price_head'
},
{
name: 'vat'
},
{
name: 'net_price'
},
{
name: 'sum_total'
}
]
}, cfg)]);
}
});
and this my controller action button choose :
var me = this;
var _panel = me.getMainPanel();
var _tabpanel = _panel.down('#tabmaintain');
var _activetab = _tabpanel.getActiveTab();
var _window = button.up('window');
var _grid = _window.down('grid');
//var _girdd = this.getPanelSearch();
//var _grids = _girdd.down('grid');
var _gridSelected = _grid.getSelectionModel().getSelection();
//var row = _grid.store.indexOf(_gridSelected);
//console.log(row);
console.log(_gridSelected);
console.log(_grid);
//console.log(_girdd.down('grid'));
//selected=[];
//Check selected product
if(_gridSelected.length===0){
Ext.Msg.alert('Warning','Please select product');
return;
}
//Submit Product
var _gridPR = _activetab.down('#detailProduct');
var _storePR2 = _gridPR.getStore();
//console.log(_storePR2.data);
Ext.Array.each(_gridSelected,function(_key,_value,item){
//console.log(selected.push(item));
_validate = true;
_storePR2.each(function(_storeData,_storeIndex){
console.log(_key.data);
if(_storeData.data.no_po === _key.data.no_po){
_validate = false;
Ext.Msg.alert('Warning','The Product had been picked');
return;
}
});
if(_validate){
// Add record to the store by data
_storePR2.add(_key.data);
// Get array of new records from the store
var newRecords = _storePR2.getNewRecords();
console.log('newRecord',newRecords);
// Commit changes after getting new records
_storePR2.commitChanges();
_window.close();
}
});
That is because you committed the changes, so there are no longer any 'new records'.
Try to get the new records before committing the changes:
// Add record to the store by data
_storePR2.add(_key.data);
// Get array of new records from the store
var newRecords = _storePR2.getNewRecords();
console.log('newRecord',newRecords);
// Commit changes after getting new records
_storePR2.commitChanges();
Here is a fiddle.
First you need to add records to store and commit changes,then get new records.
grid_store.add({'Name':"ab",'dob':"099"})
grid_store.commitChanges();
var newRecord = grid_store.getNewRecords()
console.log('newRecord',newRecord);
});
Here is a fiddle: http://jsfiddle.net/2p78md5t/3/
How do I loop through an array with some delay with Angular 2 and TypeScript?
I have an array,
students: Array<any> = [
{
name: "Alan"
},
{
name: "Jake"
},
{
name: "Harry"
},
{
name: "Susan"
},
{
name: "Sarah"
},
{
name: "Esther"
}
];
I want to loop through the list and display the names with a 2000ms delay.
<div *ngFor="let student of students">
{{student.name}}
</div>
doesn't work with a delay but is looping all at once.
Just use setTimeout. For example (* not tested):
students: Array<any> = [ ];
populateArrayWithDelay():void{
let people = [
{
name: "Alan"
},
{
name: "Jake"
},
{
name: "Harry"
},
{
name: "Susan"
},
{
name: "Sarah"
},
{
name: "Esther"
}
];
for(let i = 0; i < people.length; i++){
let student = people[i];
setTimeout(() => {
this.students.push(student);
}, 2000*(i+1));
}
}
Plunker example
export class App {
name:string;
students: Array<any> = [
{
name: "Alan"
},
{
name: "Jake"
},
{
name: "Harry"
},
{
name: "Susan"
},
{
name: "Sarah"
},
{
name: "Esther"
}
];
constructor() {
var timer = 0;
this.$students = Observable.from([[], ...this.students])
.mergeMap(x => Observable.timer(timer++ * 1000).map(y => x))
.scan((acc, curr) => {acc.push(curr); return acc;});
}
}
i build a list using .factory and in every elemt have a arrtibute which store page which needed to be include when clicked on any list item
.
i am unable to use this attribute dynamiclly ..plzz help,,,,
i am using ionic framework
////////////// service.js ////////////////
angular.module('starter.services', [])
.factory('Ctopic', function() {
// Might use a resource here that returns a JSON array
// Some fake testing data
var chats = [ { title: 'Arrays', id:11 ,desc: "'ctopic/Union.html'"},
{ title: 'Bit Field Declaration', id:12 },
{ title: 'C Pointers', id: 13 },
{ title: 'Conditional Statements', id: 14 },
{ title: 'File IO', id: 15 },
{ title: 'Function', id: 16 },
{ title: 'Input & Output', id: 17 },
{ title: 'Loops', id: 18 },
{ title: 'Preprocessor Operators', id: 19 },
{ title: 'Preprocessor', id: 20 },
{ title: 'String', id: 21 },
{ title: 'Structures', id: 22 },
{ title: 'Typedef', id: 23 },
{ title: 'Union', id: 24 }];
return {
all: function() {
return chats;
},
remove: function(chat) {
chats.splice(chats.indexOf(chat), 1);
},
get: function(chatId) {
for (var i = 0; i < chats.length; i++) {
if (chats[i].id === parseInt(chatId)) {
return chats[i];
}
}
return null;
}
};
});
/////// html page /////////
<ion-view view-title="{{chat.title}}">
<ion-content class="padding">
{{chat.id}}
{{chat.desc}}
<div ng-include="{{chat.desc}}"></div>
</ion-content>
</ion-view>
Don't use the brackets for ng-include:
<div ng-include="chat.desc"></div>