Does anyone have suggestions on the best way to bind an observable collection to multiple wpf trees using different groupings? Both bindings are two-way, such that changes in one control should be reflected in both controls.
I was able to modify this sample ( http://blogs.msdn.com/b/mikehillberg/archive/2006/10/11/a-treeview-a-hierarchicaldatatemplate-and-a-2d-collection-walk-into-a-bar.aspx ) by adding a secondary grouping and an additional tree. Grouping by different fields worked well.
I then added a button to add an item with round-robin groupings to the collection and a little snippet to find and select the items in both trees ( social.msdn.microsoft.com/forums/en-US/wpf/thread/7e368b93-f509-4cd6-88e7-561e8d3246ae ), and it all works well.
I am still curious to know alternatives.
Related
We have a request from our designers to build tables something like this, with rows that expand to show essentially another sub-table underneath. In KendoUI documentation, this is called "Hierarchy."
We use SlickGrid v2.3 with a few additional plugins. We currently have tables with a similar row expand/collapse like this: https://mleibman.github.io/SlickGrid/examples/example5-collapsing.html . That does not allow for a completely different set of columns in the sub-table.
The question is, can this be done in SlickGrid or not?
It might be hard to do with current SlickGrid, there's no code that handles the hierarchical part itself so that would be lot of work to implement in SlickGrid. However it is implemented in Slickgrid-Universal, which is a wrapper on top of SlickGrid. You can see Example 5 and Example 6 which shows 2 types of Tree Data grids (hierarchical or parentId refs). We use it in production for a project that we have. Also note that this is not a grid within a grid, it's rather an expand/collapse the same as what you found in example5-collapsing.html, the only differences with SlickGrid is that Slickgrid-Universal has the code to deal with hierarchical data (filtering/sorting) while SlickGrid itself doesn't and also another nice to know thing is that expand/collapse is actually using data filtering behind the scene and you can see that in the total items displayed when you have the footer enabled.
Please note that I'm the author of Slickgrid-Universal and also a major contributor to SlickGrid as well
At the moment, it can't be done. In order to achieve its speed, Slickgrid enforces a fixed row height and a single scrolling canvas. It's just a different approach than used by HTML display grids.
You could put together a workaround using mutiple slickgrids or an embedded slickgrid in a group row, I suppose, but it would be messy.
One thing I have done is develop a SlickCombo, which is essentially a grid presented as a multi-column dropdown. It's a full grid and can offer editing.
That's probably as close as you'd get.
A comment: the MLeibman repo is long dead - you should be using: https://github.com/6pac/SlickGrid
For this specific project, my team and I are thinking of leveraging the power of AngularJS directives and use them to build custom elements specific to our project, and use them like they were real HTML components.
For instance...
Say we have this table where each row is composed with a bunch of information that we get from a request, each row will be repeated with ng-repeat. Inside each row we will have multiple custom buttons with the same custom behavior. This button will also be used across different modules/pages on the website and not only on this specific table.
Our first thought was to use 2 directives, one for the table row and one for the button. The idea is that these are custom components/elements with custom attributes to define the custom behavior of the element. This would allow us to have a really nice modular application where each component is developed and unit-tested individually. Our HTML would also be easy to ready and understand.
Does this sound good?
Now, what about performance issues? Could we encounter big issues with this approach if, say we have a table with 100 of those rows and 5 of those buttons per row. Could this be big a problem if those rows/buttons had a couple of bindings to update information each X seconds?
The father of Angular Misko Hevery has this to say about performance and data-binding:
How does data binding work in AngularJS?
But in short like he says as long as you dont have more than 2000 data-bound items per page performance wont be an issue...
I have some hierarchical data model that I'd like to present in an NSOutlineView. I'm binding a tree controller to the outline view to provide data and to handle selection and binding to other views.
However, I only want to show only part of the data in my model to the outline view. (Each object in my hierarchy has an array of child objects, but I'd only like some of these child objects to appear as child nodes of the node in the tree.) I wish I could just attach a filter predicate to the tree controller, but it seems that NSOutlineView doesn't support filter predicates.
I think that this design requires an NSOutlineViewDataSource to filter my data model, and an NSTreeController bound to the data source and the outline view. However, none of the binding outlets in the tree controller (Content Array, Content Object, Content Set, etc.) seems appropriate for binding a data source.
Any ideas? Thanks in advance...
You can try feeding the data to your array of child objects through an array controller.
Here's how I'd do it. Override the accessor method in your represented object and return a filtered array from your array controller.
In general, NS[Outline|Table]ViewDataSource and Cocoa Bindings is an "either/or" choice. Mixing the approaches, while perhaps not strictly impossible, will likely lead to unpredictable results.
You mention binding a filter predicate to the Outline View itself and not to specific nodes, so I surmise that one filter predicate for all nodes might be "good enough." If that's the case, then one solution to this would be to expose a second children-vending property on your model, maybe filteredChildren, and tell the NSOutlineView to use that to access children instead of the your default/complete children-vending property. If you need functionality like drag reordering, this approach might prove to be non-trivial, but it should be easy to explore this approach regardless.
If you need a different filter for each node, or if the filter changes dynamically, this task would likely have crossed over into being a case that was a good candidate for implementing NSOutlineViewDataSource (and a poor candidate for using Cocoa Bindings.)
I want to implement a screen to display a tree of comments in WP7. Each comment can have children comments and so on. Each child comment will be visually distinct from its parent via indenting
ie:
"comment text"
"Some child comment text"
"Some child comment text"
"some child comment text"
"comment text"
"Some child comment text"
What would be the best way to go about implementing this? I'd like to keep the implementation as simple as possible so initially I was thinking I could use a single ListBox and programmatically set the Padding/Margin of each comment/ListItem, depending on its depth in the tree. But I can't seem to get it working. Any examples, suggestions, recommendations, etc?
Edit: Doing some additional reading, it seems like a DataTrigger would have been perfect for this sort of thing http://www.codeproject.com/Articles/113152/Applying-Data-Templates-Dynamically-by-Type-in-WP7 ...But WP7 doesn't support triggers.
One other idea I had was to make the Margin/Padding a Property of the Comment class, and then databind to that...this should work, but I'm contaminating my Comment class with display information. Any ideas on how I could databind the Margin/Padding value but somehow not mix model & view codes?
You'll have to roll your own, either from scratch, or by assembling something out of existing controls. ListBox looks like a good bet for this purpose.
Take a peek at this MSDN thread (web archive - thread now moved/deleted), it has several suggestions about simulating a TreeView using a ListBox, and a claim (which I have not verified) that you can use System.Windows.Controls.TreeView in WP7 (with the caveat that you also need System.Windows.Controls.Toolkit).
The marked answer, written by Shaun Taulbee:
Tree view behaviour in a listbox could be mimiced with a bit of smarts in the collection handling. Features your classes would need to support that come to mind are
a collection whose elements supports retrieving child collections
similarly to be able to detect if an element has child collections
in the data template for the listbox show one element of the stackpanel for expansion state based on presence of children and whether or not expanded
in the data template for the listbox show one element of the stackpanel for indent which reflects the depth of the child - to accomplish this best you should have a collection that represents a flat version of your tree data to bind to - then when you insert items you can make the indent based on the indent of the parent item that was just clicked
when a node is clicked in the listbox you insert the children from that node into the flat collection that the listbox is bound to
when the node is clicked again the children are deleted from the flat collection
You could encapsulate all of this into some neat classes to provide a fairly simple reusable api I would imagine if you wanted.
This thread has a fair amount of noise, but down at the bottom there's a comment from Mark Chamberlain:
"TreeView is not a natural fit for the phone, you can emulate Treeview
in other ways, for example, with ListBox item templates, Pivot or with
other List patterns. It will depend on how many levels of the tree
you will have.
"For example, you can template your ListItem to contain a label and
another Listbox with same item template. Doing this you can emulate
as many drill in levels as you need to handle, but only one branch at
a time."
"You may be able to re-template the TreeView (source is also available
in the Silverlight Toolkit), but it isn’t a supported scenario, and
you would need to do a decent amount of work to get it looking good on
the phone from a design & re-templating standpoint."
The following should be good starting points, both altering the ItemTemplate for a ListBox control :-
http://3water.wordpress.com/2010/07/25/listbox-on-wp7/
http://weblogs.asp.net/psheriff/archive/2010/10/27/windows-phone-list-box-with-images.aspx
For WP8 you can use this one TreeView_WP8
I have a tree representation of pages in a CMS application. I understand how to persist the tree in the database. However, I don't have a good way to:
A) Reorder subpages under a particular parent page.
B) Provide a UI implementation that allows the user to change the order.
Any suggestions?
Changing the order itself will require you store some sort of ordering along with each page in the database. Just the current highest / lowest value +/- 1 would probably be a fine starting point. Once you've got that ordering in there, reordering becomes a case of swapping two values or changing the value for one page to be between two others (you could use floats I guess, but you may need to renumber if you split it too many times).
Anyway, once you've got that, you need a UI. I've seen a very simple 'swap this with the one above/below' approach which can be a simple web link or an AJAX call. You could also present all the page values to the user and ask them to renumber them as they see fit. If you want to get fancy, JavaScript drag and drop might be a good approach. I've used ExtJS and Mootools as frameworks in this kind of area. If you don't need all the Extjs widgets, I'd say well away from it in future, and look at something like the Mootools Dynamic Sortables demo.
A) I have a similar CMS app and I store an ordinal value with the page for a particular tree and sort on this value -- because lots of my pages appear in completely different sites I have to maintain the ordinal number against a page / tree combination.
B) I too would like a better way to do this. Currently they click on the node in the treeview and in the main page screen they can move the page around. I've tried drag and drop with java script and other solutions but my users could never work with it without lots of hand holding. I'll be interested in the responses to this one.