WPF DataGrid - Adding Rectangles to DataGrid cells in codebehind - wpf

I have a DataGrid that is populated in Codebehind using its DataContext. So the columns are auto generated and the actual number of columns generated do change.
Ultimately I need to be able to display a barchart in the Cells (col) depending on the value of a cell in another field (Col + 1).
My initial thoughts are to add a rectangle and change its width to the percentage of the cell width based on the value in col + 1 - but I am failing to find where to start doing this entirely in code behind.
Has anyone done this or have any advice that might help me get to what I am looking for please?
I can give more information if required.
EDIT:
As Requested, I thought I would try and visualize what I am after better. So, my Datagrid is populated with data similar to the following:
where there are 3 sets of 2 columns (a Perc & Result column for 1, 2 & 3... This number could be up to anything!). Now, the value in the Perc column is referenced to conditionally control the style of rectangles that sit in the respective Result columns (in this example I am using colours to represent the percent. In reality I am looking to use the perc value to set the width of the coloured rectangle in the Datagrid cell to give a barchart appearance).
Finally, I will hide all the Perc columns so the results will look like:
Does that mke any more sense... I hope I havent confused things further??

Related

Autosize grid columns as per value in grid value in extjs6

I want to autosize the grid columns to max size of the content. How do i do this. i see only autoSize function on grid column, not sure how to use it.Say column header width is more then the column data width, that should be used.
I have used autosize function, It works, but i have few issues, I have to define the align property i.e text fields will be left and number fields will be on right, then heading text gets cut. I have locked columns in all reports, locked section gives some empty spaces.
https://fiddle.sencha.com/#fiddle/1cr6
See column selling code. Its not showing full because of align: Right property. If you remove it will work.
2.After DOW column empty space is coming.
Without minWidth Property columns wont scale properly.
Take a look at this piece of documentation: Ext.grid.column.Column - Setting sizes. I don't think you can make columns scale to content. You can, however, set fixed sizes or make them flex.
I hope this helps.

syncfusion GridControl column width not set properly

I am using the synfusion GridControl in my application.The user can select a text file and data from the file is displayed in the grid. Each and every time the grid is populated the column width is set using the code.
_gridPDD.ColWidths.SetSize(i, columnWidth);
where columnWidth will hold some fixed value based on the type of data displayed in the column.
Now the below test case works differently-
The user changes the width of the columns in the grid by dragging the edge of columns. When a new file is opened in the application and the grid is populated the columns are not shown with the default width (width set with the above line of code) instead they are set with the width of the columns in the previous section ( The width of column after the user perform a drag ).
Any help in this... Is there any property in the syncfusion GridControl that makes this behaviour? How to avoid this behaviour?
Thank you for your interest in Syncfusion products.
Your problem is the size(the width of column after the user perform a drag ) getting modified. In order to resolve this please restrict the resizing option using ResizeColsBehaviour. You may be resizing(by dragging the columns) to view the data. For that you can use AllowPropotionalColumnSizing. This allows you to resize the columns proportionately as per the data size.
Code Snippet:
//to restrict the resizing option using drag
this.grid.Model.Options.ResizeColsBehavior = GridResizeCellsBehavior.None;
//to resize the columnpropotionatelt according to the column data
this.grid.AllowProportionalColumnSizing = true;
Reference :
http://www.syncfusion.com/kb/695/how-to-prevent-column-resizing-for-child-tables-in-gridgroupingcontrol
http://www.syncfusion.com/kb/4853/how-to-optimize-the-resizetofit-method-for-large-number-of-records
Please let us know if your requirement is different from this.
Thanks & Regards,
AL.Solai.

WPF - overlay text on top of datagrid row

I have a WPF datagrid where certain rows will be disabled. In addition to disabling the cell contents, I'd like to present to the user some text that overlays the row with an explanation such as "Row disabled due to ...". Basically the same effect of having a label control with a lower z-order sitting directly in front of the datagrid row's cells.
If cell text spillover was possible (like in Excel), I could create a text column of 0 width with the message, then let the message runover through the neighboring cells. But to my knowledge this type of text spillover isn't possible in the datagrid.
If your rows have fixed height, you could add a another transparent datagrid on top of the other datagrid. The transparent datagrid would have one column which would show the disabled explanation. Simple but hacky solution.
The proper way would be to use adorners.

Any 3rd party Table like controls for WPF?

I know about Grid. What I don't like about Grid is that I have to specifically index every single row and col. So afterwards, if I want to just move one row or col, I have to go update a ton of xaml.
I tried stackpanel and styles but then even this is a lot of redundant xaml and rearanging the screen still involves then removing/updating styles.
I really like how in an html table, I just start laying out my rows and cols on the fly. If I want to move a row, that's easy, I can just copy paste the xaml to the right spot, nothing else needs to get touched. A col, is a bit harder, but still can be done easily with cut/paste, just needs to be done to every row.
With grid, one may need to touch every single thing in it depending on what's moved.
And what would be really cool, is if one could declare the column width and row heights up above just like a grid. But then as need, provide override values in the actual row,col declaration down below that actually contains the gui elements.
Does anything like this exist?
I've seen implementation of a Grid that infers ColumnDefinitions from usage of attached properties. Its definately doable. You could create an attached property that signifies that this element is the last element of a row.
(See WrapBreakPanel in Pro Silverlight 4 in C# By Matthew MacDonald)
And what would be really cool, is if one could declare the column
width and row heights up above just like a grid. But then as need,
provide override values in the actual row,col declaration down below
that actually contains the gui elements.
Sounds like this could get confusing. What if multiple cells in a row override the height? You can pull this off already with Auto sizing a row and having elements take up more space as needed.

How to Print all the columns in silverlight datagrid

Im having 17 columns of datagrid in Silverlight. How can we print all columns in datagrid to print. Since there are more noumber of column, Im enabling Horizantal Scroolbar ,so tht user can scrollto lastcolumn easily.
During printing of silverligt datagrid, i could see contents which are shown in Silverlight Page , anything beyond scroll bar ,those images are cropped and not printed . Any solution for print all columns in datagrid even though beyond the screen width.
One more question, if i have datagrid with horizontal scrollbar enabled, datagrid.actualwidth always give 768 px but not from first column to last column width size
_mahens
If you can wait six months for Silverlight 5, then you can completely control the print layout and format it exactly the way you want. Until then I'm not sure if there is anything you can do.
You basically have 2 options here.
Shrink your datagrid using Scaling to make the whole grid fit on your page
Slice the grid into 2 grids (first half of the columns in the first grid, and the other half on the other), then print this as 2 separate pages. Of course you would have to take into account the height of the grid and print additional pages there as well if required.
Difficult? Yes, but achievable :)

Resources