How do I add a checkbox column to a DataGrid in Compact Framework 3.5? [duplicate] - vb.net

how to put checkboxes in datagrid in windows mobile 6 using c#?
dataset dsAgent=table;
DataTable dataTable = dsAgent.Tables[0];
DataGridTableStyle tableStyle = new DataGridTableStyle();
tableStyle.MappingName = dataTable.TableName;
GridColumnStylesCollection columnStyles = tableStyle.GridColumnStyles;
DataGridTextBoxColumn columnStyle = new DataGridTextBoxColumn();
columnStyle.MappingName = "FirstName";
columnStyle.HeaderText = "Name";
columnStyle.Width = 80;
columnStyles.Add(columnStyle);
//columnStyle = new DataGridTextBoxColumn();
//columnStyle.MappingName = "EmailAddress";
//columnStyle.HeaderText = "EmailID";
//columnStyle.Width = 150;
//columnStyles.Add(columnStyle);
columnStyle = new DataGridTextBoxColumn();
columnStyle.MappingName = "WorkPhone";
columnStyle.HeaderText = "PhoneNo";
columnStyle.Width = 150;
columnStyles.Add(columnStyle);
GridTableStylesCollection tableStyles = DataGrid.TableStyles;
tableStyles.Add(tableStyle);
DataGrid.PreferredRowHeight = 16;
DataGrid.RowHeadersVisible = false;
DataGrid.DataSource = dataTable;

Here's some code from and old blog by Eric Hartwell (pulled into SO using the wayback machine):
private void SetupTableStyles()
{
Color alternatingColor = SystemColors.ControlDark;
DataTable vehicle = dataSource.Tables[1];
// ID Column
DataGridCustomTextBoxColumn dataGridCustomColumn0 = new DataGridCustomTextBoxColumn();
dataGridCustomColumn0.Owner = this.dataGrid1;
dataGridCustomColumn0.Format = "0##";
dataGridCustomColumn0.FormatInfo = null;
dataGridCustomColumn0.HeaderText = vehicle.Columns[0].ColumnName;
dataGridCustomColumn0.MappingName = vehicle.Columns[0].ColumnName;
dataGridCustomColumn0.Width = dataGrid1.Width * 10 / 100; // 10% of grid size
dataGridCustomColumn0.AlternatingBackColor = alternatingColor;
dataGridCustomColumn0.ReadOnly = true;
dataGridTableStyle1.GridColumnStyles.Add(dataGridCustomColumn0);
// Make column
DataGridCustomTextBoxColumn dataGridCustomColumn1 = new DataGridCustomTextBoxColumn();
dataGridCustomColumn1.Owner = this.dataGrid1;
dataGridCustomColumn1.HeaderText = vehicle.Columns[1].ColumnName;
dataGridCustomColumn1.MappingName = vehicle.Columns[1].ColumnName;
dataGridCustomColumn1.NullText = "-Probably Ford-";
dataGridCustomColumn1.Width = dataGrid1.Width * 40 / 100; // 40% of grid size
dataGridCustomColumn1.Alignment = HorizontalAlignment.Right;
dataGridCustomColumn1.AlternatingBackColor = alternatingColor;
dataGridTableStyle1.GridColumnStyles.Add(dataGridCustomColumn1);
// Mileage column
DataGridCustomUpDownColumn dataGridCustomColumn2 = new DataGridCustomUpDownColumn();
dataGridCustomColumn2.Owner = this.dataGrid1;
dataGridCustomColumn2.HeaderText = vehicle.Columns[2].ColumnName;
dataGridCustomColumn2.MappingName = vehicle.Columns[2].ColumnName;
dataGridCustomColumn2.NullText = "-Unknown-";
dataGridCustomColumn2.Width = dataGrid1.Width * 20 / 100; // 20% of grid size
dataGridCustomColumn2.Alignment = HorizontalAlignment.Left;
dataGridCustomColumn2.AlternatingBackColor = alternatingColor;
dataGridTableStyle1.GridColumnStyles.Add(dataGridCustomColumn2);
// Availability column
DataGridCustomCheckBoxColumn dataGridCustomColumn3 = new DataGridCustomCheckBoxColumn();
dataGridCustomColumn3.Owner = this.dataGrid1;
dataGridCustomColumn3.HeaderText = vehicle.Columns[3].ColumnName;
dataGridCustomColumn3.MappingName = vehicle.Columns[3].ColumnName;
dataGridCustomColumn3.NullText = "-Unknown-";
dataGridCustomColumn3.Width = dataGrid1.Width * 10 / 100; // 10% of grid size
dataGridCustomColumn3.Alignment = HorizontalAlignment.Left;
dataGridCustomColumn3.AlternatingBackColor = alternatingColor;
dataGridTableStyle1.GridColumnStyles.Add(dataGridCustomColumn3);
// Fuel Level column
DataGridCustomComboBoxColumn dataGridCustomColumn4 = new DataGridCustomComboBoxColumn();
dataGridCustomColumn4.Owner = this.dataGrid1;
dataGridCustomColumn4.HeaderText = vehicle.Columns[4].ColumnName;
dataGridCustomColumn4.MappingName = vehicle.Columns[4].ColumnName;
dataGridCustomColumn4.NullText = "-Unknown-";
dataGridCustomColumn4.Width = dataGrid1.Width * 30 / 100; // 30% of grid size
dataGridCustomColumn4.Alignment = HorizontalAlignment.Left;
dataGridCustomColumn4.AlternatingBackColor = alternatingColor;
dataGridTableStyle1.GridColumnStyles.Add(dataGridCustomColumn4);
// Last Used column
DataGridCustomDateTimePickerColumn dataGridCustomColumn5 = new DataGridCustomDateTimePickerColumn();
dataGridCustomColumn5.Owner = this.dataGrid1;
dataGridCustomColumn5.HeaderText = vehicle.Columns[5].ColumnName;
dataGridCustomColumn5.MappingName = vehicle.Columns[5].ColumnName;
dataGridCustomColumn5.NullText = "-Unknown-";
dataGridCustomColumn5.Width = dataGrid1.Width * 30 / 100; // 30% of grid size
dataGridCustomColumn5.Alignment = HorizontalAlignment.Left;
dataGridCustomColumn5.AlternatingBackColor = alternatingColor;
dataGridTableStyle1.GridColumnStyles.Add(dataGridCustomColumn5);
// Grid, mapping
dataGridTableStyle1.MappingName = vehicle.TableName; // Setup table mapping name
dataGrid1.DataSource = vehicle;
// Setup grid's data source
ComboBox cb = (ComboBox)dataGridCustomColumn4.HostedControl;
DataTable fuel = dataSource.Tables[0]; // Set up data source
cb.DataSource = fuel;
// For combo box column
cb.DisplayMember = fuel.Columns[0].ColumnName;
cb.ValueMember = fuel.Columns[0].ColumnName;
dataGrid1.CurrentRowIndex = 50; // Move to the middle of the table
}

