Drop down list – client side data binding

What's the deal with the peas?As I was trying today to find an example of how to bind data to the drop down list on the client side with xml-script (and refresh my memory), I was surprised just how few of those kind of examples are there on the internet. So, I’ve decided that in next several days I’ll write a little series with examples how to perform client side data binding with different kinds of controls. So, to kick it off with something simple I’ve chose drop down list.

There are two files that we need for this. First we need our good old default.aspx. On that page we will put the drop down list and the binding code (xml-script). The second file we need is a web service file, in my case named dsTest.asmx. That fill will give us the data that we are about to bind to the drop down. So let’s get the web service out of our way first.

We’ll add a new file to our project. From the list of files we’ll choose the “Web service”, we’ll name it dsTest.asmx and we’ll check the “Place code in separate file” checkbox.

The dsTest.asmx file has one line only and it looks like this :

OPEN CODE IN NEW WINDOW

The dsTest.vb file however, has the code that will give us our data when we request it. Take a look at this class first :

OPEN CODE IN NEW WINDOW

There are two very important things here. A) your class needs to inherit from the DataService class, which is a member of Microsoft.Web.Services namespace. And B) the GetMyData function that returns datatable needs to have it’s DataObjectMethodType attribute set to Select. You would do the same for update, delete or insert, but that exceeds the scope of this post.

Inside the GetMyData function you would typically substitute my code with some code that would return a table from SQL Server database or something like that. To make it simpler, I’ve just created a DataTable and populate it there in the code. I think I may have explained this part of the code, a while back in one of the other posts, but oh well… repetition is the mother of wisdom 🙂

Now, let’s go back to the default.aspx file. First we’ll set up our drop down list, which will contain the names of some people as its text property and email addresses of those people as its value property. When we change the name in the drop down list, we want the email address for that person to appear in a label. Now, all you Asp.NET freaks… we need to use html elements here, not your typical <asp: … kind of thing. So, the drop down list we represent with html <select> element, and label we represent with <span> element. If you ever looked at the source code Asp.NET generates you’ll see that indeed those are html equivalents of Asp.NET controls. So that would look something like this:

OPEN CODE IN NEW WINDOW

And now, last thing we have to do is add some xml-script code so these elements actually do something. The Atlas stuff. Take a peek at the code first and I’ll explain it then:

OPEN CODE IN NEW WINDOW

You’ll notice all the code is located between the components tags. First we have the dataSource component.

DataSource component will get our data. It’s rather similar to the SqlDataSource or ObjectDataSource controls from Asp.NET. First we set the id of this control (I’ve put dsNames). Then we set autoLoad=”true”, meaning that data will be loaded as soon page loads. And last property we set is the serviceURL. The serviceURL property we set to the dsTest.asmx – the web service file we’ve created in the first part of this post. Now, you may wonder how will this dataSource component know which function to call in our web service. Well it will call the one that has DataObjectMethodType.Select attribute, so that explains why was that very important.

Second component we want to declare here is our drop down list. Now, notice that for each html element we’ve created we need to make an atlas representation (so to say) of it inside the xml-script if we want to do anything with it. So we declare select component. We give it the exactly same id as we have to our html select element (this is very important, since that’s how it knows which element it represents). We then set dataContext=”dsNames”. You’ll notice that we named our dataSource “dsNames”, so this is like giving a datasource to this control. The firstItemText property sets the text of drop down for the first item, which is usually some kind of an instruction (like “Please select a name…” or something like that. And lastly, the two very important properties: textProperty should be set to the column name of your datatable that you want to act as text of your drop down item (in Asp.NET that would equal to DataTextField). valueProperty should be set to the column name of your datatable that you want to act as a value of your drop down item (in Asp.NET that would equal to DataValueField).

Next thing we need to define for our select (drop down list) element is the bindings. We set and id of binding that we may need later if we want to rebind this for some reason. dataContext is again the id of our dataSource. dataPath and property properties are set to data. Those two are always “data” if we are binding to some kind of datatable, dataset, array or that kind of thing.

And at the end of this element we’ll define a selectionChanged event. So basically what we do here is tell our select element that whenever selection changes it should invoke the “evaluateIn” method on bndEmail binding. We’ll get later to bndEmail element, so don’t worry about that. The “evaluateIn” method is roughly the same thing as DataBind is in Asp.NET, so whenever you want to rebind some binding you would typically call the evaluateIn method on that binding. And that’s exactly what we are doing here, rebinding every time selection changes.

The last element we have is label (the one that will display the email of the selected person). As you can see the id of this label is set to lblEmail, the very same id as we have set on our span html element (remember, we need to represent label in html elements, so that’s why we use span). We have declared the binding for this label and named it “bndEmail” (we need this id, so we can call “evaluateIn” on this binding every time selection in drop down changes). The dataContext this time is not our dataSource, but rather the selNames – our drop down list. Now, here it gets interesting. We have bound the text property (property=”text”) of our label to the selectedValue property (dataPath=”selectedValue”) of the selNames drop down list (dataContext=”selNames”). As you can see, data binding in xml-script can do a lot’s of things, not only get data from database.

I’m tired now. My mouth is dry. I hope it was worth it and you’ve got at least something out of this post.

Ahh yes, the whole project you can download from reBlogger lab.

p.s. What’s the deal with the peas? Well, I hate posts without images…


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


Advertisements

Smart link

Smart link
Ok, there is no such think as smart link (as far as I know). I’ve just made that name up. Lot’s of times, I want one link to do several things, depending on what user decides. Putting a whole lot of links that do almost the same thing, with some small difference is not an option because it a) confuses users and b) most of the time, there is not enough space on the screen to do that. So, thanks to AtlasControlToolkit HoverManuExtender this idea become very easy to implement with absolutely no need to know dhtml, which used to be the only way to do these things before (and not a very good way if I may add).

