Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Grid styling

Grid styling Options
Previous Topic · Next Topic
Guest
Posted: Monday, January 25, 2010 11:11:36 AM
Rank: Guest
Groups: Guest

Joined: 5/27/2007
Posts: -34
Hi,

I am trying to style the grid. My code is below - I cannot see anyway of assigning a style class to each column independantly. I require this as the formatting needs to be quite specific.

Is this possible?

Thanks.

<eo:Grid ID="resultsGrid" runat="server" RunningMode="Client" ScrollBars="Vertical" BorderStyle="Solid" BorderColor="Red" Height="200" Width="350">
<Columns>
<eo:StaticColumn AllowSort="true" HeaderText="col1"></eo:StaticColumn>
<eo:StaticColumn AllowSort="true" HeaderText="col1"></eo:StaticColumn>
<eo:StaticColumn AllowSort="true" HeaderText="col1"></eo:StaticColumn>
</Columns>
</eo:Grid>
Back to top
 
eo_support
Posted: Monday, January 25, 2010 11:28:20 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

There are a number of places. You can either edit the Grid's Item Style Set, setting the columns' CellStyle use advanced options such as setting the Grid's StyleSetIDField or the column's StyleField. You also have the option to dynamically change styles on the client side with JavaScript. So there are a lot of options.

This article should give you a good starting point:

http://doc.essentialobjects.com/library/1/grid/styling.aspx

It should give you a basic idea of what options are available. It also explains all the options and should provide answers for general questions such as what this option is for and how to use that option. You may also want to read this and try out the built-in template and samples at the same time. That should help you to see how they work.

Thanks!
Back to top
 
Guest
Posted: Monday, January 25, 2010 11:32:40 AM
Rank: Guest
Groups: Guest

Joined: 5/27/2007
Posts: -34
Thankyou for the link.

Sorry about this but I have another question.

I am filling the grid on the client side and need to dynamically update the text in one of the header cells. (ie change the header cell title)

I am unable to find the javascript reference to do this. I can see how I can edit and update the cells but not the headings themsleves.

Thanks.
Ben
Back to top
 
eo_support
Posted: Monday, January 25, 2010 11:46:42 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You would be on your own for that. :) You can set the column header text to some HTML with an ID and then update it through the ID. For example, instead of setting the header text to "Price", you can set it to

Code: HTML/ASPX 
<div id="price_header_div">Price</div>


you can then use the following code to change the header text:

Code: JavaScript 
var div = document.getElementById("price_header_div");
div.innerHTML = "Sale Price";


Hope this helps.

Thanks
Back to top
 
Guest
Posted: Monday, January 25, 2010 11:59:51 AM
Rank: Guest
Groups: Guest

Joined: 5/27/2007
Posts: -34
Cool - I've implemented a DIV within the header and updating that. Works great.

Still not having much joy with the styling. I'm going to need to do this client side and cannot find the javascript reference to be able to do this.

Any ideas?

I promise I'll stop pestering you after this.

Thanks.
Ben
Back to top
 
eo_support
Posted: Monday, January 25, 2010 12:14:39 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You will always set the style on the server side and then "override" it on the client side. Also you can only override style on the cell level. For example, because you can only override cell styles on the client side, there is no JavaScript interface for you to turn the column header from red to blue (of course you can always use the DIV trick without going through the Grid at all).

To change a cell's style, first get the cell object, then do something like this:

cell.overrideStyle("your_css_rule_name");

This is conceptually the same as cell.className = "your_css_rule_name" except that a lot of other details needed to be taken care of inside the grid.

Because you will almost always rely on styles setting on the server side as well, so make sure you go over the previous link we provided to you. You will also want to go over the following link if you are not familiar with our client side API:

http://doc.essentialobjects.com/library/1/clientapi_howto.aspx

You can find the corresponding content in your local help file. The local version is more updated than the online version (the online version does not have overrideStyle function, but your local version should have it).

Thanks!
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.