I have been searching the internet for answer but I am not having any luck. I would like to know if it is possible to only show Kendo detail rows after 19 rows of data? I have a very odd requirement and I'm not sure it can be done. However if there is a solution out there, is there a small example I can see? Or a resource I have not found yet?
As a note a side note I am using Kendo with AngularJS.
Thank you in advance!
AnthonyFastcar
This may not be the best way to do this but I just hid the detail icon for the rows. I used the dataBound event.
dataSource: yourDataSouce,
dataBound: function(e) {
var grid = this,
grid2 = $('#yourGrid').data('kendoGrid');
grid.tbody.find("tr[role='row']").each(function () {
var index = $(this).index();
if (index < 19) {
$(this).find('.k-i-expand').removeClass('k-i-expand');
}
})
}
Additionally if you are trying to use a column, say an ID column you can do it like the below.
dataSource: yourDataSouce,
dataBound: function(e) {
var grid = this,
grid2 = $('#yourGrid').data('kendoGrid'),
grid.tbody.find("tr[role='row']").each(function () {
var data = grid.dataItem(this);
if (data.yourColumnID < 19) {
$(this).find('.k-i-expand').removeClass('k-i-expand');
}
})
}
I hope this helps anyone else who runs into the same issue.
Related
I have a below grid
The html code is at pastebin.com/GBP3AZNQ
I want to verify whether "test123" is present. I want to traverse through each row of column master obligationname and look for the text test123.
Can anyone guide me how to do this?
You can take the parent class and achieve this as follows:
element.all(by.xpath("//div[#class='ui-grid-cell-contents ng-scope ng-binding']")).getText().then(function (msg)
{
console.log("Grid contains" + msg);
expect(msg).toContain("test123");
}
If suppose the Master_obligation name is test_876
Then
var master_obligation_name= "test_876" ;
Suppose you are filling obligation_name as:
element(by.xpath("path to master_obligation text field")).sendKeys(master_obligation_name);
After creation of the row, validating the newly added row:
var row_check = element(by.xpath("//div[contains(text(),'test_876')]"));
if(row_check.isPresent())
{
row_check.getText().then(function (msg) {
console.log("Grid contains" + msg);
});
}
Happy Learning. :-)
check this code out. it check if the given text is available in the table.
this.searchCourseGrid = function(course){
var row = element.all(by.css('css path to tr'));
var cells = row.all(by.tagName('td'));
var cellTexts = cells.map(function (cell) {
return cell.getText();
}).then(function(cellTexts){
expect(cellTexts).toContain(course);
});
};
Your requirement can be fulfilled by using element.all().each() method of Protractor API. Please follow below code. Put the locator which gives all rows of a particular column in the below code.It will work perfectly.
element.all(by.css('locatorwhichgiveallrows')).each(function(rowElement,
index) {
rowElement.getText().then(function (rowText) {
if(rowText=="test123"){
return true;}
});
}).then(function(isPresent){
console.log("test123 is Present"+isPresent);
});
Hi am using UIgrid in an angularjs project and when I call the method gridApi.selection.getSelectedRows() to get the selected rows it returns an array with all the rows but in a random order. Ideally I want to get the rows in the same order they were selected (as if gridApi.selection.getSelectedRows() is backed by a queue) . Any idea how to achieve this please ?
This link to plunker shows the issue http://plnkr.co/edit/gD4hiEO2vFGXiTlyQCix?p=preview
You can implement the queue by yourself. Something like
$scope.gridOnRegisterApi = function(gridApi) {
gridApi.selection.on.rowSelectionChanged($scope, function(row) {
var selections =gridApi.selection.getSelectedRows();
// add sorted
selections.forEach(function(s){
if ($scope.mySelections.indexOf(s) === -1) {
$scope.mySelections.push(s);
}
});
// remove the ones that are not selected (use for to modify collection while iterating)
for (var i = $scope.mySelections.length; i >0; i--) {
if (selections.indexOf($scope.mySelections[i]) === -1) {
$scope.mySelections.splice(i, 1);
}
}
console.log($scope.mySelections);
row.entity.firstSelection = false;
if (row.isSelected) row.entity.firstSelection = (gridApi.selection.getSelectedCount() == 1);
});
};
I think there is a bug with that version of angular I was using there , if you upgrade the version in the plnkr to 1.6.1 it will behave as expected
How do I reset my ExtJS filters in my grids. More specifically, how do I get the header to honour the changes to the filtering.
ie. This works fine :
grid.store.clearFilter();
But the header rendering is all wrong. I need to get into all the menu objects and unselect the checkboxes.
I am getting pretty lost. I am pretty sure this gives me the filterItems :
var filterItems = grid.filters.filters.items;
And from each of these filter items, i can get to menu items like so :
var menuItems = filter.menu.items;
But that's as far as I can get. I am expecting some kind of checkbox object inside menu items, and then I can uncheck that checkbox, and hopefully the header rendering will then change.
UPDATE :
I now have this code. The grid store has its filter cleared. Next I get the filterItems from grid.filters.filters.items and iterate over them. Then I call a function on each of the menu items.
grid.store.clearFilter();
var filterItems = grid.filters.filters.items;
for (var i = 0; i<filterItems.length; i++){
var filter = filterItems[i];
filter.menu.items.each(function(checkbox) {
if (checkbox.setChecked)
checkbox.setChecked(false, true);
});
}
The checkboxes do get called, but still nothing is happening :(
Try this code:
grid.filters.clearFilters();
This should take care of both the grid and its underlying store.
When you do
grid.store.clearFilter();
it can only clear the filters on the store but the grid's view doesn't get updated with that call. Hence to handle it automatically for both the grid's view as well as the grid's store, just use
grid.filters.clearFilters();
Hope it helps!
Cheers!
Your update help me but you forget the case where you have input text instead of checkbox.
So this is my addition of your solution:
grid.filters.clearFilters();
var filterItems = grid.filters.filters.items;
for (var i = 0; i<filterItems.length; i++){
var filter = filterItems[i];
filter.menu.items.each(function(element) {
if (element.setChecked) {
element.setChecked(false, true);
}
if(typeof element.getValue !== "undefined" && element.getValue() !== "") {
element.setValue("");
}
});
}
When you use grid wiht gridfilters plugin
and inovoke
grid.filters.clearFilters();
it reset applyed filters, but it don't clean value in textfield inside menu.
For clean textfield text you can try this:
grid.filters.clearFilters();
const plugin = grid.getPlugin('gridfilters');
let activeFilter;
if('activeFilterMenuItem' in plugin) {
activeFilter = plugin.activeFilterMenuItem.activeFilter
}
if (activeFilter && activeFilter.type === "string") {
activeFilter.setValue("");
}
Thanks to the answer from "Words Like Jared" at Angularjs + kendo-ui treeview, I got my treeview working and everything was fine. Until - someone wanted to update/filter the treeview based on checkboxes and the like. My problem is that the tree does not update to reflect the change in the datasource made in the controller.
Based on the jsfiddle in the answer mentioned above, I have created one to show my problem.
http://jsfiddle.net/rajeshmathew/LwDs5/
if ($scope.showLimitedRecords) {
$scope.thingsOptions = {dataSource: $scope.things2}
} else {
$scope.thingsOptions = { dataSource: $scope.things1 };
}
Checking the checkbox does not affect the tree.
I am a newbie to AngularJS and angular-kendo, and I am wondering if this kind of an update is even supposed to work. I might be going at this the wrong way. Any help/suggestions are much appreciated.
Thanks!
You could create the data source explicitly and then set the data using its API:
$scope.thingsOptions = {
dataSource: new kendo.data.HierarchicalDataSource({
data: $scope.things1
})
}
$scope.toggleFlag = function () {
if ($scope.showLimitedRecords) {
$scope.thingsOptions.dataSource.data($scope.things2);
} else {
$scope.thingsOptions.dataSource.data($scope.things1);
}
}
(updated demo)
I'm setting the selection of my ngGrid from JavaScript, calling gridOptions.selectItem(). I have multiSelect set to false, so there is only ever one row selected. I'd like the ngGrid to automatically scroll to show the newly selected row, but I don't know how to do this: can anyone help, please?
On a related topic: can I disable row selection by mouse click? If so, how?
Edited to add
I'd also like to disable keyboard navigation of the selected row, if possible.
What worked:
AardVark71's answer worked. I discovered that ngGrid defines a property ngGrid on the gridOptions variable which holds a reference to the grid object itself. The necessary functions are exposed via properties of this object:
$scope.gridOptions.selectItem(itemNumber, true);
$scope.gridOptions.ngGrid.$viewport.scrollTop(Math.max(0, (itemNumber - 6))*$scope.gridOptions.ngGrid.config.rowHeight);
My grid is fixed at 13 rows high, and my logic attempts to make the selected row appear in the middle of the grid.
I'd still like to disable mouse & keyboard changes to the selection, if possible.
What also worked:
This is probably closer to the 'Angular Way' and achieves the same end:
// This $watch scrolls the ngGrid to show a newly-selected row as close to the middle row as possible
$scope.$watch('gridOptions.ngGrid.config.selectedItems', function (newValue, oldValue, scope) {
if (newValue != oldValue && newValue.length > 0) {
var rowIndex = scope.gridOptions.ngGrid.data.indexOf(newValue[0]);
scope.gridOptions.ngGrid.$viewport.scrollTop(Math.max(0, (rowIndex - 6))*scope.gridOptions.ngGrid.config.rowHeight);
}
}, true);
although the effect when a row is selected by clicking on it can be a bit disconcerting.
It sounds like you can make use of the scrollTop method for the scrolling.
See also http://github.com/angular-ui/ng-grid/issues/183 and the following plunker from #bryan-watts http://plnkr.co/edit/oyIlX9?p=preview
An example how this could work would be as follows:
function focusRow(rowToSelect) {
$scope.gridOptions.selectItem(rowToSelect, true);
var grid = $scope.gridOptions.ngGrid;
grid.$viewport.scrollTop(grid.rowMap[rowToSelect] * grid.config.rowHeight);
}
edit:
For the second part of your question "disabling the mouse and keyboard events of the selected rows" it might be best to start a new Question. Sounds like you want to set your enableRowSelection dynamically to false? No idea if that's possible.
I believe I was looking for the same behavior from ng-grid as yourself. The following function added to your gridOptions object will both disallow selection via the arrow keys (but allow it if shift or ctrl is held down) and scroll the window when moving down the list using the arrow keys so that the currently selected row is always visible:
beforeSelectionChange: function(rowItem, event){
if(!event.ctrlKey && !event.shiftKey && event.type != 'click'){
var grid = $scope.gridOptions.ngGrid;
grid.$viewport.scrollTop(rowItem.offsetTop - (grid.config.rowHeight * 2));
angular.forEach($scope.myData, function(data, index){
$scope.gridOptions.selectRow(index, false);
});
}
return true;
},
edit: here is a plunkr:
http://plnkr.co/edit/xsY6W9u7meZsTJn4p1to?p=preview
Hope that helps!
I found the accepted answer above is not working with the latest version of ui-grid (v4.0.4 - 2017-04-04).
Here is the code I use:
$scope.gridApi.core.scrollTo(vm.gridOptions.data[indexToSelect]);
In gripOptions, you need to register the gridApi in onRegisterApi.
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
},
var grid = $scope.gridOptions.ngGrid;
var aggRowOffsetTop = 0;
var containerHeight = $(".gridStyle").height() - 40;
angular.forEach(grid.rowFactory.parsedData, function(row) {
if(row.entity.isAggRow) {
aggRowOffsetTop = row.offsetTop;
}
if(row.entity.id == $scope.selectedId) {
if((row.offsetTop - aggRowOffsetTop) < containerHeight) {
grid.$viewport.scrollTop(aggRowOffsetTop);
} else {
grid.$viewport.scrollTop(row.offsetTop);
}
}
});