JavaScript Table.Rowd Collection Undefined - javascript

I'm trying to insert a row into a table by cloning a row and replace it's values from a model. I'm open to doing this some other way. I'm very new to JavaScript and this code is from an example I found.
function createNewRow(model)
{
// Make a copy of the first row
var table = document.getElementById('divData');
var new_row = table.rows[1].cloneNode(true); // <====== Error occurs here. The Table exists, the rows collection does not.
var len = table.rows.length;
new_row.cells[0].innerHTML = len;
// Copy the model's data to the new row
new_row.cells[1].value = model.SiteId;
new_row.cells[2].value = model.InstrumentId;
new_row.cells[3].value = model.TowerLocation;
new_row.cells[4].value = model.BayLocation;
new_row.cells[5].value = model.BaySerialNo;
new_row.cells[6].value = model.BayStatus;
new_row.cells[7].value = model.AccessionId;
new_row.cells[8].value = model.Result;
new_row.cells[9].value = model.AssayName;
new_row.cells[10].value = model.Started;
new_row.cells[11].value = model.Completed;
new_row.cells[12].value = model.TestSummary;
// Add the new row to the table
table.appendChild(new_row);
}
[UPDATE] - Added table code
#using (#Html.BeginForm("Index", "Home"))
{
<div id="divData">
#{
var grid = new WebGrid(Model, rowsPerPage: 10, ajaxUpdateContainerId: "divData", canPage: true);
#grid.GetHtml(
tableStyle: "webgrid-table",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
mode: WebGridPagerModes.All,
columns:
grid.Columns
(
grid.Column(columnName: "RowId", header: "Row Id", format: #<text><span data-row-id="#item.RowId">#item.RowId</span></text>),
grid.Column(columnName: "SiteId", header: "Site Id", format: #<text><span class="x-SiteId">#item.SiteId</span></text>),
))
}
</div>
}
The table does exist, and there are rows in the table, yet on the line I indicated above I get "Cannot read property '1' of undefined"
When I do console.log(table.Rows) I get 'undefined'.
Anyone see what's wrong?
Thank you

Related

How to differentiate between buttons in R/Shiny reactable javascript callback?

Take this example from the reactable documentation (interactive Shiny example provided at link):
data <- cbind(
MASS::Cars93[1:5, c("Manufacturer", "Model", "Type", "Price")],
details = NA
)
reactable(
data,
columns = list(
# Render a "show details" button in the last column of the table.
# This button won't do anything by itself, but will trigger the custom
# click action on the column.
details = colDef(
name = "",
sortable = FALSE,
cell = function() htmltools::tags$button("Show details")
)
),
onClick = JS("function(rowInfo, colInfo) {
// Only handle click events on the 'details' column
if (colInfo.id !== 'details') {
return
}
// Display an alert dialog with details for the row
window.alert('Details for row ' + rowInfo.index + ':\\n' + JSON.stringify(rowInfo.row, null, 2))
// Send the click event to Shiny, which will be available in input$show_details
// Note that the row index starts at 0 in JavaScript, so we add 1
if (window.Shiny) {
Shiny.setInputValue('show_details', { index: rowInfo.index + 1 }, { priority: 'event' })
}
}")
)
I want to include 2 buttons per details column cell, which I can do by changing the cell definition to:
cell = function() {
a <- htmltools::tags$button("Approve")
b <- htmltools::tags$button("Decline")
return(list(a,b))
}
But then how to differentiate between the Approve/Decline button within the JS() onClick() function? Is there another parameter I can pass that will give me this ability? I console.log'd both rowInfo and colInfo and could not find anything that seemed helpful to identify the two buttons. I'd like to have it so that I can return both:
Shiny.setInputValue('approve_button_click', ...)
and
Shiny.setInputValue('decline_button_click',...)
from the JS side so I can handle them separately in R. Any help is appreciated!
If you want to get just the row index you can do:
library(htmltools)
details = colDef(
name = "",
sortable = FALSE,
cell = function(value, rowIndex, colName){
as.character(tags$div(
tags$button("Approve", onclick=sprintf('alert("approve - %d")', rowIndex)),
tags$button("Decline", onclick=sprintf('alert("decline - %d")', rowIndex))
))
},
html = TRUE
)
In Shiny:
reactable(
data,
columns = list(
details = colDef(
name = "",
sortable = FALSE,
cell = function(value, rowIndex, colName){
as.character(tags$div(
tags$button(
"Approve",
onclick =
sprintf(
'Shiny.setInputValue("approve", %d, {priority: "event"})',
rowIndex
)
),
tags$button(
"Decline",
onclick =
sprintf(
'Shiny.setInputValue("decline", %d, {priority: "event"})',
rowIndex
)
)
))
},
html = TRUE
)
)
)

