How to setup a nested dataview - extjs

I have an (outer-)dataview (with tpl, store etc) which works fine. I can reorder the items (drag & drop) and edit the data.
Now I need to extend the functionality. Some items in the outer-dataview needs to show additional data in an inner-dataview. Items within this inner-dataview also must be reordered and edited. It is even getting more complex: also these items could have additional data to be shown insite the items etc etc.
By nesting the dataviews insite other dataview-items the user has a good presentation of the grouped data and can easily reorder the data by drag & drop.
I’m struggling what the best way is to build the nested dataviews. The best thing I came up with was to loop all nodes in the outer-dataview and create new inner-dataviews and use the renderTo-functionality of the dataview directly into the outer-dataview-items.
This works fine but each time I change data in the one of the outer-dataview items the related inner-dataviews disappear, because the dataview updates the dataview item.
It would help if I could re-insert the inner-dataview(s) again.
Does any one have a good suggestion how to realise the nested dataviews?
Arno

Issue Solved and the solution was quite simple.
After the creation of each dataview I dynamically render the inner-dataview into the items. simple...

Related

best way to implementation this UI?

one button with wrapped list view
my searched result are:
1.worst approach: put add button on the wrapped list view.
2.bad approach: set two data template for list view.
3.?
thanks
I've had something similar a while back. In the end I decided to add a fake data item where I needed the button.
Say I had a list of MyDataItem, I created a derived class MyFakeDataItem and added that at the end of the list, after I finished populating it. In the WPF I created two data templates, one for each class, and a selected to decide.
I think it turned out quite elegant, since it allowed me to easily override any real functionality I had on MyDataItem, and add a command on the fake one to suit my needs.
Hope that helps.

Best collection to use for speed in WPF GUI

I have a listview that contains a list of 'rows', which in term, contains a list of 'columns'. For now, I use List for both rows and columns (i.e. I have a List and it the Rows objet, I have a List, but as the number gets bigger, the time it takes to update the GUI and overall performance of the program gets pretty bad. Plus, the GUI isn't notified when the items (columns within the rows) change, so I have to do an Item.Refresh, which seems to refresh the whole thing each time, adding to the slow performance
Is there any other type of object that I could use to accelerate the whole thing. Meaning it would need to satisfied the following points :
- Faster that List
- When I add a new rows, the listview is updated. Is possible, only the new rows is added instead of the whole listview.
- When I change a Columns object, the GUI is updated. If possible, only the modified columns objet is affected so the whole Listview is not changed.
Note that there are quite a number of actual calculations behind the scene for displaying the columns object. I have currently working on optimizing this end, but I'm pretty sure using a better collection would help quite a lot here.
Thanks
I believe what you are looking for is an Observable Collection
This collection type will fire a CollectionChanged event when items are added. You will not need to refresh the collection because WPF controls support this out of the box.
Note
The CollectionChanged event will not be fired when indiviual elements are updated. If you want these updates to show on the UI, the object within the collection should implement INotifyPropertyChanged

Implementing filters for ExtJS Tree grid with large amount of data

I am working on a project which is using ExtJS 4.1
I need to implement a tree grid with filters. As per my understanding from reading various articles, blogs and SO posts, ExtJS does not provide filter mechanism with tree store and we need to write our own filtering mechanism.
For filtering there are two approaches suggested:
1) Load the data into the tree grid and then show / hide the node based on filter conditions
2) Manipulate the store (copy the data and remove the record from the store)
I tried first approach. It was working perfectly with the test data (around 30 nodes).
But with the snapshot of production data, I was getting "Unresponsive Script" error in IE and FireFox. With Chrome it was working fine.
Basically the production database has large amount of data, around 3500 records which form around 900 nodes in the tree grid. I suspect, once the tree store is populated, while rendering all 900 nodes into the tree grid, I get "Unresponsive Script" error.
I am new to ExtJS and not sure what is the best way to tackle this problem.
I would like to know, how does filtering works on grid. Can I replicate same filtering mechanism for Tree grid?
Any suggestions to tackle this problem are welcome.
Instead of Tree if you can use Grid with grouping then use you can use Grid with filtering like this with pagination. If not then you can use something like Ext.grid.plugin.BufferedRenderer which can be used for TreePanel as well but it is available only on 4.2. If none of this is the solution for you then you have to create your own custom filtering than can handle pagination for you.
I have found that loading child nodes on the expand events of each node is a decent way to minimize the dom interaction of the tree panel. That way when you filter, it's only going to need to filter the first level of the tree structure rather than the entire thing. I have it working in an access control management application right now that is handling about 350 resources in one tree panel and two others with about 75 nodes each that are linked together through events. There's no noticeable UI lag with that approach but I haven't scaled it up quite to your scale and it would depend greatly how many items were in the first level of your tree whether or not that could work for you.

Creating an Empty DataGrid

I was wondering what the best way was to create an empty datagrid.
For example after you have hit new in excel, You have a grid with empty rows and columns.
I am using c# with WPF and .net 4.0.
Thank you.
As the comments have suggested, a datagrid is not a spreadsheet, but a method to display / edit existing data. That said if you want something similar, feel free to populate a collection with default / 'empty' objects and bind that to your grid. It just means that after working with the data, you will have to define a method to capture only the edited rows. This still means that the column-bound properties of your class need to be known ahead of time.
A DataGrid is used to display a collection. If you want to create an individual row DataGrid is not really the right tool. You could but a single empty row in the DataGrid using a collection of only on row. There is a lot of guidance on Master Detail on MSDN. If you don't know how many columns at design time you could used a DataGrid to turn the row vertical with column 1 as name and column as value so now you have one record but with a collection of fields.

C# 4.0 .net 4 and WPF UI update

I'm trying to build an app to work with twitter like site , and the problem I'm trying to solve is -
How am i going to update the UI with a background worker and only add show the latest posts(tweets if you will )
on top of the wrap panel without removing the ones that already exist?
in my previous attempt i have done this by storing the tweets/posts in a local SQlite database and then retrieving the last 10 posts which causes the UI to freeze for a bit and reload all the posts.
Any ideas ?
Since you're using WPF, this is fairly easy.
Just store your "posts" in an ObservableCollection<T>. You can then just Insert the new item at the front of the list. If you've bound this to an ItemsCollection control, WPF will handle redrawing everything correctly for you.
Unless you have a LOT of elements, this will work quite well, and be fairly fast. I'd try it first (since it's really easy to implement), and only try to get more "clever" if you find that it has performance problems. I doubt you'll have issues, though, provided you use the proper collections, since WPF's data binding to ObservableCollection is quite fast.
Use databinding. The UI elements are databound to fields of a record in a collection. The panel of multiple rows should be an ItemCollection of some sort - Listbox, most likely - so that it will replicate the item data template for each row in the underlying data collection.
After that, the UI will track with any changes made to the underlying collection, if the collection implements INotifyCollectionChanged. If you use an in-memory collection, you can just add new data to the top of the collection (Insert at index 0) and that will push all the old items down in the UI display. If you use a file or server based data source, you can fetch the data in a background thread and post updates to the in-memory collection on the foreground thread. Just don't update the databound collection from the background thread.

Resources