Hello,
First of all, I'm attaching a VS2008 project to reproduce the issue.
I want my grid to get the styles from a css. In order to do that I created my classes "GridRow" and "GridHeader". Then I set the RowStyleDefault.CssClass and HeaderStyleDefault.CssClass to the corresponding classes.
Test number one: Add one templated column and one normal column (those columns are already present on the attached project). When the page runs the header does not use the GridHeader class. It inherits the properties from GridRow instead. That's wrong.
Test number two: Now remove the templated column, run the page again. This time the header is only using the GridHeader class. That's the behavior I'm expecting.
Test number three: Add the templated column again, remove the RowStyleDefault.CssClass property, set RowStyleDefault.BackColor = White. Run the page, the header is using the the GridHeader class, which is the correct behavior.
It looks like the presence of the templated column affects the assignment of css classes.
Has anyone else noticed this problem?
Hello Oscar,
Thanks for dropping us a line and for the sample attached - much appreciated.
In this case I believe this might be the expected behavior, at least that sounds logical to me. RowStyle/HeaderStyle is used only for computed columns and applied only there, but when you are using a Templated Column, you take care of the template inside (content and presentation), so you may need to take care of the Css classes there as well.
Here is an example I derived from your project that worked fine for me:
<igtbl:TemplatedColumn BaseColumnName="CompanyName" IsBound="True" Key="CompanyName"> <HeaderTemplate> <span class="GridHeader"> Company Name Template </span> </HeaderTemplate> <CellTemplate> <span class="GridRow"> <% Eval("CompanyName" %> </span> </CellTemplate> </igtbl:TemplatedColumn>
So basically, I am using your approach, however instead of Caption I am using the respective templates and applying style there.
Hope this helps!
Thanks for the answer Rumen.
Unfortunatelly that solution doesn't seem to work. Using my sample project, please define two columns, one templated and one not templated:
<igtbl:TemplatedColumn BaseColumnName="Name" IsBound="True" Key="Name">
<HeaderTemplate>
<span class="GridHeader">
Company Name Template
</span>
</HeaderTemplate>
<CellTemplate>
<span class="GridRow">
CompanyName Value
</CellTemplate>
</igtbl:TemplatedColumn>
<igtbl:UltraGridColumn BaseColumnName="NotTemplatedName" Key="NotTemplatedName">
<Header Caption="NotTemplatedName">
<RowLayoutColumnInfo OriginX="1" />
</Header>
<Footer>
</Footer>
</igtbl:UltraGridColumn>
The templated column is using the GridHeader template because you added the GridHeader class to the <span>. The second column should get the css class from the default:
<RowStyleDefault CssClass="GridHeader">
</RowStyleDefault>
But it displays the GridRow style instead.
I looked into the HTML and I see this:
<th class="ig_49f5d809_r1 GridRow GridHeader "><nobr>NotTemplatedName</nobr></th>
It looks like it inherits both the GridRow and GridHeader styles. Now, when the templated column is not there it look like this:
<th class="GridHeader "><nobr>NotTemplatedName</nobr></th>.
It doesn't make sense.
One more thing, there's a property called DisplayLayout.MergeStyles. According to the documentation, if it is set to false the styles are not merged. I set it to false but I still get the same results.
Any thoughts?
Thanks for the follow-up and for the additional information. From what I can tell, this might very well be an issue in the control itself
I believe the best route is to contact developer support: http://ko.infragistics.com/gethelp/default.aspx#Overview. You can also submit a bug report: http://devcenter.infragistics.com/Protected/SubmitSupportIssue.aspx.
Hope this helps.
Your support team sent me the answer. The order the css classes are defined matters. The ones on the bottom override the ones on the top. In this case the classes should be defined like this:
.GridRow
{
color: Black;
background-color: White;
}
.GridHeader
color: White;
background-color:Blue;
This article explains it too:
http://devcenter.infragistics.com/Support/KnowledgeBaseArticle.aspx?ArticleID=10026