Buttons in the first column disappear when sorting the table

I have a datatable that shows mock json data retrieved from a text file. I have removed the first column as it contains the id and it isn't ideal to display the id on the table. I appended a buy button on each row on the first column only. However, when I sort the table the button disappears and the original first column data also appears.
JavScript:
$(document).ready(function() {
$.getJSON('/apps/mchp/clientlibs/clientlib-site/components/parametrictable/data.txt', function(json) {
var data = json.data;
var $thead = $('#parametrictable').find('thead');
var tr = $("<tr>");
$thead.append(tr);
var columns = [];
var obj = Object.keys(data[0]);
console.log(data[0])
var button = '<div class="left-btn"><i class="download fas fa-file-download"></i></div><div class="right-btn"><div class="input-group"><div class="input-group-area"><input type="text" value="100"></div><div class="input-group-icon">BUY</div></div></div>';
$.each(data[0], function(name, value) {
var column = {
"data": name,
"title":name
};
$('tr').find('th:first-child',).remove();
columns.push(column);
});
for (i=1; i<obj.length; i++) {
$(".dropdown-content").append('<li><input type="checkbox" class="dropcheck" data-column="'+i+'"/>'+obj[i]+'</li>');
}
var table= $('#tableId').DataTable({
data: data,
columns: columns,
columnDefs: [ {
orderable: true,
className: 'select-checkbox',
targets: 1
} ],
select: {
style: 'multi',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]]
});
$('tr').find('th:first-child').remove();
$('tr').find('td:first-child').remove();
$('tr').find('td:first-child').append(button);
$('tr').on('change', function(e){
e.preventDefault();
console.log('change!');
});
$('input[type=checkbox]').on( 'change', function (e) {
e.preventDefault();
var column = table.column( $(this).attr('data-column') );
column.visible( ! column.visible() );
} );
$('.show-all').on( 'click', function (e) {
e.preventDefault();
var obj = Object.keys(data[0])
for (i=1; i<obj.length; i++) {
var col = table.columns([i]);
if (col.visible().join(', ') == 'false') {
col.visible(true);
$(".dropcheck").prop("checked", false);
}
}
} );
});
})
First, it is not a good practice to hide datatable columns by .remove(), datatables have a built-in code for that by columnDefs refer:
https://datatables.net/examples/basic_init/hidden_columns.html
Second, that is not the right way to append data/html in datatable columns, use rowCallback function for datatable, see:
columnDefs: [
{
"targets": [ 0 ],
"visible": false,
"searchable": false
},
],
rowCallback: function(row, data, index) {
if($('td:eq(1)', row).find('.download').length == 0)
{
$('td:eq(1)', row).append(button);
}
},
When using datatable sort or search or any datatable actions it always refreshes the table therefore, any initialization before the action will be disregarded unless executed again.

Highchart data each row on gridview to display different data on button click open modal

