Develop Reference

Javascript copy text with Gravity View tables?

I am using the following script to copy text:
function copyToClipBoards() {
var content = document.getElementById('oldone');
content.select();
document.execCommand('copy');
alert("Copied!");
}
The script works. Here's the problem... I am using a plugin called GravityView to show the information. They have a table with each row. The text box is filling in correctly under each row BUT the copy text action is only copying the first box and not the box I'm currently selecting. Is there any way to edit this code differently?
Example: https://barrelrace.com/0new-prod-dash/
Look at the first table of "Upcoming Races".

Assuming your table has an id of oldone you could try:
var content = document.getElementById("oldone");
for (var i = 0; i < content.rows.length; i++) {
for (var j = 0; j < content.rows[i].cells.length; j++)
content.rows[i].cells[j].onclick = function () {
getval(this);
};
}
function getval(cell_text) {
navigator.clipboard.writeText(cell_text.innerHTML);
alert("Copied");
}
Here's a codepen example: https://codepen.io/rochekaid/pen/rNzoPNJ?editors=1010

Saving state of expanded child rows in datatable after reload div

My application is working with database and when data in DB changes, my page is reloading. To show data I used bootstrap datatable. My datatable always has one child, hidden column and I want to save expanded state before refreshing page. I did it but I have 2 problems:
When I am expanding rows after reload, child rows has also expanded icon like parent-rows
expanded-row icon doesn't change
Here is a example what I want and what I get.
I was trying dynamically change tr class but it didn't work or just I was making it wrong.
My js code:
<script type="text/javascript">
function refreshtable() {
var openRows = [];
var table = $('#table').DataTable();
table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
var tr = rowIdx;
var row = table.row(tr);
if (row.child.isShown()) {
openRows.push(rowIdx);
}
})
$('#tablediv').hide();
$('#load').show();
$("#tablediv").load("mainrf.jsp");
setTimeout(function(){
var table = $('#table').DataTable();
var arrayLength = openRows.length;
var roww;
for (var i = 0; i < arrayLength; i++) {
roww = table.row(openRows[i]);
roww.child(format(roww.data())).show();
}
}, 500);
}
function format(value) {
var temprow = value.toString();
var pieces = temprow.split(/[\s,]+/);
var piece = pieces[pieces.length-1];
return '<table><tbody><tr><td>Comments: ' + piece + '</td></tr><tbody></table>';
}
</script>

I did it, by changing for loop. Now I am just triggering expand button click.
for (var i = 0; i < arrayLength; i++) {
$( 'td:first-child', table.row( openRows[i]).node() ).trigger( 'click' );
}

How to set empty data text in a groupable kendo grid?

I am having a groupable kendo grid.
Please help me out with setting some custom text whenever the grid is empty.
If grid is not groupable i could acheive it using databound funtion.

Here's a version I adapted from KendoGridBinderEx as I wanted a function on databound that could handle not only empty but error cases too. I've modified it back to mostly suit what you're struggling with. When my datasource has errors I'll read them out of the event that I pass into the function itself, thus why you see 'e' referenced as a parameter but not used.
function DisplayNoResultsFound(evt) {
var grid = evt.sender.element;
//Only do this if you can properly find the grid
if (grid.data("kendoGrid") == undefined) {
return;
}
// Get the number of Columns in the grid
var dataSource = grid.data("kendoGrid").dataSource;
var colCount = grid.find('.k-grid-header colgroup > col').length;
//Check for an empty datasource
if (dataSource._view.length == 0) {
//Clear the grid
//you may or may not need this depending on how your datasource returns
grid.find('.k-grid-content tbody').empty();
//Add the no result row
grid.find('.k-grid-content tbody')
.append('<tr class="kendo-data-row"><td colspan="' + colCount + '" style="text-align:center" class="k-state-error"><b>No Results Found</b></td></tr>');
}
// Get visible row count
var rowCount = grid.find('.k-grid-content tbody tr').length;
// If the row count is less that the page size add in the number of missing rows
if (rowCount < dataSource._take) {
var addRows = dataSource._take - rowCount;
for (var i = 0; i < addRows; i++) {
grid.find('.k-grid-content tbody').append('<tr class="kendo-data-row"><td> </td></tr>');
}
}
}
EDIT: Here's a JSFiddle example

