I want to get first 4 elements a cell value because I want to use an if statement.
I get cell value like below.
My code sample:
var data = row.data;
if(data.MyStoreDataIndex=='something'){
//TODO
}
But, I want the first 4 elements because cell contents are the same only first 4 elements.
If I get what I want, I change my if statement. I don't want these with selected cell or selected row.
data.MyStoreDataIndex.contains()
this is the solution :)
Related
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! :)
Im writing a small google script for an excel sheet which appends a row on a POST request: depending on the POST parameters I either append the row to the end, or I insert it in between rows.
One of the columns of the is actually a boolean that Im trying to represent as a checkbox.
The problem is when I try to append a row
sheet.appendRow([e.parameter.parameter1, e.parameter.parameter2, "FALSE"]);
It simply writes false in that column.
On the other hand when I insert a row in between other rows:
sheet.insertRows(position);
sheet.getRange("A" + (position)).setValue(e.parameter.parameter1);
sheet.getRange("B" + (position)).setValue(e.parameter.parameter2);
sheet.getRange("C" + (position)).setValue("FALSE");
The checkbox column (takes the format from the surrounding rows?) and becomes a checkbox.
Is there a simple solution to append a row with a column as a checkbox?
Thank you.
You need to create a checkbox first with data validation
Sample:
var checkbox = SpreadsheetApp.newDataValidation().requireCheckbox().build();
sheet.getRange("C" + (position)).setDataValidation(checkbox).setValue("FALSE");
I am trying to do some work with tables and jQuery. Basically, I want to be able to go through an entire column based on its header and look for certain values. If those values are present I want to then delete the entire row. My code so far can select the correct column:
ownerIndex = $('th:contains("Outstanding")').index();
$('table tr td:nth-child('+ownerIndex+')').parent().hide();
From here I am unsure how to do an 'if' statement to look at the values. I am looking for all cells with the value of "0.00".
Thanks in advance.
Loop through each td element you selected using jQuery each function:
$('table tr td:nth-child('+ownerIndex+')').each( function(){
if($(this).html() == "0.00") {
// do your stuff
}
});
I have an HTML table that is filled dynamically and only shows a certain button in the first column if specific conditions are met, otherwise this button does not appear.
The button looks as follows (it always has the name = voidBtn):
<input type="button" name="voidBtn" value="Void" />
How can I check whether the current row contains this button or not ?
I was thinking of something like the following but didn't know how to write this the right way:
if($(this).closest('tr').find('input[name=void]') ...
OR
if($(this).closest('tr').find("td:eq(1):contains('voidBtn')") ...
I just need to know if the current row has such a button as then I want to click on it and do some other stuff.
Your way of checking should be fine, you just need to ask if it found it with length:
if($(this).closest('tr').find('input[name=void]').length > 0){
// there is a button
}
Considering $(this) as current row then you can find button like this...
$(this).find('input[name=voidBtn]')
$( '#'+tableId + "> tbody > tr> td").find('td','searched-string')
Here is the Example where we can find an element inside a row containing searched-string.Here yoy may use other option as my string was coming for input text field.
Let say you want to find all the rows of the table that contains a particular String "STRING" then you may write like this
**$('#tableid > tbody').find('tr','STRING')**
You may also count the number of row by
**$('#tableid > tbody').find('tr','STRING').length**
In Above answer i already declared tableid as Var in my Jquery Code.
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.