iSeller Commerce
iSeller POS Retail
iSeller POS F&B
iSeller POS Express
Crosslight
WebUI
ClientUI
What's New
Download Trial
Web Solution
Mobile Solution
Enterprise Solution
Custom Development
Blog
Community
Latest Development Blogs
ForumPostTopic
Browse By Tag
This is a copy of another post about this but I wanted to create a new topic as it is a little different.
Using WebGrid8, depending upon where the <HeaderStyle is located the style is different. If the <HeaderStyle in in the <LayoutSettings, the column headers don not wrap even though the wrap property is set to Yes. if the <HeaderStyle is in the <RootTable then the headers will warp. It was suggested in another post to use <br /> in the caption but that only works for the first time the grid is displayed, if you sort a column then the header shows the <br /> tag and doesn't wrap.
Using the FirstExperience.aspx sample replace the exisiting<Layout Setting with this one:
<LayoutSettings AllowFilter="Yes" AllowGrouping="Yes" AllowSorting="Yes" PagingMode="None" GroupByBoxVisible="False" AllowColumnFreezing="No" AllowColumnMove="Yes" AllowExport="No" AlwaysShowHelpButton="false" AllowSelectColumns="Yes" RowLostFocusAction="NeverUpdate" AutoFilterSuggestion="True" FilterBarVisible="false" HideColumnsWhenGrouped="No" InProgressUIBehavior="ChangeCursorToHourGlass" PagingSize="50" ShowFilterStatus="True" RestoreRowSelection="RootTableOnly" VirtualPageSize="50" PagingExportMode="ExportAllData" AllowMultipleSelection="No" GroupRowInfoFormatDefault="[caption] : [value] ([count])" ColumnFooters="Yes" HeaderClickAction="SortSingle" ShowColumnAction="true" RowHeaders="No" CellClickAction="CellSelect"> <HeaderStyle BackColor="#2b5584" BorderColor="#2b5584" BorderStyle="Solid" BorderWidth="1px" Cursor="Hand" Wrap="true" Font-Names="Verdana" Font-Size="8pt" ForeColor="White" Font-Bold="true" HorizontalAlign="Center" CustomRules="height:30px"> <BorderSettings> <Left Color="#2b5584" /> <Top Color="#2b5584" /> </BorderSettings> </HeaderStyle> <FreezePaneSettings ShowInContextMenu="True" MaxFrozenColumns="3" AbsoluteScrolling="True" /> <TextSettings> <TextItems> <ISWebGrid:WebGridTextItem TextItem="CommonText/Refresh" TextValue="Refreshing RDRs" /> <ISWebGrid:WebGridTextItem TextItem="CommonText/NoData" TextValue="There are no RDRs to display, modify the filters above to view RDRs" /> </TextItems> </TextSettings> <AlternatingRowStyle Font-Names="Verdana" BackColor="#ECE9D8" Font-Size="8pt" HorizontalAlign="Center" /> <RowStyle Font-Names="Verdana" Font-Size="8pt" HorizontalAlign="Center" BackColor="#c9c9c9" /> <FooterStyle Font-Names="Verdana" BorderSettings-Left-Color="White" BorderSettings-Top-Color="White" /> <StatusBarStyle BaseStyle="Normal" Font-Bold="True" Font-Size="9pt"> </StatusBarStyle> </LayoutSettings>
Then On the Customer ID column change the <Caption to <caption="Customter<br />ID". Then run the page, see that Customer ID is on 2 lines, now click on a header to sort a column, the Customer ID column header now looks like "Customer<br />ID" it is not wrapped.
Now remove the following code form the <LayoutSetting and add it right below the <RootTable...> tag.
<HeaderStyle BackColor="#2b5584" BorderColor="#2b5584" BorderStyle="Solid" BorderWidth="1px" Cursor="Hand" Wrap="true" Font-Names="Verdana" Font-Size="8pt" ForeColor="White" Font-Bold="true" HorizontalAlign="Center" CustomRules="height:30px"> <BorderSettings> <Left Color="#2b5584" /> <Top Color="#2b5584" /> </BorderSettings> </HeaderStyle>
Remove the break tag from the Customer ID and reduce the column width to 75px. Now view the page and notice that the header is wrapped and clicking on a column to sort the header stays wrapped.
I need to have the HeaderStyle in the Layout setting and the header to wrap. Any ideas on how to do this?
thanks
Hi,
Attached is a screen shot after I sorted a column. To see the problem change the DOC type to XHTML. If using the FirstExperience sample, use the DefaultMasterXHTML. You will then see the problem.
The versions I am using is:
framework 3.0.5000.850
webGrid 8.0.7200.200.
Just found the problem, set to True EnableSection508Standards. When I set it to False the Column Headers with <br /> work. setting it to True doesn't.
Yes setting EnableSection508Standards to False correcst the problems, BUT we need to have EnableSection508Standards to True, we are required to following 508 standards. So this is a bug in webGrid?
Spoke to soon! Yes turning off Enable508Standards helps with the Column headers and sorting, but messes up again if you remove a column.
Using FirstExperience, (attached) run the sample, notice that Customer ID is on 2 lines, sort and all is well, now Right click on a column and click and Select Columns ( notice that Customer Id is listed as Customer<br />Id), remove a column. Notice that Customer ID is now Customer<br />ID and runs into the header of the second column. Screenshot attached.
Hi John,
I can replicate your problem here. To resolve this, I'm using this code OnAfterResponseProcess event:
function WebGrid1_OnAfterResponseProcess(controlId, actionName, lastRequestObject, xmlResponseObject) { var WebGrid1 = ISGetObject(controlId); WebGrid1.RootTable.Columns[1].GetElement().children[0].children[0].innerHTML = "Customter<br />ID"; return true; }
Using this code, I can set EnableSection508Standards to true value. If you set EnableSection508Standards to true value, the text inside table will be shown as it should be so the environment can read it as text. You can try using this on your code and please tell me if there's any error in my code. Hope this helps.
Regards,Bernard
Hi Bernard,
Sorry it took so long, many releases are going on. Although your code does work it is not a viable solution. If a user moves or hides a column it breaks.
When adding the <HeaderStyle to the <RootTable, the wrapping of column headers and restoring of the header works correctly and when it is added to the <Layout section is does not work, why not just fix the problem so that the <Headerstyle works the same no matter where the <Headerstyle is located?
These problems all came up when trying to Save and Restore a layout. This is a very important function that we need but can't use it as it doesn't work in our situation as there are way to many problems. Maybe this can be brought to the Project Managers and they can take a closer look at this functionality.
Sorry but wasted way to much time on trying to get this to work properly.
I do appreciate your effort if helping us try to resolve these problems.
Unfortunately, this issue happens in our local end whether I'm use the HeaderStyle in RootTable or in LayoutSettings. To remove the javascript breaks, I'm using validation on my code. Here's the code:
function WebGrid1_OnAfterResponseProcess(controlId, actionName, lastRequestObject, xmlResponseObject) { var WebGrid1 = ISGetObject(controlId); if(WebGrid1.RootTable.Columns.GetNamedItem("CustomerID").Visible != false) WebGrid1.RootTable.Columns.GetNamedItem("CustomerID").GetElement().children[0].children[0].innerHTML = "Customter<br />ID"; return true; } function WebGrid1_OnInitialize(controlId) { var WebGrid1 = ISGetObject(controlId); if(WebGrid1.RootTable.Columns.GetNamedItem("CustomerID").Visible != false) WebGrid1.RootTable.Columns.GetNamedItem("CustomerID").Caption = "Customter<br />ID"; return true; }
In my sample, I'm using the HeaderStyle on LayoutSettings and the javascript breaks doesn't occurs anymore. Altough we will investigate this further. Could you let me know the differencies between HeaderStyle in LayoutSettings and HeaderStyle in RootTable? Hope this helps.
Thank you for your response. The difference between using the <HeaderStyle in the RootTable or <LayoutSettings is when used in the <RootTable, wrapping works no need to add breaks. But when you save the layout, the styles are not saved when used in the <RootTable.
As for your code, it does work and the headers maintain the breaks, but this only fixes one issue. The next big issue is save the and restoring the layout. I'll have to work up a sample for you but will take awhile. In short, saveing the layout has no probelm but when I restore some of the problems are 1) Preview row doesn't work unless I sort a colum first 2) any column the is modified via the InitialzeRow event doesn't work, 3) if I hide a column and show a column that is hidden in the definition, that column is not shown.
Another issue using the breaks, look at the Select Columns context menu and you will see that your Customer ID column is shown as Customer<br />ID.
Thanks
I've same problem when I'm using HeaderStyle on RootTable and HeaderStyle in LayoutSettings, the break on Customer ID changed into <br /> text. And I also concern if the style inside RootTable cannot be saved when you're saving its layout. So I'm using HeaderStyle inside LayoutSettings in my sample and it can be saved into isl.
Unfortunately, the other issue that you mentioned above cannot be replicate in our local end. Once I load the WebGrid, PreviewRow automatically expand and it doesn't need to FlyPostBack to show the PreviewRow. Actually we're using InitializeRow to modify the row when rendering, so it won't have any effect on column during initializeRow (I also change style for table cell on InitializeRow event, and it's working properly). Also for the 3rd issue, I couldn't replicate it in our local end. When I hide the column and show it using select column context menu. The column will appear, however its position is on the last column.
I also attach the sample here. If possible, could you look in my sample and make changes that sample to show the issue that you mentioned above? I will gladly help you to reolve this issue.
Unable to extract your sample. I use 7zip and it reports an unsupported compression routine.
Attached is a screenshot of one of the issues.
That issue doesn't appear in my local end using my sample. Could you try my sample in your local end?
Look forward to hear any feedback from you so I can help you further.
Bernard,
Your earlier attachment was corrupt and I couldn't extract the files. Today's attahcment worked and it fixed this issue in the context menu.
Still having problems with the Preview Row and restoring layouts, I'm working up a sample that shows the problems.
thanks for your help
Glad, I can help you to resolve the other issue. I'll look forward for your feedback.
or
Choose this if you're already a member of Intersoft Community Forum. You can link your OpenID account to your existing Intersoft Social ID.
Choose this if you don't have an Intersoft account yet. Your authenticated OpenID will be automatically linked to your new Intersoft account.
Enter your Wordpress Blogname