For better checkbox UI look and feel, rather than big cross
private void DrawCheckBox(Graphics g, Rectangle bounds, CheckState state)
{
int size;
int boxTop;
size = bounds.Size.Height < bounds.Size.Width ? bounds.Size.Height : bounds.Size.Width;
size = size > ((int)g.DpiX / 7) ? ((int)g.DpiX / 7) : size;
boxTop = bounds.Y + (bounds.Height - size) / 2;
size = 12; // 13, so I made it 12
boxTop = boxTop - 1;
using (Pen p = new Pen(this.Owner.ForeColor))
{
g.DrawRectangle(p, bounds.X, boxTop, size, size);
}
if (state != CheckState.Unchecked)
{
using (Pen p = new Pen(state == CheckState.Indeterminate ? SystemColors.GrayText : SystemColors.ControlText))
{
p.Width = 2;
int offset = 2;
int edgeOffset = 2;
g.DrawLine(p, bounds.X + offset, boxTop + offset + 2, bounds.X + (size / 2) - edgeOffset, boxTop + (size / 2) + edgeOffset);
g.DrawLine(p, bounds.X + (size / 2) - edgeOffset, boxTop + (size / 2) + edgeOffset, bounds.X + size - offset, boxTop + offset);
}
}
}

Related

React native : Json.stringify cannot serialize cyclic structure

