I have a checkboxgroup and a radiogroup. For both of them, I want to catch several values.
For the checkboxGroup
var DescCheck = new Ext.form.CheckboxGroup({
fieldLabel: 'Description of service : <span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>',
width : 540,
labelSeparator : '',
items: [
{boxLabel: 'Direct', name: 'Direct', inputValue: 'Direct'},
{boxLabel: 'Fixed-day', name: 'day', inputValue: 'Fixed'},
{boxLabel: 'Weekly', name: 'Weekly', inputValue: 'Weekly'}
]
});
I tried DescCheck.getValue() but it returned me
[object Object]
I tried DescCheck.getValue().inputValue and it returned me nothing.
For the radioGroup
var TypeCheck = new Ext.form.RadioGroup({
items: [
{boxLabel: 'New 1', name: '1', inputValue: '1'},
{boxLabel: 'New 2', name: '2', inputValue: '2'},
{boxLabel: 'New 3', name: '3', inputValue: '3'}
]
I tried TypeCheck.getValue().inputValue but it returned only the first selected item. How can I catch several checked boxes?
Did you tried getChecked for getting all checked boxes.
DescCheck.getChecked();
Update
You should use getValue(), It returns the array of selected values.
You can get that by looping through array like this
var selectedValue = DescCheck.getValue();
for(var i=0;i<selectedValue.length;i++){
console.log(select[i].inputValue);
}
In my project works this below...
var selectedOptions = DescCheck.getChecked(); // DescCheck.getValue();
for (var i = 0; i < selectedOptions.length; i++) {
console.log( selectedOptions[i].inputValue );
}
Related
Is there other solution to use R.applySpec without inserting the the unchanged keys value?(without needs to type id and name keys in the example, because later the keys will be change dynamically). Thank you.
Here is my input data
const data = [
[
{ id: 'data1', name: 'it is data 1', itemId: 'item1' },
{ id: 'data1', name: 'it is data 1', itemId: 'item2' }
],
[
{ id: 'data2', name: 'it is data 2', itemId: 'item1' }
],
[
{ id: 'data3', name: 'it is data 3', itemId: 'item1' },
{ id: 'data3', name: 'it is data 3', itemId: 'item2' }
]
]
And the output
[
{
id: 'data1', // this one doesn't change
name: 'it is data 1', // this one doesn't change
itemId: [ 'item1', 'item2' ]
},
{
id: 'data2', // this one doesn't change
name: 'it is data 2', // this one doesn't change
itemId: [ 'item1' ]
},
{
id: 'data3', // this one doesn't change
name: 'it is data 3', // this one doesn't change
itemId: [ 'item1', 'item2' ]
}
]
The solution to get the output using Ramda
const result = R.map(
R.applySpec({
id: R.path([0, 'id']),
name: R.path([0, 'name']), // don't need to type id or name again
itemId: R.pluck('itemId')
})
)(data)
We could certainly write something in Ramda like this:
const convert = map (lift (mergeRight) (head, pipe (pluck ('itemId'), objOf('itemId'))))
const data = [[{id: 'data1', name: 'it is data 1', itemId: 'item1'}, {id: 'data1', name: 'it is data 1', itemId: 'item2'}], [{id: 'data2', name: 'it is data 2', itemId: 'item1'}], [{id: 'data3', name: 'it is data 3', itemId: 'item1'}, {id: 'data3', name: 'it is data 3', itemId: 'item2'}]]
console .log (convert (data))
.as-console-wrapper {min-height: 100% !important; top: 0}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.27.0/ramda.js"></script>
<script> const {map, lift, mergeRight, head, pipe, pluck, objOf} = R </script>
I'm not sure whether I find that more or less readable than a ES6/Ramda version, though:
const convert = map (
reduce ((a, {itemId, ...rest}) => ({...rest, itemId: [...(a .itemId || []), itemId]}), {})
)
or a plain ES6 version:
const convert = data => data .map (
ds => ds .reduce (
(a, {itemId, ...rest}) => ({...rest, itemId: [...(a .itemId || []), itemId]}),
{}
)
)
The question about applySpec is interesting. This function lets you build a new object out of the old one, but you have to entirely describe the new object. There is another function, evolve, which keeps intact all the properties of the input object, replacing only those specifically mentioned, by applying a function to their current value. But the input to the functions in evolve accepts only the current value, unlike applySpec which has access to the entire original object.
I could see some rationale for a function combining these behaviors. But I don't have a clear API in my head for how it should work. If you have some thoughts on this, and want to make a proposal, the Ramda team is always looking for suggestions.
I am trying to sort an array of object alphabetically , to make things simple I am using the below example. In my typscript I do splice to insert and remove items from array object.
Array
cars = [{
id: 1,
items: [{
name: 'car1',
description: 'this is car1 description'
},{
name: 'car2',
description: 'this is car2 description'
},{
name: 'car3',
description: 'this is car3 description'
},{
name: 'car4',
description: 'this is car4 description'
},{
name: 'car5',
description: 'this is car5 description'
}]
}];
html
<p-dataView [value]="cars" [paginator]="true" [rows]="5">
<p-header>List of Cars</p-header>
<p-footer>Choose from the list.</p-footer>
<ng-template let-car pTemplate="listItem">
<p-fieldset legend="Header" *ngIf="car.id === 1" [toggleable]="true">
<div *ngFor="let _car of car.items">
{{_car.name}} - {{_car.description}}
</div>
</p-fieldset>
</ng-template>
</p-dataView>
**********************************************UPDATE********************************
Sorry I have one more layer
cars = [{
id: 1,
items: [{
Model:[{
name: 'car1',
description: 'this is car1 description'
}],
Model:[{
name: 'car2',
description: 'this is car2 description'
}],
},
id:2,
items: [{
Model:[{
name: 'car13,
description: 'this is car3 description'
}],
Model:[{
name: 'car4',
description: 'this is car4 description'
}],
}]
}];
I tried
cars[0].items.Model.sort((a,b) => a[0].name > b[0].name ? 1 : -1) //It did not work
also tried
cars[0].items.Model.sort(function (a, b) {
var nameA = a.name.toLowerCase();
var nameB = b.name.toLowerCase();
if (nameA < nameB) //sort string ascending
return -1
})
cars = [{
id: 1,
items: [{
name: 'ab',
description: 'this is car1 description'
},{
name: 'cd',
description: 'this is car2 description'
},{
name: 'car3',
description: 'this is car3 description'
},{
name: 'aaa',
description: 'this is car4 description'
},{
name: 'car5',
description: 'this is car5 description'
}]
}];
cars[0].items.sort((a,b) => a.name > b.name ? 1 : -1)
Or we can simplify to:
cars[0].items.sort((a,b) => a.name.localeCompare(b.name))
I find it most efficient to use a library like Underscore.js for utility functions like this:
Underscore.js and specifically the sortBy method.
Add underscorejs to your project and import it into your component.
import * as _ from 'underscore';
Then call the sort method and pass the array of objects and the key to sort on.
_.sortBy(car.items, 'name');
When you add or remove an item from the car array, resort the car.items collection and reassign it to car
car.items = _.sortBy(car.items, 'name');
Then you can display as you are now, with the sorted data.
naive sort with Array.prototype.sort()
cars.sort(function(x,y) {
if (x.items.name < y.items.name) return -1;
if (x.items.name > y.items.name) return 1;
return 0;
})
Is there any way to merge the columns of UI-grid to be appear as continuous row (without any column line in between). I have tried this
merge columns in ui grid
but this causes me loss of row data at row number number 1. Even more I want every alternate row to be merged.
Here is my Html
<div id="grid" ui-grid="gridOptions" ui-grid-move-columns ui-grid-resize-columns ui-grid-auto-resize class="grid"></div>
Here is my js code for grid
$scope.gridOptions = {
enableColumnResizing: true,
enableRowHeaderSelection: false,
enableGridMenu: true,
enableHorizontalScrollbar: 0,
enableVerticalScrollbar: 2,
enableColumnMenus: false,
enableRowSelection: true,
columnDefs: [
{
name: 'Code',
field: 'Code',
}, {
name: 'Title',
field: 'Title',
}, {
name: 'Visits',
field: 'Visit',
}, {
name: 'UsedVisits',
field: 'usedVisits',
}, {
name: 'Pending Visits',
field: 'pendingVisits',
}, {
name: 'Available Visits',
field: 'availableVisits',
}, {
name: 'Start Date',
field: 'StartDate',
}, {
name: 'End Date',
field: 'EndDate',
}, {
name: 'Status',
field: 'Status',
}
]
};
Please suggest me something,
Thank you
To implement it we can merge data while creating array for grid itself
using logic
originally we have array which we merge to show in grid so that in grid we can get merged data
$scope.myData = [{name: "1Abcd", age: "one", gender:2},
{name: "2Tom", age: "two", gender:1},
{name: "3Abcd", age: "three", gender:2},
{name: "4Abcd", age: "four", gender:2},
{name: "5Abcd", age: "five", gender:2},
{name: "6Abcd", age: "six", gender:2},
{name: "7Abcd", age: "seven", gender:2},
{name: "8Abcd", age: "eight", gender:2},
{name: "9Abcd", age: "nine", gender:2},
];
$scope.myDataNew =[] ;
for(var i=0;i<(($scope.myData.length/2)+1);i++){
var tempObj ={};
if($scope.myData[i*2] && $scope.myData[i*2].name && $scope.myData[i*2+1] &&$scope.myData[i*2+1].name){
tempObj.name =$scope.myData[i*2].name+$scope.myData[i*2+1].name ;
}
else if($scope.myData[i*2] && $scope.myData[i*2].name && !$scope.myData[i*2+1] ){
tempObj.name =$scope.myData[i*2].name;
}
if($scope.myData[i*2] && $scope.myData[i*2].age && $scope.myData[i*2+1] &&$scope.myData[i*2+1].age){
tempObj.age =$scope.myData[i*2].age+$scope.myData[i*2+1].age ;
}else if($scope.myData[i*2] && $scope.myData[i*2].age && !$scope.myData[i*2+1] )
{
tempObj.age =$scope.myData[i*2].age;
}
$scope.myDataNew.push(tempObj);
}
here is code pen for completed implementation
http://codepen.io/vkvicky-vasudev/pen/LRPNyL
If ant change required feel free to inform me
I have an application in which dynamically check boxes and radio buttons get generated based on the data sent from the server. The number of check box/radio button displayed can increase up to 20 (in a single group).
My question is, what is the best method to validate a group of check box, radio button which are generated dynamically and also they are part of the same form element.
Below is the code which I am using
The data is of similar to the format below
$scope.values = [
{ Type: 'CheckBox',
IsRequired: true,
Id:1,
Options: [
{
Id: 11,
Text: 'Test 1',
},
{
Id: 12,
Text: 'Test 2',
},
{
Id: 13,
Text: 'Test 3',
},
{
Id: 14,
Text: 'Test 4',
}
]
},
{ Type: 'Radio',
IsRequired: 'true',
Id: 2,
Options: [
{
Id: 21,
Text: 'Radio 1',
},
{
Id: 22,
Text: 'Radio 2',
},
{
Id: 23,
Text: 'Radio 3',
},
{
Id: 24,
Text: 'Radio 4',
},
]
},
];
And for building the view I am using the below code for generating check boxes
<div ng-class="{ 'has-errors' : testForm.cb_{{q.Id}}.$invalid && {{q.IsRequired}} == true, 'no-errors' :
testForm.cb_{{q.Id}}.$valid && {{q.IsRequired}} == true}">
<ion-checkbox class="item" ng-repeat="opt in q.Options"
name="cb_{{q.Id}}"
ng-required="q.IsRequired"
ng-model="options">
{{opt.Text}}
</ion-checkbox>
</div>
Below code for radio button
<div ng-class="{ 'has-errors' : testForm.rb_{{q.Id}}.$invalid
&& {{q.IsRequired}} == true, 'no-errors' : testForm.rb_{{q.Id}}.$valid
&& {{q.IsRequired}} == true}">
<ion-radio ng-repeat="opt in q.Options"
ng-model="choice"
name="rb_{{q.Id}}"
ng-value="opt.Id"
ng-required="true">{{opt.Text}}
</ion-radio>
</div>
Does angular gantt plugin allow to change the column header labels? I tried to change the side table headers but couldn't. If it doesn't allow what other gantt chart can I use? At the side table, I need to show work station, id and type. In the gannt chart, I need to show the particular ids under the respective priority numbers. Any suggestions, please?
You can change or defined the column header labels at property Options.
$scope.options = {
...
treeTableColumns: ['from', 'to', 'myColumn'],
columnsHeaders: { 'model.name': 'Name', 'from': 'From', 'to': 'To', 'myColumn': 'My column name' },
columnsClasses: { //css
'myColumn': 'myclass'
},
//defined content here. ex: String, checkbox, radio, ...
//ex: <input type="checkbox" id={{row.model.id}} ng-model="row.model.myColumn">
columnsContents: {
'myColumn': '{{row.model.myColumn}}',
...
},
};
$scope.myData = [{
id: 1,
name: 'Finalize concept',
myColumn: 'content',
tasks: [{
id: 'Finalize concept',
name: 'Finalize concept',
priority: 10,
color: '#F1C232',
from: new Date(2013, 9, 17, 8, 0, 0),
to: new Date(2013, 9, 18, 18, 0, 0),
progress: 100
}]
}, {
id: 2,
name: 'Development',
myColumn: 'content',
children: ['Sprint 1', 'Sprint 2', 'Sprint 3', 'Sprint 4'],
content: '<i class="fa fa-file-code-o" ng-click="scope.handleRowIconClick(row.model)"></i> {{row.model.name}}'
} ]
https://www.angular-gantt.com/configuration/attributes/
Here yo have the answer about all you can do.
You cant change the column header labels but you can select between all the formats that you have:
$scope.headersFormats = {
'year': 'YYYY',
'quarter': '[Q]Q YYYY',
month: 'MMMM YYYY',
week: 'w',
day: 'D',
hour: 'H',
minute:'HH:mm'
};