Am trying to pass selected row value from one component to another on the button click. but in this, example, from where can get selected row values and pass the selected value on button click? followed by that routing will happen
this.selection.selected returns the same object multiple time. how to stop that.
i want to pass the value like
<button (click)='onSelect(row)'>select row </button>
onSelect(id){
this.selectedRowValue = id
//some logics
}
could someone tell me how to pass the selected row value from one component to another?
If you add this code in your component, selectedElements object changes with every selection change event
selectedElements: PeriodicElement[] = [];
constructor(){
this.selection.changed.asObservable().subscribe(a => this.selectedElements = [...this.selection.selected]);
}
Related
I want to delete textfield on a specific row inside a table whenever the specific row delete button is clicked, currently I am able to add text field onclick of add button and I'm able to delete the textField onclick of remove button but whenever the remove button is clicked all the textfields are getting deleted instead of the specific textfield Also the add icon needs to be next to the last text field but currently I could only achieve it having it on the 1st text field. Please someone help me out here. Image of what i have achieved so far.
As you can see I'm trying to delete textfields on 1st row ,but it is automatically deleting textfields in every row of table.
Working codesandbox: https://codesandbox.io/s/heuristic-fermat-63ixw?file=/src/App.js
Can someone please helpme out
Issue
You are adding multiple custom rows all with the same rowId, so when you filter them you are removing more than you want.
You also incorrectly compare a newRow.rowId against this.state.customRow.rowId which is of course undefined since it's an array, and update your state to nest customRow into another array.
handlingDeleteRow = (index, newRow) => {
let newdel = this.state.customRow.filter(
(newRow) => newRow.rowId !== this.state.customRow.rowId // <-- incorrect comparison
);
this.setState({
customRow: [newdel] // <-- nest array in array
});
console.log(this.state.customRow);
};
Solution
I suggest adding a guid to your added custom rows and matching on that.
import { v4 as uuidV4 } from 'uuid';
...
addCustomFile = (index) => {
this.setState({
resError: null,
customRow: [
...this.state.customRow,
{ rowId: index, fileData: false, fileName: false, guid: uuidV4() }
]
});
};
When deleting use the new guid property.
handlingDeleteRow = (index, newRow) => {
let newdel = this.state.customRow.filter(
(row) => row.guid !== newRow.guid
);
this.setState({
customRow: newdel
});
};
Demo
I read your code, and it is working fine.
One thing you would like to add is the index of text inputs in a single row.
Problem
Currently, if user presses + button three times, addCustomFile will add three elements to state.customRow. However, three of these elements are identical, and there is nothing to distinguished from each other.
That is why the filter function (which is executed when X button is pressed) will remove all the elements inside state.customRow that belongs to same row.
Solution
I suggest you to add a new attribute to elements of state.customRow to distinguish added inputs of a same row. For example, it could be insideRowIndex and each added input can have incrementing integer (0,1,2,3,4 ...).
Checking insideRowIndex inside the filter function will let you to only remove the input you intend to, not all the others that belong to same function.
I'm using ag-grid in an AngularJS 1.6 project. In this specific case I have a table via ag-grid and select a single row via click ( no multirow-selection possible). I want to to some stuff with this rowdata (which does not matter here) and via button I want to preselect the next row after this one. I did this via
component:
// ag-grid event-hook
function onSelectionChanged() {
ctrl.selectedItem = ctrl.gridOptions.api.getSelectedRows()[0];
ctrl.selectedRowIndex = ctrl.gridOptions.api.getSelectedNodes()[0].rowIndex;
$scope.$apply();
doOtherStuff();
}
[...]
// function on button via ng-click
function selectNextItemInTable() {
agGridService.selectGridRow(ctrl.gridOptions, ctrl.selectedRowIndex + 1);
}
[...]
agGridService:
function selectGridRow(gridOptions, index) {
if(!gridOptions || !gridOptions.api) {
return;
}
var rowNode = gridOptions.api.getDisplayedRowAtIndex(index);
if(rowNode) {
rowNode.setSelected(true);
}
}
It works if the selected item is not the last one on a table page, but if it is the last, it unfortunately does not preselect the first item on the next page but instead no row at all. How can I do that?
/Edit: I just noticed that it DOES select the next row in the list, it just does not change the page! If I change it manually I can see that the next row is selected... So The only thing I need is a check if I have to change the page via api...
you can use gridOptions.api.getLastDisplayedRow().
This will give you the last rowID visible on the current page. lets say if pagination is of size 10 and we are on 1st page then this option will return 9(array index logic). check this number with your current selected row, if this number is equal to your current selected row then you can call gridOptions.api.paginationGoToNextPage();
you can use below condition to check if you are on the last page or not.
gridOptions.api.paginationGetCurrentPage() < gridOptions.api.paginationGetTotalPages()
hope this helps, let me know if you need more help.
I am making a map using leaflet where on click, the values stored in the geojson properties populate textareas in a sidebar. I will use these values to construct an URL that will hit an API. My intention is that the user can click any three box where class = "selected" and get back info on the map based his or her selection. But I am unable to clear the previous variable that was stored in groupSelected with the new one clicked.
//This grabs the geojson values and stores into the textarea tags in the sidebar
function checkInfo(e) {
var properties = e.target.feature.properties;
$("#nabe-name").html(properties.Name)
$("#top-group").html(properties.largest)
$("#second-group").html(properties.second)
$("#third-group").html(properties.third)
};
//This is where I am stuck:
$(".selected").on("click" ,function(e) {
nabe = $("#nabe-name").val();
var groupSelected= $(".selected").val();
}
<textarea id="nabe-name">Neighborhood</textarea>
<textarea class ="selected" id="top-group">Top</textarea>
<textarea class ="selected" id="second-group">Second</textarea>
<textarea class ="selected" id="third-group">Third</textarea>
I need groupSelected variable to change everytime I click into a different textarea. I have to consider how I close my functions since I need the two variables available to the AJAX request.
Please help. If not obvious, I am new to JS.
Thx
You are always getting the value of the first .selected element. Access the clicked element with this keyword from inside the click event handler.
var groupSelected= $(this).val();
I think groupSelected should be a global variable to hold the previous value and will be changed for the next click .I mean instead of creating in the click as var groupSelected it should be out side of the click listener
Single Row Selections requirement:
My current gridview selects the row just on click on the row. Thus, if the user click 2nd row and then 3rd row, its just not the recent (3rd) row but also the 2nd row is shown as selected. Now the requirement is, when the user selects the 2nd row, and then click on 3rd row, only the 3rd row should be selected and not the 2nd row.
Multi Row Selection requirement:
Also, the user should be allowed to select multiple rows by clicking on "CTRL" key together with the left mouse click on the rows.
How to achieve this using JAVASCRIPT? I am new to Javascript and or Gridview stuffs. Could someone please help me with this code please?
Please remember, our application is based on 2.0
create global JS variable says , var rows_clicked = [].
Use following link to check how to detect CTRL + CLICK. We will use that in later step. - How to detect control+click in Javascript from an onclick div attribute?
Use this code to bind gridview row click event.
$('#<%=gvw.ClientID%> tr[id]').click(function() {
// row click handler , gridview id = gvw -- assumption
// check if it is clicked earlier using IsClicked()
// if clicked 1st time, then call OnRowClick, else OnRowDeselect
$(this).css("color","red");// set some css to look like selected.
});
function OnRowClick()
{
// detect if ctrl+clicked, then save that row's datakey to global
// if it is that, then
rows_clicked.push(datakey);
// and set clicked = true.
$(this).attr("clicked",true);
}
4.
function OnRowDeselect()
{
// remove that datakey from `rows_clicked`
}
5.
function IsClicked(element)
{
if($(element).attr("clicked")) // clicked is an attr to check if row clicked 1st time or deselected
return true;
else
return false;
}
Use this rows_clicked and set in hiddenfiled, and postback that to get selected rows in server side code.
Although this may sound dead simple, the matter is complicated by the fact I can only use the change() trigger on the select element. I am using the 'Chosen' jQuery plugin which basically modifies the multi select box on the page.
Whenever a item is selected or unselected, the plugin triggers the change event on the original select element. I am obviously able to get all the unselected items, but I need the one that was just unselected that caused the change event to trigger.
So I have the following function, the bit in the middle is what I need to capture the item that was just unselected. #cho is the id of the original select element.
$("#cho").chosen().change( function() {
// Need code here to capture what item was just unselected, if any...
})
Store value when the user changes the the check box.
var preVal;
$("input[name='g']").on("change",function(e){
if(preVal){
alert(preVal);
}
preVal=$(this).val();
});
Check this http://jsfiddle.net/fcpfm/
1.Use hidden field
2.Hidden field value initially empty.
3.Onchange put the selected value in a hidden field.
4.If onchange is happening again , hidden field value is the previously selected value.
$("#cho").chosen().change( function() {
var hidvalue = $('#hiddenfield').val();
if (hidvalue ) {
//Get the previously selected ids
var prev_ids = $('#hiddenfield').val();
//Then Update currently selected ids
$('#hiddenfield').val('currently selected ids');
} else {
//Update currently selected ids
$('#hiddenfield').val('currently selected ids');
}
})
Try using a variable to store the selected item. Update it each time when item changed. I cant add comment. That is why I am posting it as an answer.