The issue happened here while using canvas property.
I tried to create roulette in react native using canvas property. I successfully used canvas, except I cannot use ctx.drawImage methods. When I tried to use them I got an error like
JSON.Stringify cannot serialize cyclic structures
Here is a code snipet
componentDidMount(){
wheelCanvas = this.updateCanvas();
}
// This is in error while rendering :
ctx.drawImage(wheelCanvas, wheelCanvas.width / 2, wheelCanvas.height / 2);
updateCanvas() {
var outsideRadius = 120;
var textRadius = 100;
var insideRadius = 30;
var canvas = this.refs.canvasRoulette;
let ctx = canvas.getContext("2d");
canvas.width = canvas.height = outsideRadius * 2 + 6;
var x = outsideRadius + 3;
var y = outsideRadius + 3;
ctx.font = "bold 18px Helvetica, Arial";
for (var i = 0; i < rouletteSize; i++) {
var angle = i * arc;
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.arc(x, y, outsideRadius, angle, angle + arc, false);
ctx.arc(x, y, insideRadius, angle + arc, angle, true);
ctx.strokeStyle = "#fff";
ctx.lineWidth = 1;
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "#fff";
ctx.translate(
x + Math.cos(angle + arc / 2) * textRadius,
y + Math.sin(angle + arc / 2) * textRadius
);
ctx.rotate(angle + arc / 2 + Math.PI);
var text = numbers[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 5);
ctx.restore();
}
return canvas;
}

Titanium appcelerator drag view

I want to drag a view verticaly inside my app, below is my code.
I have a window with id="win" and a square view (100x100).
var window = $.win;
var lastTouchPosition = 0;
$.demo.addEventListener("touchstart", function(e){
var touchPos = {x:e.x, y:e.y};
lastTouchPosition = $.demo.convertPointToView(touchPos, window);
});
$.demo.addEventListener("touchmove", function(e){
var touchPos = {x:e.x, y:e.y};
var newTouchPosition = $.demo.convertPointToView(touchPos, window);
$.demo.top += Number(newTouchPosition.y) - Number(lastTouchPosition.y);
$.demo.left += Number(newTouchPosition.x) - Number(lastTouchPosition.y);
//lastTouchPosition = newTouchPosition;
});
When i start drag the view i get following WARN : [WARN] : Invalid dimension value (nan) requested. Making the dimension undefined instead.
and my view is not moving.
Could you give me an idea please how i can start drag a view and stop to drag it when i reach a specific vertical position value (eg: the bottom of the viewport)
Thank you for your help.
I would add the touch events to the window/container-view instead like this:
var WIDTH = (OS_ANDROID) ? Ti.Platform.displayCaps.platformWidth / dpi : Ti.Platform.displayCaps.platformWidth;
var HEIGHT = (OS_ANDROID) ? Ti.Platform.displayCaps.platformHeight / dpi : Ti.Platform.displayCaps.platformHeight;
var sx = 0;
var sy = 0;
var cx = 0;
var cy = 0;
var xDistance = 0;
function onTouchStart(e) {
// start movement
sx = e.x;
sy = e.y;
cx = e.x;
cy = e.y;
}
function onTouchMove(e) {
xDistance = cx - sx;
var yDistance = cy - sy;
var rotationStrength = Math.min(xDistance / (WIDTH), 1);
var rotationStrengthY = Math.min(yDistance / (HEIGHT), 1);
var rotationAngel = (2 * Math.PI * rotationStrength / 16);
var scaleStrength = 1 - Math.abs(rotationStrength) / 16;
var scaleStrengthY = 1 - Math.abs(rotationStrengthY) / 16;
var scaleMax = Math.min(scaleStrength, scaleStrengthY);
var scale = Math.max(scaleMax, 0.93);
$.view_card_front.rotation = rotationAngel * 20;
$.view_card_front.translationX = xDistance;
$.view_card_front.setTranslationY(yDistance);
$.view_card_front.scaleX = scale;
$.view_card_front.scaleY = scale;
cx = e.x;
cy = e.y;
}
function onTouchEnd(e) {
// check xDistance
}
$.index.addEventListener("touchmove", onTouchMove);
$.index.addEventListener("touchstart", onTouchStart);
$.index.addEventListener("touchend", onTouchEnd);
in the XML there is a <View id="view_card_front"/> with touchEnabled:false
This will give you a nice smooth movent (and a rotation in this example)

Line break in date axis with amcharts