Get table cell value on first rowclick in javascript

I am trying to get a value of a cell in a html table within JavaScript. I can do this when the row is clicked twice or when I click on a row and then another row but I need to get the cell value on first click
This is my code so far
var table = document.getElementById('ContentPlaceHolder1_htmltable');
if (table != null) {
for (var i = 0; i < table.rows.length; i++) {
for (var j = 0; j < table.rows[i].cells.length; j++)
table.rows[i].cells[j].onclick = function () {
cellvalue = this.innerHTML;
};
}
}
This runs on an onclick event on the ASPxListBox object from devexpress I am using.
Note: I can't use third party libraries like jQuery for this.
Thanks

The jsfiddle code posted by arcade Gandalf above does work, however, to fix my problem of getting the cell value on first click, the code needs to run when the page load is complete
window.onload = getCellValueOfTable;
function getCellValueOfTable {
jsFiddle code or my code posted above...
}
Then in the onclick event for the listbox or a table as I described in the question, just call the above function and that is all.

Hide table column ondblclick

I have a table and I want to hide a column when I double click a column.
Code for hiding a column is practically all around Stack Overflow. All I need is a hint on how/where to add the ondblclick event so I can retrieve the identity of a <td> within a <table>.

Here are two solutions that should work. One done with jQuery and one with only standard Javascript.
http://jsfiddle.net/GNFN2/2/
// Iterate over each table, row and cell, and bind a click handler
// to each one, keeping track of which column each table cell was in.
var tables = document.getElementsByTagName('table');
for (var i = 0; i < tables.length; i++) {
var rows = tables[i].getElementsByTagName('tr');
for (var j = 0; j < rows.length; j++) {
var cells = rows[j].getElementsByTagName('td');
for (var k = 0; k < cells.length; k++) {
// Bind our handler, capturing the list of rows and colum.
cells[k].ondblclick = column_hide_handler(rows, k);
}
}
}
// Get a click handler function, keeping track of all rows and
// the column that this function should hide.
function column_hide_handler(rows, col) {
return function(e) {
// When the handler is triggered, hide the given column
// in each of the rows that were found previously.
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].getElementsByTagName('td');
if (cells[col]) {
cells[col].style.display = 'none';
}
}
}
}
With jQuery it is much cleaner. This method also uses event bubbling, so you don't need to bind an event handler to each table cell individually.
http://jsfiddle.net/YCKZv/4/
// Bind a general click handler to the table that will trigger
// for all table cells that are clicked on.
$('table').on('dblclick', 'td', function() {
// Find the row that was clicked.
var col = $(this).closest('tr').children('td').index(this);
if (col !== -1) {
// Go through each row of the table and hide the clicked column.
$(this).closest('table').find('tr').each(function() {
$(this).find('td').eq(col).hide();
});
}
});

You can do this way:
<td ondblclick="this.style.display = 'none';">Some Stuff</td>
Here this refers to current td clicked.
Working Example
To go unobtrusive, you can do that easily using jQuery if you want:
$('#tableID td').dblclick(function(){
$(this).hide();
});

Due to lack of answears I came up with a workaround, which is a big ugly, but it works fine.
On the window load event I decided to iterate the table and set each 's onclick event to call my show_hide_column function with the column parameter set from the iteration.
window.onload = function () {
var headers = document.getElementsByTagName('th');
for (index in headers) {
headers[index].onclick = function (e) {
show_hide_column(index, false)
}
}
}
show_hide_column is a function that can be easily googled and the code is here:
function show_hide_column(col_no, do_show) {
var stl;
if (do_show) stl = 'table-cell'
else stl = 'none';
var tbl = document.getElementById('table_id');
var rows = tbl.getElementsByTagName('tr');
var headers = tbl.getElementsByTagName('th');
headers[col_no].style.display=stl;
for (var row=1; row<rows.length; row++) {
var cels = rows[row].getElementsByTagName('td')
cels[col_no].style.display=stl;
}
}
Note: my html only had one table so the code also assumes this. If you have more table you should tinker with it a little. Also it assumes the table has table headers ();
Also I noted this to be an ugly approach as I was expecting to be able to extract the index of a table cell from the table without having to iterate it on load.