I would like to get my data entry form to be dislayed in mentioned below sample format. Thing is i almost have 40 fields to be displayed. So i would prefer this format and scrollbar too. Can anyone tell me the better way for these many fields in this format. Let me know the sample piece of code so that i can have better clarity..
Using grid I get 4 columns and almost 25 rows. So UI code getting big..
Apart from grid row definitions or any other way.
Sample format:
This sounds like a typical Grid: http://msdn.microsoft.com/en-us/library/system.windows.controls.grid%28v=vs.95%29.aspx
You want to create one ColumnDefinition per column (so either 2 or 4 depending on how you place your labels (TextBlocks) vs your TextBoxes, and one RowDefinition per row.
That might be tedious with so many fields to do it, so you might want to generate it, it really depends on how you get your fields, and if the fields will never change.
Another solution is the Toolkit's DataForm, which looks exactly like what you've shown:
http://silverlight.codeplex.com/
You can try the demo to see how it looks.
I've never used it, so I can't vouch for its ease of use or power, etc... But at the time of writing, it's in the 'Preview' quality band (see http://silverlight.codeplex.com/wikipage?title=Quality%20Bands&ANCHOR#Preview for explanation).
Related
I wrote my own sub-class, for some selection stuff and paging etc. But those all worked with the renderer(), which required them to return a string.
This worked fine, I created some image-tags and returned those.
But how does this class work in detail?
I want a sub-class which displays a chart in a cell, which should technically be no problem, but the renderer() doesn't seem the right place for it, since it only works for strings.
Does the Class get instantiated for every row? or is it really just one instance for a column, which methods get called for every row with the needed data and the instances don't hold any state about the rows?
The renderer() mechanism is actually implemented in Ext.grid.column.Column, for which there is one per column.
As you have mentioned, the renderer() function returns a string, which could be an HTML string (which could be rather complex - have a look at the templates used by ExtJs for the standard columns). But you cannot return a component (chart).
To the best of my knowledge (based on my own understanding and replies to similar questions), ExtJs does not offer a straight-forward way to render components within grid cells. If you really think about it - you are asking a grid for much more than its intended role. It was designed to present records per raw, with the addition of simple user interaction facilities, like checkboxes.
But what you are really asking for is more of a way to layout charts, for which problem i suggest you look into the Table layout.
Alternatively you should be able to render a chart into a dom element, which will be defined in your own custom column template. But I will consider this to be an involved task.
I need to display in my program number of similar statistics, like:
Name / Age / Salary / Position
John 30 1000 senior
Kate 18 100 intern
... .. .. ...
Totally I need to display several hundreads lines.
The question is what control should I use?
At least I know two options:
use Table control
use Grid layout (then dinamically add labels etc. to the grid)
I think with Grid I will automatically have "custom rendering" because I can add anything into Grid, not only "Label", but also buttons for example. However I'm not sure if I need such possibility.
But I need ability to sort the table by certain column.
So it seems "Table" better feets my needs, however I noticed that it seems that "Table" is not very popular in WPF (am I correct? why?)
So the question is "Should I use Table or there is someting better?" Is it possible to use databinding with Table?
I'm absolutely novice to WPF so sorry for any stupid questions :)
DataGrid and GridView were built for exactly that. When you bind a source it creates a table like row for each row in the source.
Either use a DataGrid or a ListView (with GridView), do not use a Grid, and what is this Table you speak of? If you mean this class, that can only be used in flow documents, which you do not need.
(See the documentation pages for examples or do some searching)
When building WPF forms that are used for data entry (e.g. A bunch of labels next to a bunch of textboxes and comboboxes) I've seen two methods:
Create a master Grid, divide it into two columns, and add rows with Height="auto" for each field and two rows for header and footer (and submit button), and each label and text box has their own row.
The other method is to create a master stackpanel and inside it a horizontal stackpanel for each pair of label-textbox.
How do you design your data entry forms? I'm currently torn between the two methods, maybe there's an alternative that I'm unaware of?
EDIT: Henk said I should define best and I think I agree, by best I mean easiest to maintain, create, align and add or remove fields from as demands change.
So far the only criteria by which the grid is better is ease of alignment.
definately first method!
it's well aligned, especially with the use of SharedSizeGroup so you can have the same alignment eg in different Groupboxes.
I have used both and it really depends upon how your form is going to look. If you have a really simple layout where you are going to have labels and and corresponding fields of approximately the same size then your first method works well. It lets you create two columns that line up very well. However, if your fields are of varying withs, and heights and you want to be more complex with the layouts then a hybrid approach may be best. If you are doing anything more complex than just labeling fields on basic controls you may want to create user controls rather than just using what is there out of the box. When laying out fields in both a horizontal and vertical jagged manner it becomes hard to maintain the grid layout as you have to wind up having a grid with lots of columns and rows. The fields and labels have to span columns and rows to get your alignment correct. This works, but is a nightmare if you ever want to reorganize the form.
For what you wrote, it sounds like the first approach is best. If its simple now and some point in the future it becomes more complex, its easy to change. However, if you have a more complex layout already then a pure grid based approach probably isn't best.
Disclaimer: I am going to say little about my own company's product in my blog that gives comparison and challenges in maintaining forms.
Both Grid and StackPanel have Maintanence nightmares so we went on different approach of creating Form Layout, and I have outlined our approach here on this link,
http://akashkava.com/blog/296/advanced-data-form-with-ui-atoms-on-wpf-and-silverlight/
I'm working on a new project where the design calls for dynamic rows and columns displayed in some form of grid. I think I can accomplish this very hackishly using the plain ol' Grid, but it seems like it should be possible using a "real" grid.
In my mockup, I circled the tricky bit in red. Under column 1, I have effectively 2 columns of data. The problem is the fact that my data in column 1 can span multiple rows. And the fact that column one is really two pseudo columns and each one can span a different number of rows independently. Note: the data is fake and inconsequential. I'm open to ideas for a good implementation. I can fall back to the Grid and do this all in code behind, I'm open to purchasing a datagrid that may have more power than the DataGrid and my absolute last resort/preference is to restructure this format to something a little more doable.
Thank you for any ideas you can provide.
Most commercial WPF DataGrid implementations handle hierarchical data like this. For example, Telerik's DataGrid (part of RadControls for WPF) supports hierarchical data in multiple formats.
Typically, the default styling is a bit different than yours above, but can be adapted to that format via styling.
In Excel, there is this feature for filtering the cells of a column.
How can I implement excel like FILTER feature in Silverlight Datagrid?
Please advice. Thanks
AJ
Good question - this is a good feature, but not one that can be implemented in 5 minutes.
You don't want to be overriding the rendering of the standard datagrid in any way (too much work), so you need to take a slightly different approach. One way to do that is to draw your own 'header' above the top of the grid - just a grid, with a border and a stackpanel will get you started. Then you need to enumerate the visible columns of the grid, and create a dropdown corresponding to each, and add that dropdown to the stackpanel. Using a simple linq statement you can get a list of the distinct values in each column. When the user selects a value from the dropdown you can then filter the grid's datasource using that value in a LINQ statement.
In reality this is probably going to be at least a week's worth of work to do properly. If you take the cost of that development and the cost of the testing, and measure that against the cost of a good component suite where they already have filtering built in (most of the major vendors do), then unless you are working for a very low hourly rate you will find it is cheaper to buy the components - it is probably safer too, as the components will be well tested and realtively bug free.
Edit (some time later): what i should also mention though is that if you only want to do this on a couple of columns then you could consider using a column header template. If you take this approach though you will also have to do things like copy the various mouse related animations or transitions that might be part of the original colunm header, just so you can keep some consistency across the top of the grid. Personally i would just go with option one and give the user the ability to filter on any of the columns.