I have a gridview in ASP.NET with a asp:templatefield containing a button for each row. On the button I have a data-target attribute which is a modal.
On gridview row bound I am getting the ID of the row and calling the method SerializedBoxChart() which puts in the ID of the row and retrieves the data. However, it looks like it loops through each row and i end up with the last row's data on each row of the gridview. When i click on the button it opens the modal with the final row data. I am trying to assign the data for each row depending on the measureID and when you click on the button it opens up with that rows data.
I have a feeling its to do with conflicting IDs on the container when highcharts javascript is running the script and placing it in the div but dont know how to fix this.
<asp:TemplateField HeaderText="AvgDaysTaken" SortExpression="AvgDaysTaken">
<ItemTemplate>
<asp:Button type="button" runat="server" id="AvgDaysTaken" class="btn btn-primary" data-toggle="modal" data-target="#myBoxPlot" Text='<%# Eval("AvgDaysTaken") %>' />
</ItemTemplate>
</asp:TemplateField>
Modal code which contains a div with ID container where the graph will be placed
<div class="container">
<!-- Modal -->
<div class="modal fade" id="myBoxPlot" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div id="container" >
</div>
</div>
<div class="modal-footer">
<button type="button" id="close" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Get the data for the box plot using c#
public void SerializedBoxChart(int measureid)
{
string connectionstring = ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;
SqlConnection cn = new SqlConnection(connectionstring);
SqlCommand cmd = new SqlCommand("[dbo].so", cn);
cmd.Parameters.AddWithValue("#SubTeamNo", SubTeam);
cmd.Parameters.AddWithValue("#Month", Month);
cmd.Parameters.AddWithValue("#Year", Year);
cmd.Parameters.AddWithValue("#ReportPeriod", ReportPeriod);
cmd.Parameters.AddWithValue("#controlID", ControlID);
cmd.Parameters.AddWithValue("#PracticeGroupID", PracticeGroup);
cmd.Parameters.AddWithValue("#Instructor", SearchInput.Text);
cmd.Parameters.AddWithValue("#MeasureID", measureid) ;
SqlDataAdapter da = new SqlDataAdapter(cmd);
cmd.CommandType = CommandType.StoredProcedure;
cn.Open();
SqlDataReader reader = cmd.ExecuteReader();
var chartValues = new List<string>();
var chartValues2 = new List<string>();
if (reader.HasRows)
{
while (reader.Read())
{
string name = reader.GetString(0);
if (name != "Total")
{
string str = reader["ChartData"].ToString();
string a = reader["MeasureDesc"].ToString();
string[] strList = str.Split(',');
// convert it in json
dataStr = JsonConvert.SerializeObject(strList, Formatting.None);
hiddenvariable.Value = dataStr;
hiddenvariablemeasuredesc.Value = a;
chartValues.Clear();
}
}
}
else
{
}
reader.Close(); // close the reader
cn.Close();
}
The javascript for creating the box plot:
function CreateBoxPlot() {
var hv = $('#hiddenvariable').val();
console.log(hv);
var hvmeasure = $('#hiddenvariablemeasuredesc').val();
console.log(hvmeasure);
var chart;
var titleText = hvmeasure;
var subTitleText = 'Test Chart Subtitle';
var type = 'boxplot';
var data = [JSON.parse(hv).map(item => parseInt(item))]; //Doesnt work in IE
var $container = $('<div>').appendTo(document.body);
$(function () {
$('#container').highcharts({
chart: { type: type, inverted: true},
title: { text: hvmeasure },
subtitle: { text: subTitleText },
renderTo: $container[0],
legend: { enabled: false },
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
pointWidth: 50
}
},
xAxis: {
visible: false
},
yAxis: {
visible: true,
title: {
text: 'Values'
},
plotLines: [{
value: 80,
color: 'red',
width: 2
}]
}
});
chart = $('#container').highcharts();
chart.addSeries({ data: data });
});
}
Did you ever solve this?
I'm guessing you did not post all of your code, or you edited it, leaving information out.
In the SerializedBoxChart method, you create two (2) List<String> variables. One chartValues is cleared after every pass through your while loop while the other one chartValues2 is never used.
I suspect this is the data you were attempting to keep.
Instead of saving this information in temporary List<String> variables, you need an HTML list on your page that you can send data to.
If you had storage locations on your HTML page, like listView1 and listView2, your code would be like this:
public void SerializedBoxChart(int measureid) {
var list1 = (ListView)FindControl("listView1");
var list2 = (ListView)FindControl("listView2");
if ((list1 != null) && (list2 != null)) {
string connectionstring = ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;
var chartValues = new List<string>();
var chartValues2 = new List<string>();
using (var cmd = new SqlCommand("[dbo].cr_fe_KPI_RPT_Summary", new SqlConnection(connectionstring))) {
cmd.Parameters.AddWithValue("#SubTeamNo", SubTeam);
cmd.Parameters.AddWithValue("#Month", Month);
cmd.Parameters.AddWithValue("#Year", Year);
cmd.Parameters.AddWithValue("#ReportPeriod", ReportPeriod);
cmd.Parameters.AddWithValue("#controlID", ControlID);
cmd.Parameters.AddWithValue("#PracticeGroupID", PracticeGroup);
cmd.Parameters.AddWithValue("#Instructor", SearchInput.Text);
cmd.Parameters.AddWithValue("#MeasureID", measureid);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection.Open();
using (var reader = cmd.ExecuteReader()) {
if (reader.HasRows) {
while (reader.Read()) {
string name = reader.GetString(0);
if (name != "Total") {
string str = reader["ChartData"].ToString();
string a = reader["MeasureDesc"].ToString();
chartValues.Add(str);
chartValues2.Add(a);
string[] strList = str.Split(',');
// convert it in json
var dataStr = JsonConvert.SerializeObject(strList, Formatting.None);
hiddenvariable.Value = dataStr;
hiddenvariablemeasuredesc.Value = a;
}
}
}
// reader.Close(); don't need to close in a USING statement
}
}
list1.DataSource = chartValues;
list1.DataBind();
list2.DataSource = chartValues2;
list2.DataBind();
}
}

Inline editing - save new values on button click

