I have data which i am binding to wijmogrid. However i would like to have an additional column for the wijmogrid as checkboxes for each row. My data will not have any value for this. My data has only 3 columns which is getting bound to the grid.I want to have a 4th column for each row with a checkbox.
I tried using like
flex.columns.addnew but there is no property to append the columns
My code:
Angular JS
function getData() {
return [
{ Col1: 'QA', Col2: 1, Col3: true },
{ Col1: 'Dev', Col2: 0, Col3: true },
{ Col1: 'UAT', Col2: 2, Col3: false },
{ Col1: 'Prod', Col2: 3, Col3: false }
];
}
$scope.data = getData();
// formatter to add checkboxes to boolean columns
$scope.itemFormatter = function (panel, r, c, cell) {
//$scope.itemFormatter = function (args) {
if (panel.cellType == wijmo.grid.CellType.ColumnHeader) {
var flex = panel.grid;
var col = flex.columns[c];
// check that this is a boolean column
if (col.dataType == wijmo.DataType.Boolean)
{
// prevent sorting on click
col.allowSorting = false;
// count true values to initialize checkbox
var cnt = 0;
for (var i = 0; i < flex.rows.length; i++) {
if (flex.getCellData(i, c) == true) cnt++;
}
// create and initialize checkbox
cell.innerHTML = '<input type="checkbox"> ' + cell.innerHTML;
var cb = cell.firstChild;
cb.checked = cnt > 0;
cb.indeterminate = cnt > 0 && cnt < flex.rows.length;
// apply checkbox value to cells
cb.addEventListener('click', function (e) {
flex.beginUpdate();
for (var i = 0; i < flex.rows.length; i++) {
flex.setCellData(i, c, cb.checked);
}
flex.endUpdate();
});
}
}
}
HTML
wj-flex-grid items-source="data" item-formatter="itemFormatter">
<wj-flex-grid-column header="Col1" binding="Col1"></wj-flex-grid-column>
<wj-flex-grid-column header="Col2" binding="Col2"></wj-flex-grid-column>
<wj-flex-grid-column header="Col3" binding="Col3"></wj-flex-grid-column>
<wj-flex-grid-column header="Select" dataType="Boolean"></wj-flex-grid-column>
</wj-flex-grid>
I think the same has been replied on this link:
http://wijmo.com/topic/add-checkbox-to-flexgrid-where-there-is-no-data-to-bind-using-angular/
Let me know if you have any further questions
Related
I have a problem in Angular8. I need to convert a for loop of an array into a loop of for-of or array.map.
I have this code, I pass an array of objects and I need to separate it into col and row array for visualization.
private pages = [];
public grid = [];
public col = 2;
public row = 2;
public indexPage = 0;
private gridSize = this.col * this.row;
private items = [
{
url:'http://url1',
name:'1',
active: false,
},
{
url:'http://url2',
name:'2',
active: false,
},
{
url:'http://url3',
name:'3v',
active: false,
},
{
url:'http://url4',
name:'4v',
active: false,
},
{
url:'http://url5',
name:'5v',
active: false,
},
{
url:'http://url6',
name:'6v',
active: false,
},
{
url:'http://url7',
name:'7v',
active: false,
},
]
ngOnInit() {
if(this.col === 0 || this.row === 0) {
this.grid = this.items;
}else {
for (let i = 0; i < this.items.length; i+= this.gridSize) {
let page = this.items.slice(i , i+this.gridSize);
this.pages.push(page);
}
for (let i = 0; i < this.pages.length; i++) {
let pageUrl = [];
for(let j = 0; j < this.pages[i].length; j+=this.col) {
let urls = this.pages[i].slice(j , j+this.col);
pageUrl.push(urls);
}
this.grid.push(pageUrl);
}
}
}
my output from object whit col = 2; row = 2; :
pages --> (2) [Array(4), Array(3)] // 2 pages
--> (0) [{...},{...},{...},{...}] // 1st page - 4 elemet
--> (1) [{...},{...},{...}] // 2nd page - 3 element
grid --> (2) [Array(2), Array(2)]
-->(0) [Array(2), Array(2)] // page1 - 2 row
--> (0)[{...},]{...}] // 2 col x row
--> (1)[{...},]{...}] // 2 col x row
--> (1) [Array(2),Array(1)] // page 2 - 2row
--> (0)[{...},{...}] // 2 col x row
--> (1)[{...}] . // 1col x row
the output is correct, but tslint gives me an error on for loop:
Expected a 'for-of' loop instead of a 'for' loop with this simple
iteration
ps: the rows and columns are customizable
This is how you can convert your loops into for-of loops:
private pages = [];
public grid = [];
public col = 2;
public row = 2;
public indexPage = 0;
private gridSize = this.col * this.row;
private items = [
{
url:'http://url1',
name:'1',
active: false,
},
{
url:'http://url2',
name:'2',
active: false,
},
{
url:'http://url3',
name:'3v',
active: false,
},
{
url:'http://url4',
name:'4v',
active: false,
},
{
url:'http://url5',
name:'5v',
active: false,
},
{
url:'http://url6',
name:'6v',
active: false,
},
{
url:'http://url7',
name:'7v',
active: false,
},
]
ngOnInit() {
if(this.col === 0 || this.row === 0) {
this.grid = this.items;
}else {
for (let item of this.items) {
let itemIndex = this.items.indexOf(item);
let page = this.items.slice(itemIndex , itemIndex+this.gridSize);
this.pages.push(page);
}
for (let iPage of this.pages) {
let pageUrl = [];
let j = 0;
for(let jPage of iPage.length) {
let urls = iPage.slice(j , j+this.col);
pageUrl.push(urls);
j+=this.col;
}
this.grid.push(pageUrl);
}
}
}
Sample diagram:
I want this specific group of nodes to act as radiobutton(only 1 should be checked). I know I can handle this by hard coding conditions but I want to make it expandable in the future(adding more checkbox) by changing its json column 'Group'.
sample data:
[
{ id:"1", text: "Items", expanded: true, List: [
{ id:"2",text: "book" ,group: 1},//group for radiobutton actions
{ id:"3",text: "chair",group: 1 },
{ id:"4",text: "table",group: 1 },
{ id:"5",text: "mat", group: 0 },
{ id:"6",text: "decor", group: 0}
] }
]
I found this jsfiddle exmaple about group attribute for references.
This is the best(I think) way to do this:
1. Declare array of IDs w/c you want to grouped by:
var group = ["2","3","4"]; //in my example above
2. In the check event:
if (group.indexOf(dataItem.ID) > -1) { //if the ID you clicked exists in the group
group.splice(group.indexOf(dataItem.ID), 1); //remove the ID from the group
for (var i = 0, j = treeview.length; i < j; i++) {
for (var x = 0, y = treeview[i].List.length; x < y; x++) {
if (group.indexOf(treeview[i].List[x].ID) > -1) {
treeview[i].List[x].set("checked", false); //uncheck the members of the group
}
}
}
}
HTML CODE:
<div>
<md-button ng-click="getCheckedItems()">TEST</md-button>
</div>
<div kendo-tree-view="tree"
k-data-source="treeData"
k-on-change="selectedItem = dataItem">
<span k-template>
<md-checkbox !important ng-click='click(dataItem)'>{{ dataItem.text}}</md-checkbox>
</span>
</div>
I want to get the checked items from the treeview and save it as string with ',' between 2 texts using the get function $scope.getCheckedItems = function(){}
Your question is not very clear, but in case if you want to get all the selected checkboxes inside your controller you can do like following.
$scope.getCheckedItems = function () {
var data = $scope.tree.dataSource._data;
for (var i = 0, j = data.length; i < j; i++) {
if (data[i].checked) {
//Item is checked
//You can get the properties using data[i]
console.log(data[i]);
}
}
};
I found out that i need to specify 'items' as child. Here is the working code:
for (var i = 0, j = data.length; i < j; i++) {
for (var x = 0, y = data[i].items.length; x < y; x++)
{
if (data[i].items[x].checked) {
//Item is checked
//You can get the properties using data[i]
console.log(data[i].items[x].text);
}
}
}
Sample data:
dataSource: [
{ text: "foo", expanded: true, items: [
{ text: "bar" }
] },
{ text: "baz", expanded: true, items: [
{ text: "qux" }
] }]
Trying to filter through an array in Angular, and filter out all objects of a certain property
I have an array like this:
[
{
"group":"Group A",
},
{
"group":"Group A",
},
{
"group":"Group B",
},
{
"group":"Group B",
}
{
"group":"Group C",
},
{
"group":"Group C",
}
]
...and I want to write a function to return an array with only Group A and B (not Group C).
So far this is what I have:
function filterStandings() {
for (var i = 0, len = $scope.originalArray.length; i < len; i++) {
$scope.filteredArr = [];
if (originalArray[i].group !== "Group C") {
$scope.filteredStandingsArr.push($scope.originalArray[i]);
}
}
return $scope.filteredArr;
};
Then I when I try to display this array in my view by calling the filterStandings() function, nothing shows up.
Can anyone help?
Array.prototype.filter()
For your use case:
$scope.filteredArr = $scope.originalArray.filter(function(item){
return item.group !== 'Group C'
});
Try this :
$scope.test = function () {
$scope.filteredArr = [];
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.items[i].group != "Group C") {
$scope.filteredArr.push($scope.items[i]);
}
}
return $scope.filteredArr;
};
You have just miss to use the $scope services and initialize your new array (filteredArr) in the for-loop.
You can also use the filter keyword :
JS
$scope.filteredArr = function (item) {
return item.group != "Group C";
};
HTML
<div ng:repeat="item in originalArray| filter: filteredArr ">
{{item}}
</div>
I have a cell template that displays data from an external ui-select. However I only want the cell template to appear if the row(s) is/are selected. Here is my current code:
$scope.gridOptions.columnDefs = [
{ name: 'resourceChannel',
cellTemplate: '<div ng-if="$(\'.ui-grid-row\').hasClass(\'ui-grid-row-selected\')">{{grid.appScope.channel.selected.channel}}</div>'},
];
You could add something like a Row-Selected-Listener and ng-if - check if the current row is in the selection.
I added a Plunkr that demonstrates a possiblity of show/hide cellTemplate.
First you add an ng-click to the ui-grid rowtemplate, f.e. addRowtoSelection().
$templateCache.put('ui-grid/uiGridViewport',
...
"<div ng-repeat=\"(rowRenderIndex, row) in rowContainer.renderedRows track by $index\"" +
"ng-click=\"grid.appScope.addRowtoSelection(row)\"" +
...
);
Then you add that function to your appScope.
all.gridOptions = {
columnDefs: [
{field: 'firstName', cellTemplate: '<div ng-if="grid.appScope.isRowSelected(row.uid)">something</div>'},
{field: 'lastName'},
{field: 'company'},
{field: 'employed'}
],
...,
appScopeProvider : {
addRowtoSelection : function(row) {
var contains = false;
for (var i = 0, len = all.rowsSelectedIds.length; i < len; i++) {
if(all.rowsSelectedIds[i] === row.uid) {
all.rowsSelectedIds.splice(i, 1);
contains = true;
}
}
if(!contains) {
all.rowsSelectedIds.push(row.uid);
}
},
isRowSelected : function(id) {
for (var i = 0, len = all.rowsSelectedIds.length; i < len; i++) {
if(all.rowsSelectedIds[i] === id) {
return true;
}
}
return false;
},
},
I also added a check for already selected row-IDs so you add/remove on click. In ColumnDefs you can see the reference to the isRowSelected() check, where you pass in the row.uid. That parses the current array and returns true or false.