Video: FORMAT A GRIDVIEW CONTROL IN EXPRESSION WEB

Presenter:Todd Miranda

This video demonstrates how easy it is to modify the visual style of a GridView control in Expression Web. Expression Web provides tools to facilitate setting properties and creating styles without having to write any code. These properties and styles can be used to easily modify the visual style of controls like the GridView control.

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

And Todd Miranda is video to show you how to format a grid view to Marshall s expression web was begin by creating a new website and where choosing general website and will just create an empty website so first they want to do is add a file so will the new ASP X Files for ads that default aspx file and will double click it to open a file up religiously split views to their design view in code view of the same time while recently some data to put into our websites and the first thing I do is read new file a writ import a file or import an XML file and choose okay this is a snowfall had created previously said a word or toolbox will go to her agency that controls data controls


Minute 1

Pixel data source with this create a default name to Excel data source and will choose configure data source and would get the configure data source dialog box for the XML data source only one of these fields is required so will choose the members XML file from our website as a data file if we wanted to modify the date or transform the data prior to buying it we choose transform and we choose a XLT transform file to do that transform if we wanted to filter the data prior to binding and we can do it express expression and filter on it as well would include the data as it is directly into our data source or failing to a data source in a data grid view also is the target of the video so we get a great view and organist at the data source of the grid view if you don t have common tasks open you can do that alright could be clicking this box up in the right hand top corner


Minute 2

Of your control and embrasure common review tasks out what you status or civil issues or XML data source anything that populates the data in a default fashion by creating for bile columns based on the name of the column or the name of the element is in our XML file and now a original data source for the first wonders with the formatting is actually modify the order in the header text for our balance data so again we re going to torque review common tasks in accused edit columns now here are the capability to add additional fields and additional field types of a default we get our battlefields or four of those is the four properties of the objects are in our XML file if we select name we can manipulate the order of the sort of slide that one of parents live that one down Michael


Minute 3

Selecting a column we can go over to his particular properties and we can choose in this case header checks so we double click on header text or we just click and select and we can rename this notice is the text that will be in the header and you see those changes to take place down here of our grid so eschews group color and work to change that to color an active we looks a standby active in their take active and set its header text to active and date joined and will say this is a member sense of the world have appeared to name it will change this to member name by mail is okay if those changes take effect immediately down here in our grid view a number of ways we can format our grid


Minute 4

We can format it and the actual grid view level which is the highest level we can format the particular columns individually and we can do that with properties on the figure elements which also do that with spirals so we look about it both ways of doing this the first thing to do is make sure that our great he was selected when you select the control in your design view noticed that the text is highlighted in the great in the code view everything over here to our tag properties and were a good out here and we re going to set the background color for our grin will set the background color to have a deeper green is that it received an effect immediately now were also going to go down here and let s take a look at the thought of as the overall font for our grid view and were saved that were used by default will use for Donna will select for Donna ever fallen


Minute 5

See that changes everything there until you see things like Petter style footer style pager style if you have a digital should review to allow paging row style selected row style she filled her grid view that you want to allow if you wrote to be selected this is the style of the selected row so let s go into roast style first and will set the background color on our road to be a brown color like that and will leave later thing outside analysts go up to our header row or header style and are personally see something a little bit different so I see what let s set the background color of our header to a deep blue and will set it us fall at list of font color


Minute 6

For color to white shows up better looks good and maybe we ll make the font italic and bold the work and tell a customer to see some differences in the header mail that was good at a lot better than the just plain old white review however if you have a lot of data here you can see have a data mart run together so we go up to and other particular style element in this other fellow is the alternating row style this is the style every other row this way so let s said the style for the alternating row to be simple different open so that way you can see that very dramatically between the rows will help organize roads keep running together when you look in a lot of particular data right so that s how we can


Minute 7

Set a lot of of styles and data grid level if we look at our code will see that we create a row style element that has properties set on a header style element to have some of the properties set on at the alternating row style element in some of the properties that were said are actually up in the grid view its self so he received back color and font names by a distantly sure that we understand let s go into the alternating row style we can override the font information or any of the style information that said the grid view level we can override that at the item level so there you see that every other row with this Arial where as the dark brown router for Donna and the this yellowish brown color is Arial my


Minute 8