I have following code for jQuery DataTables:
Contact.DataTable = $('#otable').DataTable( {
"ajax": {
"url" : '/Contact/' + Contact.id,
"dataSrc": function(check) {
return check.data;
},
},
"responsive": true,
"columns": [
{ "data": "id"},
{ "data": "category", "sClass": "category" },
{ "data": "name", "sClass": "name" },
{ "data": "lname" },
{
"render": function ( data, type, method, meta ) {
return Contact.saveContact(method);
}
},
]
} );
Datatable - dropdown - inline edit:
$('#otable tbody').on('click', '.category', function () { //second column
var row = this.parentElement;
if(!$('#otable').hasClass("editing")){
$('#otable').addClass("editing");
var data = Contact.DataTable.row(row).data();
var $row = $(row);
var thiscategory = $row.find("td:nth-child(2)");
var thiscategoryText = thiscategory.text();
thiscategory.empty().append($("<select></select>",{
"id":"category" + data[0],
"class":"in_edit"
}).append(function(){
var options = [];
$.each(Categories, function(key, value){
options.push($("<option></option>",{
"text":value,
"value":value
}))
})
return options;
}));
$("#category" + data[0]).val(thiscategoryText)
}
})
;
For changing values in dropdown
$('#otable tbody').on("change", ".in_edit", function(){ //Inline editing
var val = $(this).val();
$(this).parent("td").empty().text(val);
$('#otable').removeClass("editing");
});
Below code for saving new values(after inline edit) while clicking save:
$('#divsave').on("click", ".saveContact", function() {
var data = Contact.DataTable.row($(this).closest('tr')).data();
// Here I have to get new values after inline editing - but getting old values
});
My problem is : while clicking edit, in 'data', I am getting old values in the row of datatable, not the modified value after inline edit
datatable view - 1:
datatable - dropdown in column:
datatable after inline editing:
What I need: Save modified row while clicking 'save' image - currently it saves older value before inline editing(datatable view - 1)
When using dataTables it is generally a very bad idea to manipulate the DOM <table> or any content by "hand" - you should always go through the dataTables API.
Thats why you are getting "old values" - you have manipulated the content of the <table>, or so it seems - dataTables are not aware of those changes.
In a perfect world you should refactor the setup completely (i.e to use the API) but I guess you can solve the issue by using invalidate() on the row being changed in order to refresh the dataTables internals :
$('#otable tbody').on("change", ".in_edit", function(){ //Inline editing
var val = $(this).val();
$(this).parent("td").empty().text(val);
//add this line to refresh the dataTables internals
Contact.DataTable.row($(this).parent("tr")).invalidate();
//
$('#otable').removeClass("editing");
});

How retrieve details of table element clicked?

I have a table and I want retrieve a item details of a element that i sesect:
var tableArtConNom=sap.ui.core.Core().byId("artSnzNomDetail").byId("tableArtConNom");
tableArtConNom.attachItemPress(this.handleRowPress);
tableArtConNom.setModel(new sap.ui.model.json.JSONModel(p_oDataModel));
tableArtConNom.destroyColumns();
tableArtConNom.removeAllColumns();
console.log(tableArtConNom.getColumns());
for(var i=0; i<tableArtConNom.getModel().getProperty("/cols").length; i++){
tableArtConNom.addColumn(new sap.m.Column("colonna"+i, { header: new sap.m.Label({ text: tableArtConNom.getModel().getProperty("/cols")[i] })}));
}
tableArtConNom.destroyItems();
tableArtConNom.removeAllItems();
tableArtConNom.bindAggregation("items", "/items", new sap.m.ColumnListItem({
cells: tableArtConNom.getModel().getProperty("/cols").map(function (colname) {
return new sap.m.Label({ text: "{" + colname + "}" });
}),
type:"Navigation"
}));
if(this.byId("idCodNomDog").getProperty("text")!=""){
var buttonAccept=this.byId("idButtonAccept");
buttonAccept.setProperty("visible", true);
}else{
var buttonAccept=this.byId("idButtonAccept");
buttonAccept.setProperty("visible", false);
}
tableArtConNom.setModel(new sap.ui.model.json.JSONModel(p_oDataModelFull), "fullDataModel");
},
To do it I capture the press event but I find only a number of item:
//IF CLICK ON ROW
handleRowPress : function(evt){
var selectedRowNum = evt.getSource().indexOfItem(evt.getParameter("listItem"));
console.log(selectedRowNum);
},
How can I print the other detailx (for example the content of a column?)
p.s. I can't parse the model of all my rows because in the table I filter the data and the index that i clicked not match by the position in the total model.
in your event handler, use :
var oItem = evt.getParameter("listItem").getBindingContext().getObject();
//NB: if using standard sap.ui.table.Table, use:
//var oItem = evt.getSource().getBindingContext().getObject();
console.log(oItem); //prints the JSON for your selected table row

Categories