So I’ve created a small form for this example that fakes saving people you know to some list. Basically I want to give users 4 options – 1 default and 3 optional. When you enter first name, last name and email of a person that you know, you can save that to the default list “people I know” or optionally you can save it to the lists “friend”, “enemy” and “potential friend”. I know that this example is moronic in its very nature, but hey, I’m a developer, not a screenwriter.

So first I’ve added my form.

OPEN CODE IN NEW WINDOW

Then I’ve added a default LinkButton, that when clicked will add the data to the default list “people I know”. However, as soon as you hover over that link, three additional links will appear “Add as a friend”, “Add as an enemy” and “Add as a potential friend”. Clicking any of these link will invoke the appropriate method assigned to their onClick event. Pretty easy.

OPEN CODE IN NEW WINDOW

Let’s examine a bit the HoverMenuExtender or better to say it’s list of properties HoverMenuProperties. First we have TargetControlID property, which determines which control (and it can be any control, not necessarily LinkButton) when hovered over will display the additional links. You can think of this property as ID of your default link. Second, property is HoverCssClass, which basically sets the class of that default link when hovered over. I’ve tried doing this through pure css (a:hover kind of thing), but by using HoverCssClass your default link will keep the “hover” style even when you move to the submenu (not the case with doing it with pure css). So, use HoverCssClass. Next property is the PopupControlID, which simply determines which control holds your submenu. In my case it’s the pnlAddOptions panel, which holds the three additional links. Last property I’ve used is PopupPosition, which hmmm… (I feel so stupid explaining these no brainer properties), determines on which side relatively to your default link, will the submenu appear.

You can download the whole project from reBlogger lab.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


How to get Atlas and AtlasControlToolkit controls in your toolbox?

VS tabs
Ok, perhaps there is a lot of you guys who read the book from the first page to the last page. I don’t. Therefore, more than often I miss all those great little tips and sometimes even fundamentals. So, for all of you like myself, who fastforward to the first working example in every programming book, this is a thing you may want to know.

Drag and drop toolbox controls for atlas (Visual Web Developer 2005)

1. Add a new tab to your toolbox (actually two of them, one for Atlas controls and one for AtlasControlToolkit)

To add a tab, click right mouse button under the tab named „General“ and press „Add tab“. The textbox will appear and there type the name of the tab (e.g. Atlas). Do the same thing for the controls for Atlas Control Toolkit.

2. Add controls to your tabs.

Under the new tabs you’ve added, you’ll see text „There are no usable controls in this group. Drag an item onto this text to add it to the toolbox“. Click with your right mouse button on that text, and press „Choose items…“. To add controls for Atlas press „Browse…“ and find the Microsoft.Web.Atlas.dll (from the folder where you have installed it). Then do the same for the AtlasControlToolkit, but then choose AtlasControlToolkit.dll instead.

Ok, very simple, very basic… but also very usefull.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


ReorderList control

Reoder listIn past I have developed at least 2 or 3 javascript/asp.net controls that were more or less successfully representing a reorder list of items. So, user would be able to drag and drop items in the list and in doing so change their order. When I saw this control in the AtlasControlTooking I’ve became very excited and decided we’ll improve our keyword management page in reBlogger. Well… we probably will, but not just yet. ReorderList still does not work together with UpdatePanel, but seems like it will in the next CTP… Anyway, since I’ve spent half an hour playing with it I just may show you how it works without update panel.

I guess, the reason why page reloads after reordering was by design and not a mistake. To quote atlas.asp.net : “Rather than extending existing controls on the page, it delivers a rich client experience directly and still has a traditional post-back server model for interacting with the application.” I’ll spend some more time with this control in the near feature (namely trying to make nested reorder lists working), so I’ll be writing more about this.

So, to get this working you need to create a new website from “Atlas website” template. You know the drill by now. Create a datasource (I’ve used MS Access… just to make everything even more fun 🙂 ). The example you’ll see crudely resembles to the keywords table in reBlogger. Here is the code for datasource, though you’ll probably make your own. Any datasource will work. IMPORTANT! – if you are going to allow reordering, your datasource needs to have UpdateCommand enabled. Obviously, when ReorderList changes the vaues of the SortOrderField, UpdateCommand will come in handy :).