As you can see here http://allopensensors.com/profile/andreas/
the date on x-axis is nonreadable. I'd like to add a line break. How can i solve this?
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "http://allopensensors.com/amcharts/images/";
chart.dataProvider = chartData;
chart.marginLeft = 10;
chart.categoryField = "year";
chart.dataDateFormat = "YYYY-MM-DD JJ:NN:SS";
// listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
chart.addListener("dataUpdated", zoomChart);
// AXES
// category
var categoryAxis = chart.categoryAxis;
// categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "200"; // our data is yearly, so we set minPeriod to YYYY
categoryAxis.dashLength = 3;
categoryAxis.minorGridEnabled = true;
categoryAxis.minorGridAlpha = 0.1;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0;
valueAxis.inside = true;
valueAxis.dashLength = 3;
chart.addValueAxis(valueAxis);
// GRAPH
graph = new AmCharts.AmGraph();
graph.type = "smoothedLine"; // this line makes the graph smoothed line.
graph.lineColor = "#d1655d";
graph.negativeLineColor = "#637bb6"; // this line makes the graph to change color when it drops below 0
graph.bullet = "round";
graph.bulletSize = 8;
graph.bulletBorderColor = "#FFFFFF";
graph.bulletBorderAlpha = 1;
graph.bulletBorderThickness = 2;
graph.lineThickness = 2;
graph.valueField = "value";
graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>";
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.cursorPosition = "mouse";
chartCursor.categoryBalloonDateFormat = "JJ:NN:SS";
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
chart.creditsPosition = "bottom-right";
// WRITE
chart.write("chartdiv");
});
// this method is called when chart is first inited as we listen for "dataUpdated" event
function zoomChart() {
// different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
// chart.zoomToDates(new Date(1972, 0), new Date(2200, 0));
chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
}
To make it readable, you can rotate the labels with custom angle. Try categoryAxis.labelRotation : 45
For Reference: http://www.amcharts.com/demos/column-with-rotated-series/
Hope it helps!

Zedgraph creating too small image

