Develop Reference

Two events on same table

I have a table, and a bar-chart visualizing the same content as in the table. When I select a specific row in the table I show another more detailed graph for that specific row and the bar-chart disappears (hidden). What I want, is to be able to also go the other way around: selecting a bar in the bar-chart should highlight the coherent row in the table, but without "clicking it" because then i triggers the "Selecthandler" on the table.
Below is a snippet of my code (the table):
var data = new google.visualization.arrayToDataTable(dataRaw, false);
var table = new google.visualization.Table(document.getElementById('errorTable'));
var options = {
cssClassNames: cssClassNames,
allowHtml: true,
title: "Error",
};
google.visualization.events.addListener(table, 'select', selectHandler);
table.draw(data, options);
function selectHandler() {....ect.

use chart method --> setSelection(selection_array)
from the docs...
Optionally selects a data entry in the visualization—for example, a point in an area chart, or a bar in a bar chart. When this method is called, the visualization will visually indicate what the new selection is. The implementation of setSelection() will not fire a "select" event. Visualizations may ignore part of the selection. For example, a table chart can only show selected rows.
the table chart can only select entire rows, not columns or cells,
so we have to remove the column reference from the bar chart selection
when we use getSelection on a bar chart,
it will return an array of selection objects,
each will a key for row and column
e.g. --> [{row: 0, column: 1}]
when using setSelection on a table chart, we have to set the column value to null
e.g. --> [{row: 0, column: null}]
see following working snippet,
when the bar chart is selected, we use getSelection
then use the map method on the selection array to set the column values to null
then pass the new selection array to setSelection on the table
you will see when the bar chart is selected,
the same row in the table will be selected...
google.charts.load('current', {
packages: ['corechart', 'table']
}).then(function () {
var dataRaw = [
['Category', 'Value'],
['A', 1],
['B', 2],
['C', 3],
['D', 4],
['E', 5],
['F', 6]
];
var dataTable = google.visualization.arrayToDataTable(dataRaw, false);
var chartBar = new google.visualization.BarChart(document.getElementById('successChart'));
var chartTable = new google.visualization.Table(document.getElementById('errorTable'));
google.visualization.events.addListener(chartBar, 'select', selectHandler);
chartBar.draw(dataTable, {
selectionMode: 'multiple'
});
chartTable.draw(dataTable);
function selectHandler() {
var selectionBar = chartBar.getSelection();
var selectionTable = selectionBar.map(function (selectedItem) {
return {
row: selectedItem.row,
column: null
};
});
chartTable.setSelection(selectionTable);
}
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="successChart"></div>
<div id="errorTable"></div>

Working with google charts (want to get the value of column when click on the column)

I am working with Google charts. I want to get the value of column which is clicked. column name is showing in alert but I want get the percentage value also
var chart = new google.visualization.ColumnChart(document.getElementById('divAgingReport'));
chart.draw(data2, options);
google.visualization.events.addListener(chart, 'select', function () {
debugger;
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var status = data2.getValue(selectedItem.row, 0);
alert(status);
}
});
I am showing two images also:
want to show percentage value:

use column index 1 to get the value...
label --> data2.getValue(selectedItem.row, 0);
value --> data2.getValue(selectedItem.row, 1);

DataGridView CheckBox - Print checked rows

I'm beginner in programming.
I created an sql query to fill up a DataGridView and I added in the Column[0] a CheckBox column. I created the checking event. But I don't know how to step forward. I would like to do in
First step: add a check finished button and an event to show only the checked columns.
Second step: all the selected columns rows cell 1 (Name) and cell 2 (ID) to print somehow.
Third step: I want to create a template to print this name and id to an A4 format within rectangles or some object.
Because I'm new here I need a lot of help!
Thanks in advance!
ps: All step will be a big help for me!
private void dataGridView1_CellContentClick(object sender, DataGridViewCellEventArgs e)
{
if (string.Compare(dataGridView1.CurrentCell.OwningColumn.Name, "Checked") == 0)
{
bool checkBoxStatus = Convert.ToBoolean(dataGridView1.CurrentCell.EditedFormattedValue);
//"CheckBoxColumn" column value is checked or not.
if (checkBoxStatus)
{
MessageBox.Show("1");//for check it works or not
}
else
{
MessageBox.Show("0");//for check it works or not
}
}
}

To detect checked rows, when your first column is DataGridViewCheckBoxColumn you can use this code:
var checkedRows = this.dataGridView1.Rows.Cast<DataGridViewRow>()
.Where(row => (bool?)row.Cells[0].Value == true)
.ToList();
For the rest of problem you can use either of these options:
Option 1: Create an RDLC Report
If you are using a DataTable or a business object as model of your grid, you can simply create an RDLC Report and pass checked rows to the report and print the report.
Option 2: Print using PrintDocument
To print, use a PrintDocument and handle PrintPage event and put the print logic and codes there. To trigger the print event, it's enough to call printDocument1.Print() somewhere in your code.
You can loop over checkedRows and use e.Graphics.DrawString to print values from each row.
For example:
private void printDocument1_PrintPage(object sender, PrintPageEventArgs e)
{
//Find all checked rows
var allCheckedRows = this.dataGridView1.Rows.Cast<DataGridViewRow>()
.Where(row => (bool?)row.Cells[0].Value == true)
.ToList();
//create a stringBuilder that will contain the string for all checked rows
var builder = new StringBuilder();
//For each checked row, create string presentation of row and add to output stringBuilder
allCheckedRows.ForEach(row =>
{
//Create an array of all cell value of a row to then concatenate them using a separator
var cellValues = row.Cells.Cast<DataGridViewCell>()
.Where(cell => cell.ColumnIndex > 0)
.Select(cell => string.Format("{0}", cell.Value))
.ToArray();
//Then concatenate values using ", " as separator, and added to output
builder.AppendLine(string.Join(", ", cellValues));
});
//Print the output string
e.Graphics.DrawString(builder.ToString(),
this.myDataGridView.Font,
new SolidBrush(this.dataGridView1.ForeColor),
new RectangleF(0, 0, this.printDocument1.DefaultPageSettings.PrintableArea.Width, this.printDocument1.DefaultPageSettings.PrintableArea.Height));
}

To add a button to DataGridView:
DataGridViewButtonColumn editButton = new DataGridViewButtonColumn();
editButton.HeaderText = "Edit";
editButton.Text = "Edit";
editButton.UseColumnTextForButtonValue = true;
editButton.Width = 80;
dbgViewObj.Columns.Add(editButton);
EDIT:
You could create a new DataTable from the previous one and iterate in a for loop to check the state of the checkbox and using the dgv.Rows.RemoveAt(index) method to clear the rows that are not checked.Then use dgv.Columns.Columns.Remove("column_name") to clear the checkbox column itself.

Add tbody through code behind (C#)

I use jquery DataTable in my MVC3 project. The table is dynamically generated through code behind. The only thing (so far) that I have troubles with, is the tbody.
I want to add a tbody section with ID, without any rows, from code behind.
I've been looking a lot, and the best thing I got is:
TableRow tb = new TableRow();
tb.TableSection = TableRowSection.TableBody;
tb.ID = "Body";
But that way, I get a row in the tbody section, with one row with the id..
What I want to get is:
<tbody id="Body"></tbody>
How can I get that result from code behind?
Thanks

Such thing is not possible with the generic Table control, it simply doesn't support giving ID to its <tbody>.
What you can do though is assign the desired ID as custom attribute of the table:
Table1.Attributes["data-tbodyid"] = "Body";
Then using jQuery assign this on the fly to the table's <tbody>:
$(document).ready(function () {
$("table").each(function () {
var tbodyId = $(this).data("tbodyid");
if (tbodyId && tbodyId.length > 0)
$(this).find("tbody").eq(0).attr("id", tbodyId);
});
});

I ended up using HtmlGenericControl:
HtmlGenericControl tb = new HtmlGenericControl("tbody");
tb.ID = grid.GridBodyName;
Of course, the table itself, the header, the footer and its cells should also be HtmlGenericControl.
Adding the body to the table, and the cells to the header\footer should be done that way:
HTMLTable.Controls.Add(tb);

how do I find the value inside of a td upon clicking a checkbox in another td but within the same tr?

I have a table with a few columns and a few rows. When I click a checkbox at the beginning of each row, I'd like to store the value of a particular cell into a variable and use it in a comparison for something else.
How would I go about getting data from a cell in the same row as the clicked checkbox?
This function gets called by the click event for the checkbox that was clicked
function checkLives
if ($('.CarrierID:contains("2")', $( ':checkbox' ).parents( 'td' ) ).length > 0 )
{
//if its not dental
<%if (this.CurrentProduct != Products.Dental){%>
//if the lives being quoted are over 16
//Here is where I would need the value inside of that table row
if (livesover16)
{
//show popup
$('#over16').dialog('open');
return false;
<%}%>
}

Something like this should work (hard to be more precise without seeing the html):
$('input[type="checkbox"]').on('change', function(){
var tdtext = $(this) //the current clicked chexbox
.closest('tr') //the wrapping tr of the chechbox
.find('td') //find the td
.text(); //get the text
});