OPEN CODE IN NEW WINDOW

Next thing you will do is add the ReorderList control. There are 3 VERY IMPORTANT properties you need to set here (most of the forum questions about ReoderList I’ve stubled upon are due to the one of these 3 properties not being set).

1. DataKeyField – this is the primary key of your table. In my case, that was KeywordID
2. SortOrderField – this is the integer(!) field in your db table that holds the order of the items. Don’t forget to add this field in your database and to set this property
3. AllowReorder – hmmm… set this to true, or you’ll end up with just another static list 🙂

OPEN CODE IN NEW WINDOW

So that’s it. It works, but every time I’ve reordered the list page refreshed. I don’t like that. I’ve tried to put the ReoderList in an update panel, but as I’ve said, currently those two are not very nice to each other.

The whole project you can download from reBlogger lab.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


The accordion control (ACT)

 

AccordionFew months ago, when I was building the first version of reBlogger.com (it’s been slightly redesigned now), I had to cram 5 paragraphs of the text describing reBlogger and its features on the home page. After trying out different things, I’ve decided I’ll use the accordion style control and list only the paragraph titles, so when user clicks on any of these titles, the paragraph would appear. Back then, AtlasControlToolkit did not have Accordion control, so I had to do it by myself… javascript, css, 3 cups of coffee and one afternoon was what it took.

Now, I’ve just found out that in AtlasControlToolkit there is an accordion control. I decided I’ll give it a try and recreate the accordion I created back then. It took me altogether some 15 minutes and the end result is way simpler, easier to modify and well, faster then the one I’ve built. So here is how it works.

First thing I’ve done was to create a new web site from “Atlas Template” in Visual Web Developer.

Then I’ve created the Accordion Control, part of the Atlas Control Toolkit. The accordion control serves as a container for the AccordionPanes, which each hold a certain paragraph in my example.

OPEN CODE IN NEW WINDOW

You will notice here, some of the peculiar properties, so let me explain them. SelectedIndex property sets which pane will be displayed first. If it’s 0, then the first one will be displayed, 1 would show the second pane etc. (0 based index). The panes are indexed in the way you’ve inserted them. AutoSize property indicates how will accordion control size. If set to “none”, the accordion will grow or shrink with no restrictions at all, if you set it to “limit”, the accordion will never grow larger than the height you specified (the scrollbar will appear), and lastly you can set it to “fill”. When set to “fill”, accordion will always have the exact size as the height you’ve specified. Content will be shrunk or expanded to match the height of the accordion. HeaderCssClass and ContentCssClass respectively set the css class for the header and content templates of each “AccordionPane” (open the next code example, to see how AccordionPane control looks like). FadeTransition can be set to true or false, indicating whether “AccordionPane” will just disappear when new pane is opened, or will it fade out. Lastly, “FramesPerSecond” property determines how fast will accordion panes switch. The higher this number is, faster will panes switch.

Next, and surprisingly the last step was to insert inbetween the opening and closing tags of the accordion control, any number of accordion panes I wanted (I inserted 6 panes, one for each paragraph).

OPEN CODE IN NEW WINDOW

There are really only two things to explain here. The header part holds the content you want to be in the header (duuuh…), in my case this will be the title of the paragraph. The content part contains… hold your breath now… the content of that pane. In my case this is the actual paragraph. And that’s it.

You can download the whole project from our reBlogger lab.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


Back from vacation

Rab, Croatia
As you may have noticed this blog has been really quite for last two weeks. Namely, I was on a vacation at the gorgeous island Rab, Croatia. It was very relaxing… soaking up the sun and just taking it easy. I was not online nor did I bring my cell phone. So, I hope you had nice summer as well (those of you from north hempisphere at least). Anyway, as of today I’m back in the loop. Sorry for not letting you know beforehand about this. Oh… by the way this is the actual picture of the place I went to. 🙂


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


Prevent users from doing stupid things. Like setting their computer on fire. Fire… mmmmm.

Don't play with matches!Ok, not that you will provide your application with features like setting someone’s computer on fire, but lot’s of time you may need to provide those buttons titled „clear all“, „remove all“, „delete everything“. Making sure that’s what user really wants to do can save a lot of time and anger to your users. For ages, windows based applications had these „are you really sure…“ modal pop ups. However, to do that with asp.net was traditionally a bit of a problem. You would usually need to implement javascript and then make client side script communicate with the server side.

Luckily, this is really, really simple now. All you need to use is ConfirmButtonExtender that comes with Atlas Control Toolkit. So here is what you do. You make you application, just as you would do normally. You have a button that will do something when clicked. The only difference is now that you add a new control, namely, ConfirmButtonExtender. This control has two properties : TargetControlID (the ID of the button which does the operation that will be confirmed) and ConfirmText (the message that you want to ask your user, something like “are you really sure you want to do this”). Here is the code :

OPEN CODE IN NEW WINDOW

The whole project you can download here from reBlogger lab.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”