Video: How Do I: The AJAX Toolkit Reorder Control

Presenter:Joe Stagner

In this video I will demonstrate the use of the reorder control that ships with the AJAX toolkit. The reorder control lets you present to your users a list of data items that can be reordered as the user prefers.

The following text is a software generated transcript of the video. Click on a minute link to jump to a location within the video


Minute 0

Will seal s use controls use the Microsoft execs control children control lets you present users with a list of data items that use their mouse to drag and drop those items into any sequence of daylight so this is a great way to provide the user with the ability to do things like select the order of most to least preference in a collection of items or perhaps the the sequence of steps in a workflow for example but basically you can use the reordered control to allow user to define any type of item sequencing is appropriate for your application suit to get started is always a far out on the free version of visual Web developer express create a new Ajax until toolkit enables website in the first of them do it

Minute 1

Is going to as often due to include the images folder and a CSS file and then dragged a CSS file out of the solutions Explorer and into the header section of my default aspx page so that I can use the classes are defined therein now what is running ET is the reward of control is her new data source and this is where the items that are displayed in the reorder of the list comes from now and in our case and to use these files which are represent a SQL express database but basically you can use data that is accessible from any are positive arias was accessible through a data source control object so I could be in 80 yeah save a SQL database in some other database or perhaps Excel file I m antics of a XML file or basically if you could even a create this list of items manually just expose them through a data source object

Minute 2

So month because SQL threats files drop me to my data fully here and just to overwrite the default ones that are that are already there and I m not over to design mode by default aspx page of endless existing undo is just a just have a little text for guidance let s differentiate that with italics etc do is bound together in my toolbox to my indexes digital sound and grab an update update panel dropped on the page then go down at the Ajax control told Kit a tool to panel which a wee manually created since there s no installer for the objects controlled focus on the grabber reorder was controlled to get out of the toolbox and drop amounts of money it onto my page inside the update panel of the systems it did

Minute 3

Elephants will get only exists because we chosen toolkit template type of problem but had not now note that at week to select the data source so now let s go and configure one or we re going to user database call will just leave the SQL source one to create a connection to and were to use a SQL Server database file so will select the database MDF file which is in or at their folder quintessence connection objects or video ahead and move forward processes into a save the configuration information in our hot web config file which we certainly do so for him to that and just let the items of the selected selects select all four items and also we have here is in the items that are bitter will be usable in the list of items that the user will drag and drop and reorder

Minute 4

He item ID title description priority also Chlamydia status and will generate insert update and delete sicknesses while this is test query matured and works Excellency to see that a few tasks are already predefined a database and so the databases are obviously not very complex is enough to represent the items in the career list that we re going to be working with a pack ballot talk over in source mode and start to outrun our application is suited the SQL data source and generated for us using the tool and here is our reorder list so is short of the naming Iraqi panel to be UB for update panel one and that we can configure our reorder list your going to use my preferred a argument formatting mechanism of

Minute 5

All of the control specific arguments being bottle wine onto themselves and so by default week that the SQL data source in place and post back on reorder is false we don t we really want to do a post back on reorder we want a lot just to let the user may color changes they want to show them we can not take some other action going to server side programming like clicking on on a separate button or what have you so next let s to add some references to the CSS classes included with her about CSS file so it spent in the Senate of the visuals so was

Minute 6

Found that specify a drag handle a warning that Mrs can specify a word where the threat handles can be wish of the drag handle is contributed here and for those on the left side is fixer formatting in little bit round item insert location and with such that to the beginning and so we insert into items are wanted for the beginning need to specify an a daily key field and this will be one of the fields in the table of the data source or using sonar case could be

Minute 7

Item ID which is the first field in her table and there are specify what Litchfield will determine the sort order of police priority and so they can be sorted based on priority was to specify a width for this collection of items to make a 400 pixels for so if any a width that will contain all of the items that were in display doesn t I want to do is come inside his content template I m going to added give and to assign a class that give

Minute 8

Must pick up some visuals from our CSS or CSS class that we include with the success while it in the name that I ve got plenty to take this take this data is and is actually wants to be inside the content template grabbed the closing portion of that give an go down suggests after the show at the end of the reorder list this year we can it s going to look at to notice that still because Lott is a generator runtime

Minute 9

We ll see the details yet now inside are reordered lest we now need to have an item template and that s back this up a little bit we re also going to defy an edit item template Philip Shelby s out a reordered template a drag handle template and insert item template and now we can go in flush these out one of the so the first fiduciary

Minute 10

Love Haddad gives her to pick up some styles from a CSS class and was told that by the area of any organizers add a couple controls so let s fighter toolbox and you had just simply to label controls with Senator open or standard controls on the label at one bad a second one and am going to use the axonal shorthand for these controls okay now this is

Minute 11

Display the values from the the table in our data source and so are some very do here is I m going to a use HTML encoding from two make sure that we re service using good programming practices here Casillas lets do this Soriano graphs in the grab some texture and somebody is AGP utility and HTML encode

Minute 12

Convert to strain in AL in a very looking at the title there in should do it him into a similar thing with our second label only as a title run after its description in

Minute 13

Okay yeah so that will serve as our item template now it s will enter edit template and edit template is where no allow the user to make changes so let s go in inside edit template here really need basically a really nifty text boxes so that one to three text boxes this allows to edit each of the three fields and then a pajama memory is the use the shorthand versions of XML here so it really useful closing tags

Minute 14

A and for each need to specify the tax and so to say blind to title for the first of and then we ll do similar bindings for each of the remaining two so I m going to description and priority okay

Minute 15

Next we ll will specify our reorder template do that would include a for a little panel is find a panel control and let s just add a success glass here in the name of a CSS class in our style sheet of CSS file is readable and reordered queue and caring next drag handle assists for distributive so

Minute 16

Site gives and in our style sheet of CSS file you have a class called right handle it okay and lastly to our insert item template so here_new ideas and Suharto is the style here in Colorado proto distract us out of the phone out into Macias is filed and forgotten to do so so will say padding left 25 pixels on a

Minute 17

Border bottom and a solid quarter ball into a border bottom thin solid transparent okay site gives Jackson and even if the panel still is grab another as is the panel dropping inside that is of a hand them inside the panel was given default button default buttons can be just

Minute 18

11 are now inside a tale as Glenn at three controls cell is said to come inside that panel was said a text box and a button and let s add that we got a required field validator here against a soda was not bothered to that you d probably do one finds some of them feel validation to the fields that will be required for a to do list item if you re emulating this this demonstration

Minute 19

So for our text box that he do binding and so let s use the magic of cut and paste and an invite to the title and for this button so it s run a server what s specify a command name and are our command name here is the insert is where the adding a new item text equals bad okay let s go ahead and fire up our application

Minute 20

The books I committed a coding error string constants must end with to change the you know that okay strut again so we should see here is our list of items so these you will you recognize these elusive items that were on a retreat from our database notice maybe I want to to do more stuff first so I can grab the drag handle notice the dragon was that little area of the specified in our case is to did you image an error basically what everyone is just HTML content selecting use drag and drop to receive as these

Minute 21

And I can now add an additional item sold so you click twice I added two of them so it as it sat easy to use the reorder list this can be a great way for you to not always allow user to use visually intuitive drag and drop mechanisms for a crook creating a sequence from this list of items but also to add their own items in you can physically list is coded in extended to your heart s delight so at the outlets useful to use the the reorder controller ships as part of Microsoft execs control to look at and role

Click here to go to original video page