I have been given a task of creating a common Gridview component which has following features:
Paging
sorting
Filtering
The objective is to reuse the component in almost all the web pages (.aspx), so that the look and feel, layout and behaviour remains uniform across the web site.
The grid has to be lightweight, preferably ajax based. I had several thoughts in mind:
extend the current asp.net Gridview component.
Implement a very own custom solution with ajax method pulling data, rendering happens on client side using some jquery templates..etc.
I am not sure where to start with. The requirements i have been give just says that create a common Grid component so that all others in my team can re-use the same component .
Please give me insight into which way I should approach the implementation so that in future this component is scalable as well as in the near future its re-usable across the site.
The jQuery plugin datatables.net is very light weight and has all the features you need. You could use that.
No need to reinvent the wheel, there are tons of opensource and pay grids out there to do what you wnat - Check out this grid (with complete source). One of the nice features is that you can add a toolbar which you could use for your filtering.
http://jqmvcgrid.codeplex.com/
I'm a pretty experienced Flex/.NET developer who is now learning html5/javascript. I've been playing with Ext Core and ExtJS for the last few weeks and I'm interested in whether/how folks are using these libraries to do bi-directional data binding on data that is not list based.
It seems like most of the binding support is directed at binding rows of data to grids. I'm interested in binding UI elements to arbitrary POJOs that are not list-based data.
Maybe I'm just not looking in the right places, but I'm not finding support for this.
I'm really interested in hearing what folks are doing in Ext OR what folks recommend as an alternative.
Although there is no out-of-the-box solution like the #Bindable from Flex for example, Extjs does offer the infrastructure to create bindings.
If you have a look at http://blog.dnet-ebusiness-suite.com/2012/03/data-binding-in-extjs-4-grid-form.html you'll see a demo for this where the models (filter instance and record instance, instances of Ext.data.Model managed or NOT managed by a store) are bound to different views. The functionality is achieved with a thin framework built on top of Extjs.
On the other hand, to bind arbitrary POJOs is exactly the same story, those have to implement an Observable and fire themselves some property change events which can be listened. The blog posts and the framework itself gives a good starting point on how to do this.
Another way/concept is http://www.sencha.com/forum/showthread.php?60809-Ext.ux.data.BindMgr-Databind-Manager which i used with extjs 3 and works fine.
A follow up... I never did find an ExtJS approach and moved on to other js frameworks/approaches and along the way learned about knockout: http://knockoutjs.com/ which is pretty darned awesome!
Are you looking for the BasicForm functionality? (Particularly: loadRecord)
If you want readonly display you can use DisplayFields or disabled TextFields or similar.
Take a look at jQXB , http://www.jqxb.altervista.com. It's seems to provides a very easy and powerfull api to bind data with html elems
I'm currently building an application that is presenting tabular (fetched from a webservice) data and have squirted it into a datagrid - seemed the most obvious way to present it on screen.
I've now come across a few limitations in the datagrid and wonder how I might move forward. As a relative newcomer to flex development I'm a little lost.
A few things I am wanting to do.
The data is logically split into groups and I would like to be able to have subheadings in the grid whenever I move to a new group.
I would like to be able to highligh individual cells based on their content relative to other values in the row - ie highlight the cell with the highest value in the row.
Is this possible with the standard datagrid?
I'm actually using the try-before-you-buy version of flex builder at the moment but I have ordered Flex Builder 3 Pro - which is on its way to me. I understand there is an 'advanced datagrid' control in this version - perhaps that will support some of what I wish to do?
Alternatively - is there another way of building custom tabular data?
stay the hell away from Adobe's AdvancedDataGrid. You will learn quickly it has many shortcomings, you will think you are better than it and override a few things here, tweak a few things there, but in the end the ADG will absolutely destroy you. Heed my call and avoid this at all costs. The ADG was outsourced by Adobe to their failed Indian team that has sense been disbanded, it alone counts for over %30 of the entire flex framework, and their are horrible deeply rooted issues that are better off starting over at this point. STAY AWAY FROM THE ADVANCDEDDATAGRID AT ALL COSTS!!!!!
The DataGrid is the best bet for that, but also check out the AdvancedDataGrid (here are some AdvancedDataGrid Demos with Source from FarataSystems).
(source: flexicious.com)
Both the DataGrid and AdvancedDataGrid are notoriously hard to customize, and everything you'd like to do is pretty advanced, so it will take a while to get going, but you can do it eventually.
There's no other way to build tabular data unless you start doing some advanced things with some of the data visualization libraries out there.
Good luck,
Lance
I have a requirement to implement a "simple" web-based form designer that allows "simple" users to create their own web-based forms. I've come across these things in rich clients, such as Outlook and Acrobat, but my requirements are much simpler and must be web-based.
Pretty layout, custom validation, complex fields and types are simply not a factor. Ideally I would like to find something that is neat like this very SO question composer, in which I'm typing right now, plus the ability to drag a text input box or a checkbox right into the text. Output could be as crude as this:
What is your name? [Fred Bloggs]
Do you have an internet? [x]
I'm using asp.net but the backend technology doesn't really matter as I fear this is all javascript! No need to consider old browsers. Any examples links would be helpful, as well as suggestions for existing open or commercial components. Thank you!
Tried Frevvo ?
Here is a pretty neat one based on jquery Ajax Form Builder
Try FormThis. It allows you to create an Online Web Form at no cost. Drag & Drop designer, Unlimited Fields, Submit/Responses, Calculations, Validation, etc. Can output to PDF if required.
Looking for some direction here as I'm running into some migration problems.
We have a legacy application. The 'infrastructure' is running just fine. Business logic and data access layers written in VB calling SQL Server for the database.
I have a LOT of experience writing Winforms (desktop) application and have had no problems. However, the last time I wrote any ASP.NET stuff was in 1.1 (VS.NET 2003).
Among other things, for ASP.NET 2.0 and up, the Grid layout is gone. It's not just a simple case of dropping controls on a form, aligning them, ordering them and working with the code-behind anymore.
The new web-based application is starting out pretty simple. Just a common header (already made a user control for that) and footer with your typical CRUD functions in the middle.
I tried being 'intuative' in using a master page with content place holders but I couldn't get the placeholders to "grow", to say nothing of not being able to put a text box where I wanted one. Oh, I found the option in VS2008 to allow absolute positioning but it only worked for SOME controls - others I had to manually edit the asp tags.
Then I saw examples using div's and tried to implement them but I ended up with results that had objects writing on top of each other. The online help wasn't helpful to say the least.
Does anyone know of a good book, website or tutorial that can give the basics of what I'm looking for? In practice, I'm looking to make simple pages where some objects may have to push others gurther down the y-axis (as in, several comments being made and that section would push the section listing the 'attachments' down further). I have no trouble when it comes to all the other aspects of this application. It just appears that my webforms skills are about 3-4 years out of date.
This isn't going to be some fancy flash/silverlight application - just simple 'data maintenance' to get rid of some ugly and bug-prone processes involving reading common mailboxes and decoding Word files. The new goal is to have a nice weborm with proper validation.
I guess what I'm looking for is a "Webforms for Winforms programmers" book or site.
Help!
Thanks in advance.
The best advice I've heard on learning to use html/css layout goes something like this:
When building a new page, don't try to get all fancy up front. Start by building a very basic, text-only page. It should look like something from 1996- that brief period where everyone had just discovered the web but had not yet started using the table tag for layout- only no comic sans font. Don't use images at this point, unless the image is genuinely a part of the information being conveyed (as opposed to the window dressing to make it look pretty: you can add those later). There will likely be an h1 at the top of the page, and give each sub heading an appropriate hN, but at this point there shouldn't be any layout information in the page at all. The only place you'll have a table tag is if you genuinely have tabular data to show. If it helps you write this code then you can wrap everything in old-fashioned <center> tags for now- just don't forget to remove them later.
Now let's start tweaking the markup a little. Use things like ul (unordered list) for your list of navigation links and label/legend to identify and group your form areas. The general idea here is to have each element on the page encased in the most appropriate html tag, and to use the full set of available tags- each for it's designated purpose.
At this point you have a page that is ideally suited for a screen reader or search engine. By building this page first, you have made SEO and accessibility compliance easy on yourself. Of course those aren't the only requirements, so we're not done yet.
Now you need to identify the different sections of your page, from both the layout and logical perspectives. The page should largely already be divided logically, but you may find a few places where the normal tags don't cut it. You'll also want to group certain elements for layout reasons. Encase each of these areas with a div tag, and give the tag a class name that refers to the purpose for the tag: the group your are creating. This is just another case of using the a tag (the "division" tag) for it's intended purpose. Also, since elements can have more than one class, you may want to think about also grouping your classes logically. For example, you might want to have a separate class that distinguishes the site template from the rest of the page.
By and large this should not have changed the appearance of the page, but now you have something where it should be very easy to start adding styles. At this point you can now start adding images and layout. The goal here, though, is to change the actual markup as little as possible. If you can manage it only add ids and classes, though you will likely need to add an additional span or div that you had not identified earlier, and sometimes you'll need an extra block level element to force a compatible layout across browsers.
If things are done correctly, the result is a page that not only looks good, but is also easier to work with when testing across browsers, will naturally degrade well when a style or javascript feature isn't supported, and scores well for SEO and accessibility. This also makes it easier to have a developer build a simple page that provides a certain level of functionality, which they can this pass off to a separate designer to make it look good.
You may also want to check out A List Apart. This is a great website with lots of "tricks" for using CSS to layout things on the web along with lots of other web oriented content.
Grid positioning was an abomination for websites. Sure it made for an easy transition from those familiar with the WinForms designer, but it produced horride HTML that is nearly impossible to maintain.
The very best resource I can recommend to you is CSS Mastery. You'll need to learn HTML and CSS, but they're quite easy to get into.
By the sounds of it, you're looking for a crash course in HTML ?
the "Design Canvas" of an ASP.NET aspx Page & ascx Control is just HTML tag markup.
If you've no web design experience, I'd recommend starting somewhere like
W3Schools
When Microsoft gave us ASP.NET, they tried to make programming websites, more like programming rich client applications. However, there are a lot of issues you have to deal with, the major one being statelessness, when developing for the web that don't exist when developing a thick client app (WinForms). So the first step is to not think of the two as similar in anyway.
The drag and drop tools are nice, but what you really need to understand is HTML and client server models. HTML will help you understand how things are getting laid out, and client server models are important to understand how data gets to and from the web to the server. If you have developed in ASP.NET 1.1, then things really haven't changed for 2.0. The concepts are the same, just some of the provided controls have changed.
A lot of people were really unhappy with the grid-based layout from 1.1, because it didn't really work in a number of situations. It still has to ultimately render as html, and html just isn't suited to that kind of layout. For example, things might not be ordered properly or pushed off the screen for mobile browsers (iPhone, etc). There's also things like screen readers for the blind. If you work for the government, that 2nd item is a legal requirement rather than just a nice-to-have, and there are a lot of developers who do work for the government.
So ASP.Net 2.0 tried to generate markup that's at least a little nicer for html. The downside is that you actually have to understand html layout now. But, c'mon: you're building a web site. If you can't handle a little html you're in real trouble.
My advice to build one static page using something other than visual studio. Use <input tags rather than server controls on that page and don't actually implement any logic. Use it to understand how your layout will need to work. Once you have that down, it's really easy to duplicate that for your pages in Visual Studio.
This doesn't really belong as a separate answer, but I wasn't sure you were likely to see another comment to my response above.
The normal behavior of all block-level elements, including divs, is for each new element to appear below the previous element. It sounds like you've set position:absolute; on everything, perhaps while playing with the Grid-based layout option in visual studio. Don't do that- it's hijacked the expected behavior and that's why you see everything piled on top of each other.