Change color based on content

[schatenjagerParticipant]

I have a docking control that applies the jqxdocking widget to a repeater. The code for the repeater is:

<div id=”TOC” runat=”server”>
<div id=”TOCDock”>
<div id=”TOCPanel” style=”height: auto; width: auto”>
<asp:Repeater ID=”TOCRepeater” runat=”server”>
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div id=<%#Container.DataItem(“typeNumber”)%> style=”height: auto; width: auto;”>
<div><%#Container.DataItem(“type”) + ” ” + Container.DataItem(“number”)%></div>
<div>
<asp:TextBox id=”TOCNameLabel” runat=”server” style=”width: 99%;” text=<%#Container.DataItem(“name”)%> />
</div>
</div>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
</div>
</div>
</div>

The script that initializes the docking is:

$(‘#TOCDock’).jqxDocking({ theme: ‘classic’, orientation: ‘vertical’, width: ‘100%’, cookies: true });

My question is, is it possible to write a statement in javascript that will look at the id of the div within the repeater (currently defined as <div id=<%#Container.DataItem(“typeNumber”)%> style=”height: auto; width: auto;”>) and set the theme of the docking based on that div id?

I want to something like:

if (left(divid,4) = “Stag”) then set theme=classic
elseif (left(divid,4) = “Task”) then set theme=metro

Can this be done?

[Peter StoevKeymaster]

Hi schatenjager,

If you work with HTML Elements, the process to check by ID is the following:

if ($(htmlElement)[0].id == "someID")
{
   // do something here.
}

However, jqxDocking can have only 1 theme which is applied to all the windows in the docking.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[schatenjagerParticipant]

Thanks Peter! That worked perfectly. What I did was to add a function to the window.load event that ran this:

$(“div[id^=’Stage’]” + ” .jqx-window-header”).addClass(“highlighted”);

Then I just created a class called “highlighted” and applied the formats I wanted.

[Author]

Posts