Databind inside style="width: of div

Question

I am facing a problem like this: I have it in HTML page:

<div class="bar bar-success" style="width:80%;"></div>

BUT I'd like to use this 80% comming from a database.

so I'd tried this:

<div id="Percent" runat="server" class="bar bar-warning"  style='width: <%# DataBinder.Eval(Container.DataItem, "number") %> %'>

But It didn't work. Can anyone help me to save my problem?

Answer 1

You will need to remove runat attribute from here if you want to set the inline width like below:

<div id="Percent" class="bar bar-warning"  style='width: <%# DataBinder.Eval(Container.DataItem, "number") %> %'>

Otherwise you can set it from code behind:

<div id="Percent" runat="server" class="bar bar-warning" >

    Percent.Style.Add("width", "YourDatabaseValue");

Answer 2

You can convert it to a server control, a Panel is rendered as a div.

<asp:Panel ID="PanelSuccessBar" CssClass="bar bar-success" runat="server"></asp:Panel>

codebehind:

// number is a double value that is comeing from database
PanelSuccessBar.Width = new Unit(number, UnitType.Percentage);