I am working with a lightning:treegrid component.
The onrowselection attribute of lightning:treegrid invokes a method on js controller whenever a row is selected/deselected.
I am able to fetch the currently selected rows using the getSelectedRows() method.
But if I deselect a row, I am not able to find its Id or row data (which is deselected) in the js controller.
Aura:
<lightning:treeGrid columns="{!v.gridColumns}"
data="{!v.gridData}"
keyField="idRef"
aura:id="productTree"
expandedRows="{! v.gridExpandedRows }"
onrowselection="{! c.getSelectedRows}"
ontoggle = "{!c.handleToggle}"
selectedRows = "{!v.selectedIds}"
isLoading="{! v.isLoading }"
/>
JS:
getSelectedRows: function(cmp, event, helper) {
//get selected rows
var curRows = event.getParam('selectedRows');
//how to get the row that is deselected
}
Can anyone please help?
There is no standard way on lightning:treegrid component to obtain a list of deselected rows. There are many other limitations on this component which make it practically useless.
I followed these steps to obtain the deselected row:
Create an attribute that stores ids associated with all selected
rows. Let us name this oldSelectedRows.
Then obtain a list of all currently selected rows using
cmp.find("aura_id_of_treegrid").getSelectedRows(). Let us name it
selectedRows.
Find the difference between oldSelectedRows and selectedRows. This fetches you deselected item.
Related
How can I select all records of a django_tables2 table using a CheckBoxColumn when the table is split into several pages?
I have used this select all rows in django_tables2 code to select all records from one page and this How to get information from Django_tables2 row? to do something with them.
But how can I select all records across pagination limits?
And also keep the status of a checkbox when I go back and forth on the pages?
I would suggest to add a 'check all' checkbox to your template. Apart from visually checking all rows of the current page (using JavaScript), it being checked should signal the logic in your view that the user intends to check all rows.
Keeping the status of those checkboxes is another story. It can lead to bookkeeping in some very big lists. You could keep them in request.session if they need to be kept for a user in a particular browser session, if they need to be persisted to the database, you can create a model to keep track of the selection of a certain record for a certain user.
Ok, now I came up with this JavaScript/jQuery solution. It addresses two aspects. First, to store and display the selected checkboxes when the sort order of the table is changed, the table is filtered or when you naviagte to another page and return the table again. Secondly to check and store all checkboxes on a table page when the "Select All" button on in the table head is clicked. Here I'm stuck with selecting all rows in a table, not only the ones that are displayed on one table page (with pagination on). The selected checkboxes are stored in the session storage of the browser. There is certainly room for improvement in the functions, I don't like the iteration over all rows of the table a lot, but I couldn't find a better solution yet.
Still I think it would be nice to have this kind of funtionality available in django-tables2. Maybe in some coming version?
The checkbox column is called "selvars" in my tables.py
class dataset_varsTable(tables.Table):
selvars=tables.CheckBoxColumn(accessor='pk',attrs = { "th__input": {"onclick": "toggle(this)"}}, orderable=False)
... (other table columns)
It's the integer primary key of my model
class vars(models.Model):
idvar=models.IntegerField('Var.ID', primary_key=True)
...
And the JavaScript and jQuery functions in the HTML template with the table
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var storage_name="checkedvars"; // name of session storage
// function to store/remove checked varids in session storage
function update_checkedvars(varid, check_status){
var current_checked=[];
if (sessionStorage.getItem(storage_name)){
current_checked=sessionStorage.getItem(storage_name).split(",");
}
if (isNaN(parseInt(varid))==false && check_status==true){
current_checked.push(varid);
// store checked varid in session storage without duplicates
sessionStorage.setItem(storage_name, Array.from(new Set(current_checked)));
} else if (isNaN(parseInt(varid))==false && check_status==false){
// remove unchecked varid from session storage
sessionStorage.setItem(storage_name, current_checked.filter(e => e !== varid));
}
}
// toggle button
function toggle(source) {
checkboxes = document.getElementsByName('selvars');
for(var i in checkboxes){
checkboxes[i].checked = source.checked;
update_checkedvars(checkboxes[i].value, checkboxes[i].checked);
}
}
$(document).ready( function() {
// display checkboxes according to selected varids in session storage
var current_checked=[];
if (sessionStorage.getItem(storage_name)){
current_checked=sessionStorage.getItem(storage_name).split(",");
checkboxes = document.getElementsByName('selvars');
for(var i in checkboxes){
if(current_checked.includes(checkboxes[i].value)){
checkboxes[i].checked=true;
}
}
}
// save/remove checked/unchecked varid in session storage
$(".selvars").click( function(event) {
var varid=event.target.value
var check_status=event.target.checked
update_checkedvars(varid, check_status);
});
});
</script>
Scenario is quite simple. I have edit view which comprises of select element with multiple selection. Select element looks as follows
<select class="selectpicker" multiple
ng-model="UserBeingEdited.UberTypes"
ng-options="uberType.Id as uberType.Name for uberType in UberTypes"></select>
</div>
If I press edit for specific user then showEditModal function is called and edit pop up shows up. User has his own UberTypes objects selected so I pick theirs Ids and assign to UserBeingEdited.UberTypes.
$scope.UserBeingEdited = { UberTypes: []};
$scope.showEditModal = function (user) {
for (var i = 0; i < user.UberTypes.length; i++) {
$scope.UserBeingEdited.UberTypes.push(user.UberTypes[i].Id);
}
$("#editUserModal").modal("show");
};
Unfortunately they are not selected, no matter what. Suprisingly, if I set values to property UserBeingEdited by the time of declaring then it works, items are selected.
$scope.UserBeingEdited = { UberTypes: [1,2]}; //this works
It seems like angular does not refresh selected items within UI.
EDIT:
I have two items: Uber1 and Uber2. Both items are selected but view does not reflect it. If I open drop down menu and select Uber2 it shows Uber1 selected, apparently Uber2 was selected and another click was treated as unselection. The same happens when I click Uber1 first, Uber2 shows as selected.
As above picture depicts, Uber2 is highlighted since I have just clicked it but it shows Uber1 as selected. Both were selected in User's UberTypes but view just simply does not mark them as selected.
http://jsfiddle.net/upusq8ah/7/
I use bootstrap-select.js for select element and presumably this library causes such an error since without including it, it works fine.
Solution
After a while of struggle, I accidentally ran into below workaround. You need to call refresh on selectPicker and this has to be delayed otherwise it will bring no effect.
setTimeout(function () {
$('.selectpicker').selectpicker('refresh');
}, 100);
$("#editUserModal").modal("show");
I am adding a new item to the available select options in a modal box and updating the server. When I close the modal, i want to see the new added option in the select box and actually selecting it without refreshing the entire page, so just select box needs to be updated. Is this possible?
Page;
<select ng-model="scores" ng-options="score for score in options.scores" />
so on the model box, i add a new value to options.scores
Try wrapping your ng-model in a container object, to prevent any scope hierarchy issues.
ng-model="state.scores"
Where you defined state like:
$scope.state = {};
// then whenever you want to set your scores.
$scope.state.scores = ...
You should read up on angular's scope hierarchy. http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html
I have a column named id in my datagrid. I have set visible:false for the field since I don't want to display the field in the grid.
But then how can I get the value in id? any hope?
I am adding column as
columns.push({'sTitle':'id','visible': 'false'},{'sTitle':'name','visible': 'false'});
And I am retrieving the value in selected row as
this.$view.on("click",function(event){
selectedRow = event.target.parentElement;
var name = selectedRow.cells[0].innerHTML;
}
Here in click event I can't get the value of id as html is not generated for the field with visible:false. So I am searching for a method to access my id field.
You should use display:none property
-Edit:
In order to specify a custom css to your angular datagrid you should also specify the columns. Something like:
$("#gridContainer").dxDataGrid({
// ...
columns: ['CompanyName', 'ContactName', 'City', 'Country']
});
Here's the page I referenced to
Edit2:
Since you're trying to retrieve the value of the field I would recommend you to take a look to this answer
I have a grid on my page that is populated like this:
<tr data-ng-repeat="row in grid.view = (grid.data | filter:isProblemInRange | orderBy:option.problemOrderBy[option.sProblemOrderBy].key:option.sProblemSortDirection) track by row.problemId">
The grid can have up to 500 rows. Once the data is retrieved it's possible for a user to filter the rows which is where the isProblemInRange filter is used. It's also possible for the user to reorder the rows. As can be expected this all takes time.
Is there anything that I could do to make this more efficient?
Could I take all of this code out of my ng-repeat and put in the part that creates the grid.view in my controller?
Note that the isProblemInRange is dynamic. As a user types into a select box then after debouncing the numbers entered are used in the filter to restrict the rows that appear on the screen.
One more thing. The data in the grid changes only when the user clicks on a row and it opens a modal. After a user clicks save on the modal then one single row of the grid.data is changed. Is there something I could do to stop ng-repeat from watching every field on every row and have it just respond after my modal has done a save which is the only time the grid data numbers change.
Every filter is callable fom JavaScript code directly. See http://docs.angularjs.org/api/ng.filter:filter for an example of the usage of the "filter" filter.
So you could indeed call these filters directly from your controller each time the data or the user-defined order and criteria change, which would avoid the unnecessary watches.
var filteredData = $filter('filter')($scope.grid.data, $scope.isProblemInRange);
var orderedFilteredData = $filter('orderBy')(filteredData,
$scope.option.problemOrderBy[option.sProblemOrderBy].key,
$scope.option.sProblemSortDirection);
$scope.orderedFilteredData = orderedFilteredData;
And then in your view, you just need to iterate on the already filtered and ordered data:
<tr data-ng-repeat="row in orderedFilteredData">