The output of my graph is really small, I can't really see the values at the x and y axis. Is there a way to change this, so the graph is bigger?
My code to output the graph is:
ZedGraphControl zc = new ZedGraphControl();
GraphPane pane = zc.GraphPane;
PointPairList list1 = new PointPairList();
LineItem curve1;
pane.Title.Text = title;
pane.XAxis.Title.Text = xAxisTitle;
pane.XAxis.Scale.Min = 0;
pane.XAxis.Scale.Max = 11;
pane.YAxis.Scale.Min = 1;
pane.YAxis.Scale.Max = 12;
pane.YAxis.Title.Text = yAXisTitle;
Int32 totalCount = ds.Tables[objectName].Rows.Count;
double[] xVals = new double[totalCount], yVals = new double[totalCount];
for (int i = 0; i < totalCount; i++)
{
xVals[i] = Convert.ToDouble(ds.Tables[objectName].Rows[i]["ntotal"]);
yVals[i] = Convert.ToDouble(ds.Tables[objectName].Rows[i]["isomonth"]);
}
list1.Add(xVals, yVals);
curve1 = pane.AddCurve("Temp curve", list1, Color.Green, SymbolType.Circle);
for (int i = 0; i < totalCount; i++)
{
TextObj t = new TextObj("Teest", curve1.Points[i].Y, curve1.Points[i].X);
t.FontSpec.Border.IsVisible = false;
pane.GraphObjList.Add(t);
}
curve1.Line.Width = 1.0F;
pane.GetImage().Save(outPutDestination, ImageFormat.Png);
pane.AxisChange();
GetImage() function gets the current size of the pane, so we just have to increase the size of the entire pane(i.e: dock & maximize the window & then use the method to get the image).
DockStyle currentStyle = zedGraphControl1.Dock;
var currentWindowState = this.WindowState;
zedGraphControl1.Dock = DockStyle.Fill;
this.WindowState = FormWindowState.Maximized;
zedGraphControl1.GetImage ().Save ( #"c:\Image_1.png" );
this.WindowState = currentWindowState;
zedGraphControl1.Dock = currentStyle;

Circular Gauge Gradient - TeeChart - MonoAndroid

I am using TreeChart to make an indicator as shown in the picture. But I have a problem I can not make the three-color gradient to that gauge. This is my code
Steema.TeeChart.TChart tChart = new Steema.TeeChart.TChart(this);
tChart.Panel.Transparent = false;
Steema.TeeChart.Styles.Gauges gauges = new Steema.TeeChart.Styles.Gauges(tChart.Chart);
Steema.TeeChart.Drawing.Gradient g = new Steema.TeeChart.Drawing.Gradient(gauges.Chart);
gauges.bBrush.Gradient.Direction = Steema.TeeChart.Drawing.GradientDirection.DiagonalUp;
gauges.bBrush.Gradient.StartColor = System.Drawing.Color.Red;
gauges.bBrush.Gradient.MiddleColor = System.Drawing.Color.Black;
gauges.bBrush.Gradient.EndColor = System.Drawing.Color.Blue;
gauges.bBrush.Gradient.Visible = true;
gauges.Pen.Color = System.Drawing.Color.FromArgb(5,56,73);
gauges.TotalAngle = 180; // circular arc
gauges.RotationAngle = 180; // arc rotation angle
gauges.HandStyle = Steema.TeeChart.Styles.HandStyle.Triangle; // pointer style
gauges.Center.Style = Steema.TeeChart.Styles.PointerStyles.Circle; // SPHERE center circle style
gauges.Center.HorizSize = 5; // center circle level size
gauges.Center.VertSize = 5; // center circle vertical size
gauges.ShowInLegend = false; // display the legend
gauges.HandDistance = 23; // pointer length
//---------------------------------------------------
gauges.Value = 80;
gauges.Minimum = 0; // minimum;
gauges.Maximum = 100; // maximum value
//----------------------------------------------------
gauges.MinorTickDistance = 0;
gauges.Pen.DashWidth = 23;
gauges.Chart.Axes.Left.AxisPen.Width = 65; // brush width;
gauges.Chart.Axes.Left.AxisPen.Color = System.Drawing.Color.Red;
gauges.Chart.Axes.Left.MinorTickCount = 5; // the scale value scale line number
gauges.Chart.Axes.Left.MinorTicks.Length = 10; // the scale value scale line length of
gauges.Chart.Axes.Left.Ticks.Length = 20; // display the value scale line length of
gauges.Chart.Axes.Left.Increment = 3000; // the scale value of interval size
SetContentView(tChart) ;
I also tried the following lines of code
gauges.CircleGradient.Direction = Steema.TeeChart.Drawing.GradientDirection.DiagonalUp;
gauges.CircleGradient.Visible = true;
gauges.CircleGradient.StartColor = System.Drawing.Color.Green;
gauges.CircleGradient.EndColor = System.Drawing.Color.Red;
gauges.CircleGradient.UseStandardGradient = true;
I hope I help
regards
You should use Steema.TeeChart.Styles.CircularGauge instead of Steema.TeeChart.Styles.Gauges which is a much simpler gauge version. For example, using the code snippet below, you get a similar gauge to the image in your link:
Is this similar to what you are looking for?
tChart1.Header.Visible = false;
Steema.TeeChart.Styles.CircularGauge circularGauge1 = new Steema.TeeChart.Styles.CircularGauge(tChart1.Chart);
circularGauge1.Frame.Visible = false;
circularGauge1.FaceBrush.Visible = false;
circularGauge1.DisplayTotalAngle = 180;
circularGauge1.TotalAngle = 180;
circularGauge1.Value = 200;
circularGauge1.Ticks.Visible = false;
circularGauge1.Minimum = 0;
circularGauge1.Maximum = 1000;
circularGauge1.Axis.AxisPen.Visible = false;
circularGauge1.Axis.Increment = 500;
circularGauge1.RedLine.Visible = false;
circularGauge1.GreenLineStartValue = 0;
circularGauge1.GreenLineEndValue = 1000;
circularGauge1.GreenLine.Gradient.Direction = Steema.TeeChart.Drawing.GradientDirection.LeftRight;
circularGauge1.GreenLine.Gradient.UseMiddle = true;
circularGauge1.GreenLine.Gradient.StartColor = Color.Orange;
circularGauge1.GreenLine.Gradient.MiddleColor = Color.Yellow;
circularGauge1.GreenLine.Gradient.EndColor = Color.Green;
circularGauge1.GreenLine.Pen.Visible = false;