Welcome Guest Search | Active Topics | Sign In | Register

Grid Cell formatting questions Options
Bryan Hunt
Posted: Thursday, April 16, 2009 10:21:35 AM
Rank: Member
Groups: Member

Joined: 3/11/2009
Posts: 24
Hello,

I am fine-tuning the look and feel of some text data in my grid and have a couple of questions:

- I have a static column that has free form text in it, which can be larger that the size of the cell. I wanted to wrap the words and have a vertical scroll bar so that the user can see all of the text. I added this cellstyle:

<CellStyle CssText="padding-left: 8px;padding-right: 20px;word-wrap: break-word;overflow: auto" />

The words wrap fine, and I get a vertical scroll bar as desired. The odd thing is, I get a horizontal scroll bar as well. It serves no purpose with the word wrap on. Is there a way to get just the vertical scroll bar with an "overflow" tag?

- I have a drop down list in one of my columns. Functionally it works perfectly. But, my row height is set to 80px via the ItemHeight tag. I use this cellstyle to vertically center the text in the cell:

<CellStyle CssText="padding-top: 30px;padding-left: 8px" />

This works fine, except when in edit mode in one of the cells. The editortemplate drop-down is aligned at the top of the cell, which really gives the edit process an awkward look and feel. Is it possible to add padding to the editortemplate while the cell is being edited to align the drop-down directly over the cell's data?

Thanks.

Bryan Hunt
eo_support
Posted: Thursday, April 16, 2009 10:47:26 AM
Rank: Administration
Groups: Administration

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

The first question (vertical scroll bar only) is a generic HTML question. So our support will not be able to cover that. The reason that we showed you that before is to help you to get an idea of how any HTML can be used inside a Grid cell. However we won't be able go beyond that to support on generic HTML questions.

For the second question, I believe you can set EditCellStyle, or even modify your EditorTemplate directly to include padding top.

Thanks
Bryan Hunt
Posted: Thursday, April 16, 2009 12:09:22 PM
Rank: Member
Groups: Member

Joined: 3/11/2009
Posts: 24
Well, I have looked everywhere that I can think of to try to find how to set this on the EditorTemplate or to set the EditCellStyle property. Can you show me an example?

Here is the column code:
<eo:CustomColumn DataField="New Lead Status" HeaderText="New Lead Status"
Name="New Lead Status" Width="260"
ClientSideGetText="on_column_gettext"
ClientSideBeginEdit="on_begin_edit"
ClientSideEndEdit ="on_end_edit">
<CellStyle CssText="padding-top: 30px;padding-left: 8px" />
<EditorTemplate>
<select id="leadstatus_dropdown">
<option>Open</option>
<option>Open - Contacted</option>
<option>Open - Needs conversion to Opportunity</option>
<option>Closed - Converted to Opportunity</option>
<option>Closed - Wrong Color</option>
<option>Closed - Library Update</option>
<option>Closed - Didn't Meet Spec</option>
<option>Closed - No Follow-up Needed</option>
<option>Closed - Student Inquiry</option>
</select>
</EditorTemplate>
</eo:CustomColumn>

Thanks.

Bryan Hunt
eo_support
Posted: Thursday, April 16, 2009 12:23:54 PM
Rank: Administration
Groups: Administration

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

EditCellStyle is not on the column. It's on the style set. You can edit style set by right click the Grid to bring up the Grid Editor, then choose "Item Style Sets" and you should be able to find EditCellStyle on any of the style set. Most of the time you would edit the "_Default" style set but you can also have custom style sets. You can check this page for more information about style set:

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

EditorTemplate is a template container. So whatever you do you do with contents inside it. For example, you can enclose your select element with a DIV and set whatever style attributes available on a div element there. Or place some text above your select such as "Please select an option", etc. The point is that you do not touch the EditorTemplate itself because it's just a place holder. The contents is plain HTML. So you can use whatever available in HTML.

Thanks!
Bryan Hunt
Posted: Monday, April 20, 2009 5:17:30 PM
Rank: Member
Groups: Member

Joined: 3/11/2009
Posts: 24
I had to abandon that effort. I could never find a way to get the edit field to "pop-up" over the normal field when the padding-top was set to 30px, it was always displayed at the top of the cell.

My final question is on cell highlighting. Since I have tripled the height of the standard cell, the various default highlights do not cover the full cell. I see that you reference an image URL: CssText="background-image:url('00050202')". I don't understand the syntax of that. Is '00050202' an image file somewhere?

How best to "cover" my larger height cell with a highlighter?

Thanks.

Bryan Hunt
eo_support
Posted: Monday, April 20, 2009 5:27:47 PM
Rank: Administration
Groups: Administration

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

You noticed exactly the right thing --- the number you see is a built-in image and that is the key. I believe it doesn't matter what the height your cell is, the background is provided by that image and it does not stretch vertically. So in order to "cover" the large height cell, you will need to replace that image with an image with a larger height.

You can create a brand new image for that, or you can modify the existing image that you are currently using. EO.Web Controls comes with a large set of "built-in images". Each of these built-in images is represented by a number. There are two ways for you to "extract" the image:

1. Find Images.zip in your installation folder (I believe the default is Program Files\EO.Web Controls 2008). The file contains all image files used by our controls. Unzip that file and find the corresponding image;
2. Open Grid Builder and find the style property that uses this image. Expand the property and you should see BackgroundImage set to this number. Click the drop down button and then click "Export Image". You can then save the image as a file;

Once you have the original file, you can stretch it to the desired height with any image editor. Save the image as new file and then change background-image:url to use the new file and you should be all set.

Thanks!
Bryan Hunt
Posted: Tuesday, April 21, 2009 8:41:48 AM
Rank: Member
Groups: Member

Joined: 3/11/2009
Posts: 24
That worked *perfectly*.

Thanks for all of your help.

Bryan Hunt
eo_support
Posted: Tuesday, April 21, 2009 8:44:16 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Cool. Glad it worked for you!


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.