So that s how we can set missiles at a global grid view level however we can also set the styles by going into each individual column and setting styles they are so let s go to our common review tasks were to go back to our edit columns and his lists away the member sets column was scrolled out here in its battlefield properties and notice we ve got some similar style to footer style header style and item style solicited the header of our member sets column and in the header for this column were changed and blue color slightly sure change that to a different color and will also said the four color to a dark blue saliva dark blue on the aqua blue for that particular column and in the item s


Minute 9

Often a particular problem we can override the font a end that will set the size for the font to be a little bit smaller little small and its four color will set to a burgundy color right so we go into this particular column we set its item style and its header style to be something specific for that particular column was use okay is it that figure column over the style for that column override the style for the master grid styles and we can see those changes here for that particular problem or they ll again if we look at our code at what we ve done


Minute 10

To these beasts are porting the style sheets that we can apply to multiple pages and share files across multiple pages so how can we apply a style from a stylesheet to either the great view or a particular call a more particular line or particular row with a look that let s go over to our styles pane and we have our apply styles and made styles so as to use new style you can choose new style from either location will choose to sell them bring apart new style dialog box so we call this city was called this active header and really find it not in the current page because that s really the whole what different than applying that at it a long level to reply to a new style sheet and let s see here let s look at that particular problem okay lets that it s back


Minute 11

Color to something may be radically different avenues that yet and will set its for a foreground color to white to the shows of will make the font bold will tell it that it s metallic and will actually put the uppercase let s put this does not do a text transform lets underlying source text decoration open it and it was a false last two extra extra large slowly pretty drastic change so that s good to create a style called active header where do okay really has to do you want to catch the new style sheet is to be created for you to this page and yes one attacks of stylesheet mail we want to go into the edit columns again from our common gravy tasks


Minute 12

Where it s like to be active column and we look to the CSS class for our header stocks with good hair style and reset the CSS class remember when you re in an ASP net client has a very different meaning for ASP net so they use of CSS class to specify the class what we would normally specify class is that for HTML and CSS class in ASP net and will call this active header which is the style we created will choose okay and notice there is our style applied now to our header and nail we could technically if we wanted to and will go in and do this with save the style sheet and yes just leave his default name and site or page now we accept actually right click on this style we can do


Minute 13

A file style and we can change the style here or let s say we wanted to modify the style outside of the particular page we could modify that here so let s just make the fall weight normal will save that go back at a solar bold to see the benefits of stylesheet or we know that obviously we can affect those files remotely in a separate file isolated from the actual page code and it affects every element that uses that s often outside so we say that we can affect the styles at a global grid view level we can look at setting styles that an individual column level and we can do that with both the properties and setting style elements


Minute 14

On it so one trick the water to show you because we did set the background of our data grid to Green if we come out here and we set our cell spacing and reset ourselves facing to two in our cell padding to zero we actually get to see the browsers here s a guess that changes we set a spacing between the sales book that really does is it makes it look like we ve got to grid grid columns and rows as for sacred boundaries turned onto the sea border between all the grids for Canada to cheek way of showing that greeted border by specifying the background of our data grid which is rendered as table okay so we go through all this showing you the hard way to do this there is one other thing that will show you and this is for all of us that do tend to get lazy everyone s a while


Minute 15

I would create a new page and I am just going to go on a cheap little bit and a copy of our XML data source now put that into the latest source here in this figure page and I will then add a grid view was set its data source to a folder source and willingness of the fall columns because we re a know how to modify columns but well I shall use this autoformat if are lazy and we don t want to go to each individual area and said something we don t want to do anything too terribly specific which will make it look nicer if we got this autoformat feature in our common review tasks and this allows us to select a pre formatted style said for our particular preview and you can see the different styles and got available to us here in Boston


Minute 16

Looks and feels and if one of these meets your need and you can just use one of these so will choose something that looks like Syria and they say the Saudi supplied directly they ll all this really does is it just sets the properties that we would set normally an hour are styles so this is a style sheet that you set of properties in line but it does as a default and that it would allow you to go in and tweak this as you saw fit so an easy way to did a generic look and feel but to style art review is not just the standard black border with the white background is in a lot of different palette is always a lot power when you want to style your grid view and remember we didn t have the right one live code we did everything through the properties interface and the controls interfaces are given to us in expression web

Click here to go to original video page