What I am trying to accomplish is to allow the user to generate a table on a page, allow user to create new column(s), and for the column names to show up, and be mapped to, the data in the same column.
Currently, I am able to build the table and I have a generated table that maps its column headers to a select box. I have a refresh button on this page, that when clicked, refreshes the select box headers (in case a user creates a new column).
When I refresh the select box, the correct headers drop down, but the data that should be selected along with them are not mapped (I can see this with my console.log statements) This only happens when I create a column.. the column is appended to the table, but when I do something like
$('#dropHeader').change( function() {
firstArray = [];
console.log('First Select Box Changed');
var table = document.getElementById("theTable");
currentValue1 = ($(this).val());
console.log(currentValue1);
var elem1 = $("#theTable td:contains("+ currentValue1 +")");
console.log(elem1);
var index1 = elem1.index('#theTable td');
console.log(index1);
index1+=1;
$("#theTable tr td:nth-child("+ index1 +")").each(function () {
firstArray.push($(this).text());
});
firstArray.shift();
});
This works only for columns that are originally a part of the table.
Something that might help is that the console.log jQuery selector statements that I documented:
Normal selector statement:
[td,prevObject: m.fn.init[1], context: document, selector: "#theTable td:contains(Header 2)"]
Column Added selector statement:
[prevObject: m.fn.init[1], context: document, selector: "#theTable td:contains(New Column↵)"]
I've looked at this one for a while, and the I believe the issue lies within the jQuery selector statement. One thing I notice is the return signal at the end of the jQuery selector statement.
Any help would be greatly appreciated! Thanks!
Related
I have DataVerse form in PowerAppsPortals.
One of the field is LookUp for another Dataverse table.
What I need is to prefilter entity-grid in Lookup based on variable which I get from one of the form fields.
var Pesel is the variable that I need to filter with.
The method tr.remove() works (tr.hide() also works) but because my entity grid is paginated when it found value for example on second page of grid it doesn't automatically move found record to the first page - user has to manually move to exact page on which jquery found row.
My lookup grid contatins 6000 records - after change of parameter PageSize to 6000 it takes forever to load grid and prefilter it.
I beg you to help me, I think I've searched whole internet and can't find solution.
var Pesel - it's the value that I get from form field and want to search for it in grid view.
PeselGrid - it's the value that I've picked up from column in grid view.
What I need is to simply prefilter this grid view with jQuery after user opens it - he fills the correct fields in main form and jQuery prefilters grid view to show for him only found rows (something like using the search field in grid view)
$(document).ready(function(){
$(".entity-grid").on("loaded", function () {
var Pesel = $("#cr94f_pesel").val();
var tBody = $(this).find("tbody");
$(".entity-grid").find("table tbody > tr").each(function () {
var tr = $(this);
var PeselGrid = $(tr).find('td[data-attribute="cr94f_pesel"]').attr("data-value");
if (PeselGrid != Pesel) {
tr.remove();
}
});
I think that I've searched whole internet for the solution
After a lot of search in SO without any particular solution, I am compelled to ask this question.
In Simple words - I want to collapse or hide a specific row using Javascript in ag-grid. I have tried several methods explained in ag-grid documentation and also in SO, but none has worked till now.
All the following methods have been tried and none of the codes worked.
Let rowNode = gridOptions.api.getRowNode(params.value);
Method #1. params.api.getDisplayedRowAtIndex(2).setExpanded(false);
Method #2. params.api.getRowNode(params.value).setExpanded(false);
Method #3. gridOptions.api.setRowNodeExpanded(rowNode,false);
Method #4. gridOptions.api.getRowNode(rowId).style.visibility = "collapse";
I have also tried using plain CSS, like this - Data has disappeared but the white blank row is visible
rowNode.setDataValue('class', 'hidden'); //Where “class” is a field
const gridOptions = {
//Other grid options...
getRowClass: params => {
if (params.data.class === "hidden") {
return 'hidden';
}
},
https://stackblitz.com/edit/js-nvtqhz?file=infoCellRenderer.js
setExpand / setRowNode Expanded only works on collapsible rows, i.e it will collapse an expanded row. it will not hide it.
I edited your stackblitz,
I made a couple of changes to make it work.
Selectable Rows
So, when you click a row, I'm marking it as selected. There is a property on ag-grid rowSelection: 'single' | 'multiple. If you want to hide only one row at a time, use 'single' if you can hide multiple rows use 'multiple'
External filtering
So, ag grid can filters rows if we provide a criteria.It can be a check on any of data property as well. For your problem, I have added a filter that says if any row is selected, remove it from the grid.
Following are the changes
/// method called on clicking the button
function hideRow(params) {
let rowNode = gridOptions.api.getRowNode(params.value); // get the clicked row
rowNode.setSelected(true); //mark as selected
gridOptions.api.onFilterChanged(); // trigger filter change
}
Triggering the filter change will call this method for each row
function doesExternalFilterPass(node) {
return !node.selected; // if row node is selected dont show it on grid.
}
You can access the rows hidden any time using
gridOptions.api.getSelectedRows() //Returns an array of data from the selected rows. OR
gridOptions.api.getSelectedNodes() //Returns an array of the selected nodes.
And, if you want to show a row again, just filter from this above mentioned method and do these steps
rowNode.setSelected(false); //mark as unselected
gridOptions.api.onFilterChanged(); // trigger filter change
This will automatically show the row on grid.
Hope this helps! :)
I am trying to access an individual row from a grid in Kendo UI so that I can run operations on the selected entries in the row. However, my code is not correctly grabbing the row itself and I do not know how to resolve this.
I've tried binding the grid to an event that, when changed, will fire my method in order to grab whichever row was toggled.
const row = arg.sender.element.closest("tr")
const grid = $("#ECUs").getKendoGrid()
const dataItem = grid.dataItem(row)
Results:
I.fn.init [prevObject: I.fn.init(1)]
length: 0
prevObject: I.fn.init [div#ECUs.k-grid.k-widget.k-display-block]
__proto__: w
(Sorry, I apparently don't have enough reputation to post images)
Ideally, I would expect to get a tr object back in the first method, but I'm getting absolutely nothing instead. Does anybody know how to correct this to access the row?
If you have a click event on one of the columns, you can access the table row using some jquery.
function onClickListener(e) {
e.preventDefault();
var row = this.dataItem($(e.currentTarget).closest("tr"));
}
Option 1:
You can use the edit event of a grid to get the currently selected row model.
edit: function(e) { console.log(e.model); }
Here, e.model contains the row data and you can access the particular column value by e.model.columnName.
Option 2: You can get the row model data like below from the other functions.
https://stackoverflow.com/a/56478061/8733214
So I have a table.. It's in jade templating format so i've not created a jsfiddle for it.
Anyhow, the user clicks a button within the table and this toggles a class which displays all the information to do with that table.
The user clicks and this code gets executed:
$(function() {
$('.information-button').click(function() {
detailsPopup(this);
});
});
The onclick calls the function below:
function detailsPopup(el) {
// $(el).find("td").each(function(index){
// var bookingData = $(this).html();
// })
array1.indexOf(td [ fromIndex])
console.log($(el));
$(".details--info, .overlay--contain").toggle('600');
}
The problem i'm having, is I need to loop through all the td elements of the booking, grab the index and pass it through the onclick event. So when I toggle the class that displays the information, it only shows the information for that table cell.
Anyone know how I can achieve this? Thanks!
use Index in jquery.
select parent and get index number.
i.e:
$(el).closest('tr').index();
Been looking around and I cant seem to find an answer to this so maybe im wording it wrong but here it goes.
So I have a table displaying data from a database. In jQuery I have made it so a row can be added with empty inputs and then submitted to the database, this works fine.
I am now attempting to be able to edit it. So each row will have a button to edit that row, the button will put the row values into inputs so you can change the value and update the database. How can I do this? I was looking into using this here but Im not sure how I can get the value of the input boxes without them having some sort of ID.
jQuery I was trying to use:
$('#tbl').on('click','.xx',function() {
$(this).siblings().each(
function(){
if ($(this).find('input').length){
$(this).text($(this).find('input').val());
}
else {
var t = $(this).text();
$(this).text('').append($('<input />',{'value' : t}).val(t));
}
});
});
Am I over thinking this? Should I just be grabbing the values and then putting them in pre-made input boxes?
Update:
HTML:
sb.AppendLine("<table style='width: 80%;'>")
sb.AppendLine("<tr class='inputRowbelow'>")
sb.AppendLine("<td style='width: 20%;' class='ui-widget-header ui-corner-all'>Area</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Details</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Options</td>")
sb.AppendLine("</tr>")
For Each w In workItems
sb.AppendLine("<tr>")
sb.AppendLine("<td>" & w.area & "</td>")
sb.AppendLine("<td>" & w.details & "</td>")
sb.AppendLine("<td><a href='#' class='fg-button ui-state-default ui-corner-all edit'><img src='/images/spacer.gif' class='ui-icon ui-icon-pencil' /></a></td>")
sb.AppendLine("</tr>")
Next
sb.AppendLine("</table>")
There are a couple of ways to do this, including changing your VB code to add extra data to the html, but I will answer this from a pure javascript/JQuery solution.
First of all you need to handle the click event for each edit button, after that you find the matching row, and then you can get the first to td elements of that row...
$(".edit").click(function(e){
e.preventDefault();//prevent the link from navigating the page
var button = $(this);//get the button element
var row = button.closest("tr");//get the row that the button belongs to
var cellArea = row.find("td:eq(0)");//get the first cell (area)
var cellDetails = row.find("td:eq(1)");//get the second cell (details)
//now you can change these to your inputs and process who you want
//something like this...
ConvertToInput(cellArea, "area");
ConvertToInput(cellDetails, "details");
});
function ConvertToInput(element, newId){
var input = $("<input/>");//create a new input element
input.attr("id", newId);//set an id so we can find it
var val = element.html();//get the current value of the cell
input.val(val);//set the input value to match the existing cell
element.html(input);//change the cell content to the new input element
}
Here is a working example
From that you can then do the saving that you say you have already implemented, using the ID values of each field to get the values to save.
Instead of using a For Each ... in ... Next loop, use a a For loop with a counter. give each button and each row an ID with the current counter value at the end. You can then use Jquery to make each row editable separately, because each row has a row number now.