Angularjs ng-grid change page but lose selectedItems - javascript

I am new to AngularJS and I started integrating with ng-grid. According to official site http://angular-ui.github.io/ng-grid/, there's a property "selectedItems" that you can set your list of selected items in current scope
selectedItems:$scope.mySelectedItems
I have no problem of getting selected list items in the current $scope.gridOptions. HOWEVER, I have no idea what to do when I change the page(FOr example using self-defined pagination) or when I need to reload the current gridOptions (for example user launched a new search creteria). Where I should re-initialize selectedItems?
I thought of 2 solutions but they wont work:
1.make a whole list of server data and do pagination on client side. It will remain selectedItems and show them correctly on the screen when I change pages. But when user launch a new search, I re-init selectedItems = [] in search Method. Unfortunately, when I select again in grid, selectedItems will always remains empty.
2.It's much pratical let server do pagination. In this case, how can I remember selectedItems and show them correctly on screen? Server-side paging exemple of Ng-grid has a bug when you change pages: it keeps selectedItems in $scope but lose them on UI. In this case, where I can init selectedItems?

got the solution:
https://github.com/angular-ui/ng-grid/pull/209
bascially specify the primaryKey column of gridOptions
$scope.gridOptions.primaryKey = 'FileRowNo';
and everything would work

Related

Servoy - Getting all data from db table to display as list

I am relatively new to Servoy and Javascript so that might be why i can't get this to work but here goes:
I am trying to get a label to display all of the data from a specific column from my database table in a list.
I tried to add a dataProvider but that adds only one record per page.
I need the items to be listed below each other so it makes it easier for me to see.
I have also tried adding:
function firstName(){
foundset.loadAllRecords();
return;
}
and setting it as an onRender to see if that displays everything
Thanks in advance
If you look for the answer then here it is:
Use a label and set the text of the label to
%%list_display%%
Set your form layout to Tableview
The answer for above was using Servoy Developer and PostgresSQl

AngularJS edit and save values inside ng-repeat

I'm working on my first angular app and i dont know the best way to handle this problem.
I have a long hierarchical json becouse the tables of the database are like a pyramid, looks similar to this:
I have the view represented pretty well using ng-repeat, I want to be able to edit the last rows of the last table which correspond with last level of JSON.
To do this I have implemented a edit modal that works fine, it saves and updates the database perfectly, the problem is that to see the updated value i have to refresh the page losing scroll position and collapsing accordions which is very bad.
Images of accordions:
When i click edit icon a promise stores in $scope.objEdit = {}; the object and launches the modal, which is linked to this object by ng-model.
So I think that the next step is that when modal is closed, i have to override the old object placed in the $scope variable that contains the entire json for the edited one, but im not sure how to do it.
I would appreciate your help to learn the standard way to do this, thx mates.
I Just solved it, I used a similar procedure to the oen that #AnikIslamAbhi sugested, in the fiddle that #Harshad shared in the comments is solved, but i have a much more dificult json to handle, i had to go with things like those to get the index of all levels of the json:
$scope.positionEvaluacion = $scope.dataEvaluacion.indexOf(args.levelOne);
$scope.positionAsignaturaevaluacion = $scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion.indexOf(args.levelTwo);
$scope.positionTarea = $scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion[$scope.positionAsignaturaevaluacion].tarea.indexOf(args.levelThree);
And after this override this object with the edited one:
$scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion[$scope.positionAsignaturaevaluacion].tarea[$scope.positionTarea] = $scope.objEdit;
You can try this procedure
Pass the selected object on edit click from UI to Controller.
Clone it and pass that object to modal.
OnModal close pass the modal object back to the UI.
Copy the values of modal object to the previous selected object
Like this
for(var i in modalObj){
selectedObj[i]=modalObj[i];
}

angularjs ui-grid set selectedItems

I'm trying to upgrade from ng-grid to ui-grid and i had no idea how to set the selected items on init.
Short explanation: I'm loading data from a database where some items are marked as shown to normal users and some not. When you open the app as admin the complete list should load an the marked items should be checked in the grid.
In ng-grid i had set the selectedItems property but in ui-grid this doesn't work anymore.
How does this work in the new ui-grid version?
Thanks for your help!
We had a similar problem with a table inside a popup.
We solved by calling selection api upon rendering with the following code:
var onRowsRendered = function(gridApi) {
rowsToSelect.forEach(function(row) {
gridApi.selection.selectRow(row);
}
};
Then inside of onRegisterApi:
gridApi.core.on.rowsRendered($scope, onRowsRendered);
PS: rowsToSelect is supposed to be a subset of row entities (i.e. an array made of some of the element of gridOptions.data)

jqGrid Search UI Not Refreshing/Redrawing

I'm using jqGrid to get back some data. The grid get's rendered with data and when it's loaded I add a filter and reload the grid. This basically removes certain files from the view upon first page load.
I have a checkbox on the page which toggles between two filters (including this data & excluding this data), each time it applies the filter then reloads the grid.
If I click the search button, the search popup displays my filter that I've just added.
If I then close it, change the filter through clicking this checkbox (it changes the data), then open the search popup again, my newly applied and obviously working filter is not displayed, only the previous filter!? No matter how many times I toggle the filter with the check box (which every time works to change the data), the filter in the popup does not change to what the current filter really is. Any ideas please?
I've found the solution...
"use strict";
/*global xmlJsonClass, jQuery, $ */
var rp_ge = {};
$.jgrid.extend({
searchGrid : function (p) {
p = $.extend({
recreateFilter: false,
drag: true,
sField:'searchField',
sValue:'searchString',
sOper: 'searchOper',
sFilter: 'filters',
recreateFilter was being set to false from within the library JS file on every 'reload' of the grid. So every time I added a new filter this was being reset to NOT recreate the filters in the popup.
Setting this to true solved the problem.

How to preserve filters on Kendo Grid refresh

The following command will refresh the grid if I change a property
$('#GridName').data('kendoGrid').refresh()
However I notice that my filtering is ignored. For example I have a status column that changes when the user clicks a button and the template image reload after using the refresh method. However, the current filter status is ignored so the item updates in the grid when it should disappear because of the filter. Is there a way to preserve the filtered items?
Solution:
var filters = $("#GridName").data("kendoGrid").dataSource.filter();
$("#GridName").data("kendoGrid").refresh();
$("#GridName").data("kendoGrid").dataSource.filter(filters);

Categories