How does the ExtJS4 Column class work? - extjs

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.

Related

Angularjs - Managing high volumes of html in ng-repeat

I have a ng-repeat that generates around 300 rows. I can't implement infinite scrolling since i need all the rows present on the page. For each row there are 3 elements.
When the page loads, i get all the rows from the database and if the element exists i display it, if not i have the option to add it by clicking on the place where the element would otherwise be. When clicked a form is displayed right under that element.
The form has 4 inputs, which is quite a lot of html. Now since we have two-way data binding, and we are inside the ng-repeat isolated scope, i can't use one form for all 3 elements (since the values in the inputs would be shared), i would need one for each. Considering the amount of rows, rendering so many forms takes more than i'd like.
To get a better idea of what i'm working with (visually, the code is not relevant anymore) http://plnkr.co/edit/xNYUbi?p=preview
I want to stick to the form dropdown under the add element option, so making a modal isn't an option.
How should i approach this problem?
I'm not certain I understand the specific use case here so I will give some generic advice that I hope helps. When working with lots of data angular, there are a number of options:
ng-grid: Has an edit mode and paging so with the correct settings you can pull down all your data, set the data source for the grid and the performance should still be pretty good.
ng-repeat: If you have to have a custom U/I or you need additional functions in your U/I, ng-repeat is about as good as it gets. As long as you don't have nested repeats (can be bad) and you craft your UI carefully you should mostly be all right.
Assuming that ng-repeat is still too slow you could think about implementing some form of paging or ng-infinite-scroll. With either option you can still load the entire data set initially and then display it in chunks rather than all at once.
At the end of the day - if the performance is unacceptable when you try to add all the elements to the DOM the only real solution is to alter the way those elements are added or simply don't add them at all (which is where all the above solutions really lead you). This might require talking to your client or going through a bit of re-design, but in the end it should be worth it. Best of luck!

Delphi Handling a large amount of run time created components

Right now I use 2 arrays one of TImage the other of TMemo to draw an image next to text data row after row inside a scroll box.
I am looking to replace the TMemo with several components on a Panel. So probably some static text a button and some labels. But the way I'm doing it now it seems as if this will become messy.
Is there a better way of going about this without writing a component or class. Should I be using some sort of multi dimensional array or can I use a record structure to declare the components and have an array of that?
A record would at least relieve you of the burden of managing lots of parallel arrays, but you can do better than a record, and better than an array.
First, you can design a frame to represent one "row" of your form. Give it an image, button, label, and whatever else you need. Then create an instance of that frame class each time you need one. It will create the components for you automatically. You said you didn't want a custom component, and that's essentially what a frame is, but by getting to design it visually like you would a form, much of the burden of creating a composite control is lifted, so you just get the benefit of a group of related controls that can interact with each other as a unit.
Instead of an array, you might find better success with a different collection object, especially TComponentList which can grow and shrink more easily than an array, and also helps manage ownership of its contents.

Data Entry form layout

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).

is data binding instead of loading data table in my own code a bad practice for a readonly data grid view?

I am using DevExpress GridView here, but I am guessing that the issue is relevant more broadly, at least in the WinForms world of data-driven apps.
At present I am usually doing data binding when displaying data freshly loaded from database and this is also a common practice in the code base I inherited. But, often enough I am unable to format (alter the text) the bound data using format strings, so I end up having to hide the poorly formatted columns, add unbound columns with similar names and dynamically populate them with formatted data from the hidden ones (the previous programmer did even worse, he routinely formatted inside stored procedures, ugh!). I get the nagging feeling that maybe this approach just sucks.
So I am thinking about an alternative - suppose I create my own FormattableGridView especially for the purpose of displaying readonly data. All columns will be unbound and populated dynamically from the data table, while preserving the same column names as the data table itself. If I want to format some columns, some rows or in a zig-zag fashion through the grid, I just do it directly dynamically, because the unbound grid can be messed with just as easily as a 2-dimensional array.
This might sound nice and good, but apparently data binding of grid views (most of which presumably are also readonly) is a pretty common thing. I find it mentioned online all the time. So, are there drawbacks that I am ignorant of to the pattern I delineated above that keep it from spreading? Or is the data binding in itself an unwise pattern in these cases whereas what I described is indeed the better way?
EDITED:
ok, so in part answering my own question, further research uncovers DevExpress CustomColumnDisplayText event apparently specifically intended for unrestricted formatting of databound grids. Perhaps similar events exist in gridview components from other similar frameworks. Ok, so maybe that indeed is the proper pattern, although the event-driven way of handling this issue feels a bit weird.
The grid publishes the GridView.CustomColumnDisplayText event which can be used to format wrongly formatted values. I think, that this is the best and easiest solution for this task.

Excel like FILTER feature in Silverlight datagrid?

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.

Resources