I have a WebDropDown in which I'm using some internal formatting to implement multiple columns. Using this implementation, I can style each line using some C# after the databind is complete. However, I'm not certain how I can apply a style to the HeaderTemplate or to the header itself after the databind. When I apply the CSS to the individual spans within, the headers look very disjointed and ugly. I would like to apply the header directly to the DIV that is generated by the HeaderTemplate itself.
ASPX
<igdd:WebDropDown ID="cbRolePermissionAddList" runat="server" TextField="PermissionName" ValueField="PermissionID" EnableDropDownAsChild="false" OnDataBound="cbRolePermissionAddList_DataBound" DropDownContainerWidth="500px"> <HeaderTemplate> <--- CAN I APPLY A CSS HERE IN ANY WAY? <span class="GridHeaderStyle" style="width: 265px;">Name</span> <span class="GridHeaderStyle" style="width: 200px;">Type</span> </HeaderTemplate> <ItemTemplate> <span style="width: 265px;"><%# DataBinder.Eval(Container.DataItem, "PermissionName") %></span> <span style="width: 200px;"><%# DataBinder.Eval(Container.DataItem, "PermissionType") %></span> </ItemTemplate>
</igdd:WebDropDown>
C#protected void cbRolePermissionAddList_DataBound(object sender, EventArgs e){
// Color the rows accordinglybool Alternate = false;
foreach (DropDownItem ddi in ((WebDropDown) sender).Items) { if (Alternate) { ddi.CssClass = "GridItemStyle"; ddi.SelectedCssClass = "GridSelectedItemStyle"; ddi.HoverCssClass = "item2Hover"; } else { ddi.CssClass = "GridAlternateItemStyle"; ddi.SelectedCssClass = "GridSelectedItemStyle"; ddi.HoverCssClass = "item1Hover"; } Alternate = !Alternate; } }
Hi LynnCo Developer,
Thank you for posting in our forums!
You can access the header's div by using the following CSS.
.igdd_DropDownListContainer > div:first-child { background-color: Lime; }
The header div should be the first child div in the DropDownListContainer, so the .igdd_DropDownListContainer class can be used to access it. (this class name may slightly vary depending on which StyleSet you are using)
If you need further assistance with this, please let me know.
Please let me know if you have any questions or concerns with this and I will be glad to help.
I appreciate the input, and that looks to be a great answer. I did fix it, but since I did not know about the > div:first-child syntax, I solved it by adding a table with a specific ID, then CSS-styling that table, making sure that the grid-table itself had a stylesheet that imposed no padding or margins around it.