|
Rank: Member Groups: Member
Joined: 3/11/2009 Posts: 24
|
Hello,
I need to add a grid to my page. As I was looked at the documention for the EO grid, it looks as if the Grid control will not autosize (row height) for multi-line text, nor will it give a vertical slider to scroll through the multi-line text.
Is that correct?
Thanks.
Bryan Hunt
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi,
Our Grid is a fixed row height Grid. So it will not autosize for multi-line text. However because Grid cell text are HTML, you can format the text to include an overflow:auto so that scrollbars are automatically added if necessary.
Thanks!
|
|
Rank: Member Groups: Member
Joined: 3/11/2009 Posts: 24
|
Okay I am working on that.
On my first attempt at an EO Grid, I find that I have two problems: - No data appears in the grid. The number of rows is correct, but the cells appear to be empty. - My datarow columns are offset from my headerrow columns by what appears to be about 40px. I don't want a column for "row number", is it somehow still showing in the grid?
Here are the grid and page_load code:
#region Create load dataset DataTable dtLeads = new DataTable("dtLeads");
dtLeads.Columns.Add("Lead ID", System.Type.GetType("System.String")); dtLeads.Columns.Add("Project Title", System.Type.GetType("System.String")); dtLeads.Columns.Add("Samples Ordered", System.Type.GetType("System.String")); dtLeads.Columns.Add("Sample Order Date", System.Type.GetType("System.String")); dtLeads.Columns.Add("Current Lead Notes", System.Type.GetType("System.String")); dtLeads.Columns.Add("Current Lead Status", System.Type.GetType("System.String")); #endregion
DataRow myDataRow = dtLeads.NewRow();
myDataRow["Lead ID"] = "1234"; myDataRow["Project Title"] = "A project title"; myDataRow["Samples Ordered"] = "a sample order"; myDataRow["Sample Order Date"] = "04/01/2009"; myDataRow["Current Lead Notes"] = "Some Lead Notes"; myDataRow["Current Lead Status"] = "A lead status";
dtLeads.Rows.Add(myDataRow);
Grid1.DataSource = dtLeads; Grid1.DataBind();
<eo:Grid ID="Grid1" runat="server" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" BorderColor="#7F9DB9" BorderWidth="1px" ColumnHeaderAscImage="00050104" ColumnHeaderDescImage="00050105" ColumnHeaderDividerImage="00050103" FixedColumnCount="-1" Font-Names="Tahoma" Font-Size="8.75pt" GridLineColor="220, 223, 228" GridLines="Both" Height="200px" Width=100%> <FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" /> <ItemStyles> <eo:GridItemStyleSet> <ItemStyle CssText="background-color: white" /> <ItemHoverStyle CssText="background-color: whitesmoke" /> <SelectedStyle CssText="background-color: #316ac5; color: white" /> <FixedColumnCellStyle CssText="border-right: #d6d2c2 1px solid; padding-right: 10px; border-top: #faf9f4 1px solid; border-left: #faf9f4 1px solid; border-bottom: #d6d2c2 1px solid; background-color: #ebeadb; text-align: right; color: black;" /> <CellStyle CssText="padding-left:8px;padding-top:2px;white-space:nowrap;" /> </eo:GridItemStyleSet> </ItemStyles> <ColumnTemplates> <eo:TextBoxColumn> <TextBoxStyle CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8.75pt; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; FONT-FAMILY: Tahoma" /> </eo:TextBoxColumn> <eo:DateTimeColumn> <DatePicker ControlSkinID="None" DayCellHeight="16" DayCellWidth="19" DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True" SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL" TitleRightArrowImageUrl="DefaultSubMenuIcon"> <TodayStyle CssText="font-family: tahoma; font-size: 12px; border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" /> <SelectedDayStyle CssText="font-family: tahoma; font-size: 12px; background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" /> <DisabledDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" /> <PickerStyle CssText="border-bottom-color:#7f9db9;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#7f9db9;border-left-style:solid;border-left-width:1px;border-right-color:#7f9db9;border-right-style:solid;border-right-width:1px;border-top-color:#7f9db9;border-top-style:solid;border-top-width:1px;font-family:Courier New;font-size:8pt;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;" /> <CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma" /> <TitleArrowStyle CssText="cursor:hand" /> <DayHoverStyle CssText="font-family: tahoma; font-size: 12px; border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" /> <MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px" /> <TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" /> <OtherMonthDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" /> <DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid" /> <DayStyle CssText="font-family: tahoma; font-size: 12px; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" /> </DatePicker> </eo:DateTimeColumn> <eo:MaskedEditColumn> <MaskedEdit ControlSkinID="None" TextBoxStyle-CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; font-family:Courier New;font-size:8pt;"> </MaskedEdit> </eo:MaskedEditColumn> </ColumnTemplates> <ContentPaneStyle CssText="border-bottom-color:#7f9db9;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#7f9db9;border-left-style:solid;border-left-width:1px;border-right-color:#7f9db9;border-right-style:solid;border-right-width:1px;border-top-color:#7f9db9;border-top-style:solid;border-top-width:1px;" /> <GoToBoxStyle CssText="BORDER-RIGHT: #7f9db9 1px solid; BORDER-TOP: #7f9db9 1px solid; BORDER-LEFT: #7f9db9 1px solid; WIDTH: 40px; BORDER-BOTTOM: #7f9db9 1px solid" /> <Columns> <eo:StaticColumn AllowResize="False" HeaderText="Lead ID" Name="LeadID" Width="200"> </eo:StaticColumn> <eo:StaticColumn AllowResize="False" HeaderText="Project Title" Name="ProjectTitle" Width="200"> <CellStyle CssText="" /> </eo:StaticColumn> <eo:StaticColumn AllowResize="False" HeaderText="Samples Ordered" Name="SamplesOrdered" Width="200"> </eo:StaticColumn> <eo:StaticColumn AllowResize="False" HeaderText="Sample Order Date" Name="SampleOrderDate" Width="200"> </eo:StaticColumn> <eo:StaticColumn AllowResize="False" HeaderText="Current Lead Notes" Name="ExistingLeadNotes" Width="200"> </eo:StaticColumn> <eo:StaticColumn AllowResize="False" HeaderText="Current Lead Status" Name="CurrentLeadStatus" Width="200"> </eo:StaticColumn> </Columns> <ColumnHeaderStyle CssText="background-image:url('00050101');padding-left:8px;padding-top:3px;" /> </eo:Grid>
Thanks for your assistance.
Bryan Hunt
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi,
You have no data in your Grid because you did not set the column's DataField property.
As for the 40px offset, I would recommend you to try the code in a blank page. It can be caused by your CSS file. We tested your code at here and the header columns and the data columns are correctly aligned.
If you do not want a row number column, you would simply remove any RowNumberColumn from your Columns collection. I see you do not have such a column, so that is correct. I do see you set FixedColumnCount to -1 though. That is an invalid value and will cause the Grid to crash. You can change it to 0.
Thanks!
|
|
Rank: Member Groups: Member
Joined: 3/11/2009 Posts: 24
|
Setting the DataField corrected my issue with data in the grid, thanks. The headers/rows are still mis-aligned. I have put a screen shot of the grid out on my web site for you to look at to see if it triggers any ideas of why it is occurring. http://www.ccnwo.com/grid.jpgThanks. Bryan Hunt
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi,
A screenshot won't help much. If you can upload a test project we will be happy to take a look.
Thanks
|
|
Rank: Member Groups: Member
Joined: 3/11/2009 Posts: 24
|
I found it, thanks. It turned out to be a text align set at the table level.
I really like the EO grid control, obviously very powerful.
But, for this application I may have to go back to the regular ASP.Net grid. The cell autosizing capability is a must for the type of data that I am displaying (both in multiline text and in width).
Is that a feature that EO hopes to add to the grid at some future date?
Thanks.
Bryan Hunt
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi,
Unfortunately we do not have such plans in the near future. We certainly hope to be able to add it, but it might be a while. Sorry about it!
Thanks!
|
|
Rank: Member Groups: Member
Joined: 3/11/2009 Posts: 24
|
eo_support wrote:Hi,
Our Grid is a fixed row height Grid. So it will not autosize for multi-line text. However because Grid cell text are HTML, you can format the text to include an overflow:auto so that scrollbars are automatically added if necessary.
Thanks! Can you describe (example) the syntax of how to add "overflow:auto" to the text to facilitate that? Thanks. Bryan Hunt
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi, You would basically pre-format the text to enclose it with an element with "overflow:auto". For example, instead of passing the Grid cell "some text", you would pass it something like this:
Code: HTML/ASPX
<div style="width:100px;height:30px;overflow:auto;">
some text
</div>
You can perform such formatting while you fill your data source (for example, in your SELECT statement), on your data source (modify your data source with code before pass it to the Grid), or on the Grid by setting the Grid's columns' DataFormat property. For example, you can set DataFormat to
Code: HTML/ASPX
<div style="width:100px;height:30px;overflow:auto;">{0}</div>
This way the Grid will first replace "{0}" with the data from your data source then display the whole DIV tag instead of just the original data as is. Hope this helps. Thanks!
|
|
Rank: Member Groups: Member
Joined: 3/11/2009 Posts: 24
|
That worked extremely well, thank you. I am now using this for all of my large, static text columns.
Is is possible to word wrap in a textboxcolumn? I tried adding CssText="word-wrap: break-word" in the textboxcolumn template, but it doesn't seem to have any effect?
Thanks.
Bryan Hunt
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi,
word-wrap:break-word should work. You would go to Item Style Set -> Default -> Cell Style and apply it there. Note this only affect the text style when the cell is not in edit mode. When the cell enters edit mode, the styles are controled by the TextBoxColumn's TextBoxMode property. You would usually set it to "MultiLine".
Thanks!
|
|
Rank: Member Groups: Member
Joined: 3/11/2009 Posts: 24
|
That worked, thanks.
One question though, won't this affect every cell now? Rather than the one column that I want to apply it to?
Thanks.
Bryan Hunt
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi,
Yes. It will. The point is only to give you an idea of how styles are set. There are style properties that affect the whole Grid, or a whole Column, or a single cell. You would set it at wherever appropriate for you scenario.
Thanks
|
|
Rank: Member Groups: Member
Joined: 3/11/2009 Posts: 24
|
Okay, that makes sense.
But now something weird has happened.
I decided to move the "word-wrap: break-word" from the ItemStyles/CellStyle to the ColumnTemplates/eo:TextBoxColumn/CellStyle area. I removed it, and thought that I would test before I inserted it into the new spot.
And "word wrap" seems to still be active?? I went back and searched through my .aspx file for "word" "wrap" "break" and got no hits. I refreshed my browser to make sure cache was cleared. How did I "permanantly" change this behavior?
Thanks.
Bryan Hunt
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi,
There is no reason and no place for the Grid to remember the styles. So it got to be somewhere else or something else.
Thanks
|
|
Rank: Member Groups: Member
Joined: 3/11/2009 Posts: 24
|
Here is yet another style question.
I am trying to set vertical alignment to middle of cell in my second grid column using: <TextBoxStyle CssText="vertical-align: middle" />
It still aligns to the top of the cell. Can you tell me what I'm doing wrong?
Thanks.
Bryan Hunt
<eo:Grid ID="Grid1" runat="server" BorderColor="#828790" BorderWidth="1px" ColumnHeaderAscImage="00050204" ColumnHeaderDescImage="00050205" ColumnHeaderDividerImage="00050203" ColumnHeaderHeight="24" Font-Bold="False" Font-Italic="False" Font-Names="Tahoma" Font-Overline="False" Font-Size="8.75pt" Font-Strikeout="False" Font-Underline="False" GridLineColor="240, 240, 240" GridLines="Both" Height="414px" ItemHeight="80" Width="100%" FullRowMode="False"> <FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" /> <ItemStyles> <eo:GridItemStyleSet> <ItemStyle CssText="background-color: white" /> <ItemHoverStyle CssText="background-image: url(00050206); background-repeat: repeat-x" /> <SelectedStyle CssText="background-image: url(00050207); background-repeat: repeat-x" /> <CellStyle CssText="padding-left:8px;padding-top:2px;white-space:nowrap;" /> </eo:GridItemStyleSet> </ItemStyles> <ColumnTemplates> <eo:TextBoxColumn> <TextBoxStyle CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8.75pt; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; FONT-FAMILY: Tahoma" /> </eo:TextBoxColumn> <eo:DateTimeColumn> <DatePicker ControlSkinID="None" DayCellHeight="16" DayCellWidth="19" DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True" SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL" TitleRightArrowImageUrl="DefaultSubMenuIcon"> <TodayStyle CssText="font-family: tahoma; font-size: 12px; border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" /> <SelectedDayStyle CssText="font-family: tahoma; font-size: 12px; background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" /> <DisabledDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" /> <PickerStyle CssText="border-bottom-color:#7f9db9;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#7f9db9;border-left-style:solid;border-left-width:1px;border-right-color:#7f9db9;border-right-style:solid;border-right-width:1px;border-top-color:#7f9db9;border-top-style:solid;border-top-width:1px;font-family:Courier New;font-size:8pt;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;" /> <CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma" /> <TitleArrowStyle CssText="cursor:hand" /> <DayHoverStyle CssText="font-family: tahoma; font-size: 12px; border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" /> <MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px" /> <TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" /> <OtherMonthDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" /> <DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid" /> <DayStyle CssText="font-family: tahoma; font-size: 12px; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" /> </DatePicker> </eo:DateTimeColumn> <eo:MaskedEditColumn> <MaskedEdit ControlSkinID="None" TextBoxStyle-CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; font-family:Courier New;font-size:8pt;"> </MaskedEdit> </eo:MaskedEditColumn> <eo:StaticColumn AllowResize="False"> </eo:StaticColumn> </ColumnTemplates> <ColumnHeaderHoverStyle CssText="background-image:url('00050202');padding-left:8px;padding-top:4px;" /> <Columns> <eo:StaticColumn AllowResize="False" DataField="Lead ID" HeaderText="Lead ID" Name="Lead ID" Visible="False"> <CellStyle CssText="" /> </eo:StaticColumn> <eo:TextBoxColumn AllowResize="False" DataField="Project Title" HeaderText="Project Title" Name="Project Title" Width="200" ReadOnly="True"> <TextBoxStyle CssText="vertical-align: middle" /> </eo:TextBoxColumn> <eo:StaticColumn AllowResize="False" DataField="Samples Ordered" HeaderText="Samples Ordered" Name="Samples Ordered" Width="310" DataFormat="<div style="width:300px;height:70px;overflow:auto;">{0}</div>"> </eo:StaticColumn> <eo:StaticColumn AllowResize="False" DataField="Sample Order Date" HeaderText="Sample Order Date" Name="Sample Order Date" Width="150"> </eo:StaticColumn> <eo:StaticColumn AllowResize="False" DataField="Current Lead Notes" HeaderText="Current Lead Notes" Name="Current Lead Notes" Width="300"> </eo:StaticColumn> <eo:StaticColumn AllowResize="False" DataField="Current Lead Status" HeaderText="Current Lead Status" Name="Current Lead Status" Width="150"> </eo:StaticColumn> <eo:TextBoxColumn AllowResize="False" DataField="Additional Lead Notes" HeaderText="Additional Lead Notes" Name="Additional Lead Notes" TextBoxMode="MultiLine" Width="300"> </eo:TextBoxColumn> <eo:CustomColumn DataField="New Lead Status" HeaderText="New Lead Status" Name="New Lead Status" Width="150"> </eo:CustomColumn> </Columns> <ColumnHeaderStyle CssText="background-image:url('00050201');padding-left:8px;padding-top:4px;" /> </eo:Grid>
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
This is nomal. You may have misunderstood what vertical-align really does. Please check W3C reference for more details: http://www.w3.org/TR/CSS2/visudet.html#line-heightAs a test, you can try to apply it on a DIV and see what it does. To vertical align text in a Grid cell, use padding-top. Thanks!
|
|
Rank: Member Groups: Member
Joined: 3/11/2009 Posts: 24
|
Okay, I will read up to better understand that.
I have modified that column to have padding-top, same results.
<eo:TextBoxColumn AllowResize="False" DataField="Project Title" HeaderText="Project Title" Name="Project Title" Width="200" ReadOnly="True"> <TextBoxStyle CssText="padding-top: 30px; padding-right: inherit; padding-bottom: inherit; padding-left: inherit;" /> </eo:TextBoxColumn>
|
|
Rank: Member Groups: Member
Joined: 3/11/2009 Posts: 24
|
Ah. I changed the TextBoxStyle to CellStyle and that worked... Learning....
In the Vista Grid Template, the line highligher is still only 24px high, even though I have changed my ItemHeight to 80. The highlighers seem to reference images (like url(00050206)) that I assume are in the dll? How would I change the "highlight" to match the ItemHeight?
Thanks for your patient help.
Bryan Hunt
|
|