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>
Related
I'm trying to make two-level grid control. It has some package with its elements. I want to add one more column to gridView3 and hide three columns. I'm sending data to this gridView in code (dataset - 2 tables with one relation).
I've tried to send data to this gridcontrol and then operate on gridviews
gridControl2.DataSource = value.Tables[0];
gridView3.PopulateColumns(value.Tables[1]);
gridView3.Columns["RpkeId"].Visible = false;
gridView3.Columns["SourceLueId"].Visible = false;
gridView3.Columns["NewLueId"].Visible = false;
and then I'm trying to add column:
var test = new List<int> { 1, 12, 123, 1234 };
RepositoryItemComboBox riComboBox = new RepositoryItemComboBox();
riComboBox.Items.AddRange(test);
gridControl2.RepositoryItems.Add(riComboBox);
GridColumn columnGIDNumer = new GridColumn();
columnGIDNumer.FieldName = "asdfasdfa";
columnGIDNumer.ColumnEdit = riComboBox;
columnGIDNumer.OptionsColumn.AllowEdit = true;
gridView3.Columns.Add(columnGIDNumer);
None of these seem to work:
Is there any event I need to invoke or something? It seems that it'd work in normal, one-level gridcontrol.
Thanks in advance!
I have datagridview in a Windows form that shows content of table of database,
one column of table type is boolean, so in datagridview shows true/false,
but i want to customize it to show Icon or image like Accepted, or Rejected icons. Those Icons I have them in my Project Resources
This is my code
var cars = (from u in db.Cars
..........
select new
{
.....
.....
Approved = u.Treated == true ? Resources.approved : Resources.Cancel // Here Not working
}).ToList();
if (cars != null)
{
dgvCars.DataSource = null;
dgvCars.DataSource = cars;
}
In Approved cell I want to show one of those icons, depending true or false. I did as you see in my code
Approved = u.Treated == true ? Resources.approved : Resources.Cancel
but not working. Maybe I have to code somthing in my Fomatingcell events but I have no idea how to do that. Please help!
DataGridViewImageColumn is able to display images.
By default DataGridView automatically generates columns based on value type. DataGridViewImageColumn will be generated by default if value is array of bytes (byte[]).
In your case the type is different. You can solve in two ways
First:
Convert images to byte arrays.
Second:
Create image column manually and bind it to the image property.
// Execute it once when initializing datagridview
var approvedColumn = new DataGridViewImageColumn
{
Name = "dgvCars_Approved",
HeaderText = "Approved",
DataPropertyName = "Approved", // This will bound column to the property of the object
};
dgvCars.Columns.Add(approvedColumn);
// DataGridView will automatically pick up correct image
var cars = (
from u in db.Cars
..........
select new
{
.....
.....
Approved = u.Treated == true ? Resources.approved : Resources.Cancel
}).ToList();
// Check for null is redundant, because ToList() never returns null
// Because cars is a new instance
// set .DataSource to null before actual value is redundant as well
dgvCars.DataSource = cars;
Second approach will mess up a little bid with autogenerated columns, but I would suggest to create all required columns manually via designer or manually with code.
Predefined columns will provide more control over view behaviour and flexibility.
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);
I am using Dev ex pivot grid to show some data on the screen. When user click on any cell in data area, I want to find out it's corresponding row, column and data area value and their field name.
I am handling CellClick event of devex pivot grid.
with PivotCellEventArgs object I can find fieldname but not value.
I want the name and value for given cell from all perspectives (row, column and data area).
Thanks in advance.
In Razor MVC you can do that
#Html.DevExpress().PivotGrid(settings =>
{
settings.Name = "PivotGrid";
settings.CallbackRouteValues = new { Controller = "Home", Action = "PivotGridPartial" };
settings.ClientSideEvents.CellClick = #"
function(s,e){
var EventArgs=e;
console.log(EventArgs.RowValue);
console.log(EventArgs.RowFieldName);
console.log(EventArgs.ColumnValue);
console.log(EventArgs.ColumnFieldName);
console.log(EventArgs.Value);
}";
settings.Fields.Add(field =>
{
field.Area = PivotArea.RowArea;
...
});
settings.Fields.Add(field =>
{
field.Area = PivotArea.ColumnArea;
...
});
settings.Fields.Add(field =>
{
field.Area = PivotArea.DataArea;
...
});
}).Bind(Model).GetHtml()
I am new to WPF and trying to add rows as data in DataGrid, i tried the following code, it adds rows but do not show text in rows.
I have an XElement array from which i want to loop foreach and add items in DataGrid
And after successful addition is there any way to assign an ID to rows of DataGrid so when i click on row, i could get the ID for that rows specified. Please guide.
(Edit) XElement Array Containing XML
[0] => <objective id="1" title="obj 1"> </objective>
[1] => <objective id="2" title="obj 2"> </objective>
[2] => <objective id="3" title="obj 3"> </objective>
Code i tried, adds empty rows in Grid:
var datagridTopic = new DataGrid {Width = 400, IsReadOnly = true};
//I only need one column
datagridTopic.Columns.Add(new DataGridTextColumn()
{
Header = "Topic",
Width = datagridTopic.Width - 8 //after adding rows the grid gets scroll, so made column width lower
});
datagridTopic.Items.Add("obj 1");
datagridTopic.Items.Add("obj 2");
StackPanelContent.Children.Add(datagridTopic);
What i want to do is:
foreach (var element in XElement)
{
string title = element.Attributes("title").ElementAt(0).Value; // obj 1
datagridTopic.Items.Add(title);
}
Instead of adding data to the datagrid using code, try to bind it with the datasource you have.
var datagridTopic = new DataGrid {Width = 400, IsReadOnly = true};
//I only need one column
var column1 = new DataGridTextColumn()
{
Header = "ID",
Width = datagridTopic.Width - 8 //after adding rows the grid gets scroll, so made column width lower
};
column1.Binding = new Binding("ID")
datagridTopic.Columns.Add(column1);
var column2 = new DataGridTextColumn()
{
Header = "Title",
Width = datagridTopic.Width - 8 //after adding rows the grid gets scroll, so made column width lower
};
column2.Binding = new Binding("Title")
datagridTopic.Columns.Add(column2);
var items = xElementArray.Select(x => new { ID= x.Attribute("id").Value, Title = x.Attribute("title").Value});
datagridTopic.ItemsSource = items; //set the data source for the grid to custom created items.
StackPanelContent.Children.Add(datagridTopic);
If you don't want to display the ID in your grid, then don't add the ID column, add only Title column. you will have to implement the MouseDown event for the rows and in that row you will find the DataContext of the row which will be your data item from which you can get the ID.