locked
How to bind a value from database to a span style? RRS feed

  • Question

  • User1700504264 posted

    Hi

    I am using this code to display a coloured circle

    <span style="font-size: 1.5em; color:tomato;">
         <i class="fas fa-circle"></i>
    </span>

    I need to make the colour value dynamic

    I select the colour using this SQL statement

    SELECT ActivityStatusColor=(CASE a.[status] WHEN 0 THEN 'LightSlateGray' WHEN 1 THEN 'Dodgerblue' WHEN 2 THEN 'MediumSpringGreen'  WHEN 3 THEN 'Tomato' END )
    FROM TBX

    how could I assign those values (LightSlateGray, Dodgerblue, MediumSpringGreen) to the style of the span?

    Tuesday, November 6, 2018 5:59 AM

Answers

  • User1700504264 posted

    <g class="gr_ gr_10 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="10" data-gr-id="10">Hi</g> 0591666959,

    0591666959

    the span is not accessable from the code behind since it is within a nested Repeater

    You can find it in rptrActivities_ItemDataBound event, like below.

    <ItemTemplate>
        <tr>
            <td>
                <span runat="server" id="cspan" style="font-size: 1.5em; color: tomato;">
                    <i class="fas fa-circle">content here</i>
                </span>
            </td>
            <td>
                <%# DataBinder.Eval(Container.DataItem, "ActivityName") %>
                <%--<asp:HiddenField ID="hdnFieldFunction" runat="server" Value='<%# Eval("Code") %>' />--%>
            </td>
        </tr>

    In code behind:

    Protected Sub rptrActivities_ItemDataBound(sender As Object, e As RepeaterItemEventArgs)
        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
    
            'your code logic here
    
            Dim span As HtmlGenericControl = e.Item.FindControl("cspan")
            span.Style.Add("color", "yellow")
        End If
    End Sub

    With Regards,

    Fei Han

    Thank you <g class="gr_ gr_240 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="240" data-gr-id="240"><g class="gr_ gr_241 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation replaceWithoutSep" id="241" data-gr-id="241">Fei</g></g> 

    Actually, the repeater itself is not accessible from the code behind! 

    since it is nested in another repeater, so I can not declare that event in the code behind

    is there any way to go around this?

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 8, 2018 4:51 PM

All replies

  • User-369506445 posted

    hi

    you can add an attribute and a style programmatically to a control below like :

     <form id="form2" runat="server">
            <span runat="server" id="myTag" style="font-size: 1.5em;"  >
                <i class="fas fa-circle"></i> put ypur text
            </span>
        </form>

    Code behind

     protected void Page_Load(object sender, EventArgs e)
            {
                myTag.Style.Add("color", "red");
    
            }

    According to the above example, you can change the color after fetching your data from a database

    Tuesday, November 6, 2018 6:52 AM
  • User-821857111 posted

    0591666959

    I am using this code to display a coloured circle

    <span style="font-size: 1.5em; color:tomato;">
         <i class="fas fa-circle"></i>
    </span>

    Where are you doing this? In a Web Form? A Razor View?

    Tuesday, November 6, 2018 7:13 AM
  • User61956409 posted

    Hi 0591666959,

    I am using this code to display a coloured circle

    <span style="font-size: 1.5em; color:tomato;">
         <i class="fas fa-circle"></i>
    </span>

    I need to make the colour value dynamic

    If you want to achieve it in webform, you can also try this approach:

    <span style='font-size: 1.5em; color: <%=ActivityStatusColor%>;'>
        <i class="fas fa-circle">item1</i>
    </span>

    In code behind:

    public string ActivityStatusColor = "tomato";
    
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //your code logic here
    
            ActivityStatusColor = "red";
        }
    }

    Test Result:

    With Regards,

    Fei Han

    Tuesday, November 6, 2018 7:32 AM
  • User1700504264 posted

    0591666959

    I am using this code to display a coloured circle

    <span style="font-size: 1.5em; color:tomato;">
         <i class="fas fa-circle"></i>
    </span>

    Where are you doing this? In a Web Form? A Razor View?

    Hi Mikesdotnett

    a web form

    Wednesday, November 7, 2018 5:02 PM
  • User1700504264 posted

    hi

    you can add an attribute and a style programmatically to a control below like :

     <form id="form2" runat="server">
            <span runat="server" id="myTag" style="font-size: 1.5em;"  >
                <i class="fas fa-circle"></i> put ypur text
            </span>
        </form>

    Code behind

     protected void Page_Load(object sender, EventArgs e)
            {
                myTag.Style.Add("color", "red");
    
            }

    According to the above example, you can change the <g class="gr_ gr_11 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling multiReplace" id="11" data-gr-id="11">color</g> after fetching your data from a database

    Thank <g class="gr_ gr_24 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="24" data-gr-id="24">you</g> Vahid

    I need to add the style in the item binding event 

    not in the page_load

    but the span is not <g class="gr_ gr_133 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="133" data-gr-id="133">accessable</g> from the code behind since it is within a nested Repeater

    this is the complete code

    <asp:Repeater ID="rptrSections" runat="server" DataSourceID="SectionsSqlDataSource" OnItemDataBound="rptrSections_ItemDataBound">
                            <HeaderTemplate>
                                <table class="table table-hover table-striped table-condensed table-bordered table-responsive">
                            </HeaderTemplate>
                            <ItemTemplate>
                                <tr class="active" style="background-color:cadetblue">
                                    <td colspan="6">
                                        <h5><%# DataBinder.Eval(Container.DataItem, "SectionName") %></h5>
                                        <asp:HiddenField ID="hdnSection" runat="server" Value='<%# Eval("Code") %>' />
                                    </td>
                                </tr>
                                    
                                <tr style="background-color:cadetblue; font-weight:bold;">
                                    <td>
                                        <asp:Literal runat="server" Text=""></asp:Literal>
                                    </td>
                                    <td>
                                        <asp:Literal runat="server" Text='<%$ Resources:title %>'></asp:Literal>
                                    </td>
                                   <%-- <td>
                                        <asp:Literal runat="server" Text='<%$ Resources:interval %>'></asp:Literal>
                                    </td>--%>
                                    
                                    
                                    <td>
                                        <asp:Literal runat="server" Text='<%$ Resources:performance %>'></asp:Literal>
                                    </td>
                                    
                                    <td>
                                        <asp:Literal runat="server" Text='<%$ Resources:target %>'></asp:Literal>
                                    </td>
                                    <td>
                                        <asp:Literal runat="server" Text='<%$ Resources:record %>'></asp:Literal>
                                    </td>
                                    <td>
                                        <asp:Literal runat="server" Text='<%$ Resources:status %>'></asp:Literal>
                                    </td>
                                    
                                </tr>
                                <asp:Repeater ID="rptrActivities" runat="server" DataSourceID="">
                                    <HeaderTemplate>
                                        
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <tr>
                                            <td>
                                                
                                                <span style="font-size: 1.5em; color:tomato;">
                                                  <i class="fas fa-circle"></i>
                                                </span>
                                            </td>
                                            <td>
                                                
                                                
                                                <%# DataBinder.Eval(Container.DataItem, "ActivityName") %>
                                                <%--<asp:HiddenField ID="hdnFieldFunction" runat="server" Value='<%# Eval("Code") %>' />--%>
                                            </td>
                                           
                                            
                                            
                                            <td>
                                                <%# DataBinder.Eval(Container.DataItem, "achieved") %>
                                                <%--<asp:HiddenField ID="hdnFieldFunction" runat="server" Value='<%# Eval("Code") %>' />--%>
                                                <%# DataBinder.Eval(Container.DataItem, "kpivalue") %>
                                                <%--<asp:HiddenField ID="hdnFieldFunction" runat="server" Value='<%# Eval("Code") %>' />--%>
                                                
                                            </td>
    
                                            
                                            <td>
                                                <%# DataBinder.Eval(Container.DataItem, "target") %>
                                                <%--<asp:HiddenField ID="hdnFieldFunction" runat="server" Value='<%# Eval("Code") %>' />--%>
                                            </td>
                                            <td>
                                                <div class="form-group">
                                                    <asp:Label runat="server" AssociatedControlID="txtRecord" CssClass="col-md-5 control-label" Text="<%$ Resources:numericrecord %>"></asp:Label>
                                                    <div class="col-md-12">
                                                        
                                                        <asp:TextBox ID="txtRecord" runat="server"  CssClass="form-control" MaxLength="3" Text='<%#Bind("record") %>' Width="50px"></asp:TextBox>
                                                        <asp:RequiredFieldValidator runat="server" ControlToValidate="txtRecord"
                                                            CssClass="text-danger" Display="Dynamic" ErrorMessage="*" ValidationGroup="SaveRecord" />
                                                    </div>
                                                </div>
    
                                                <div class="form-group">
                                                    <asp:Label runat="server" AssociatedControlID="txtEvidence" CssClass="col-md-5 control-label" Text="<%$ Resources:evidence %>"></asp:Label>
                                                    <div class="col-md-12">
                                                        
                                                        <asp:TextBox ID="txtEvidence" runat="server" TextMode="MultiLine" Text='<%#Bind("evidence") %>' CssClass="form-control" MaxLength="255"></asp:TextBox>
                                                        <%--<asp:RequiredFieldValidator runat="server" ControlToValidate="txtEvidence"
                                                            CssClass="text-danger" Display="Dynamic" ErrorMessage="*" ValidationGroup="SaveRecord" />--%>
                                                    </div>
                                                </div>
                                                
                                            </td>
                                            <td>
                                                <asp:CheckBox ID="chkStumbling" runat="server" Checked="false" Text='<%$ Resources:stumbling %>' CssClass="checkbox" />
                                                <div class="form-group">
                                                    <asp:Label runat="server" AssociatedControlID="txtEvidence" CssClass="col-md-5 control-label" Text="<%$ Resources:stumblingreason %>"></asp:Label>
                                                    <div class="col-md-12">
                                                        
                                                        <asp:TextBox ID="txtStumblingReasons" runat="server" TextMode="MultiLine" Text='<%#Bind("stumblingreason") %>' CssClass="form-control" MaxLength="255"></asp:TextBox>
                                                        <%--<asp:RequiredFieldValidator runat="server" ControlToValidate="txtStumblingReasons"
                                                            CssClass="text-danger" Display="Dynamic" ErrorMessage="*" ValidationGroup="SaveRecord" />--%>
                                                    </div>
                                                </div>
                                                
                                            </td>
                                           
                                        </tr>
                                    </ItemTemplate>
                                    <FooterTemplate>
                                        <tr>
                                            <td>
                                                <asp:Button ID="btnSaveSection" runat="server" CssClass="btn btn-default" Text="Save This Section" />
                                            </td>
                                        </tr>
                                        
                                    </FooterTemplate>
                                </asp:Repeater>
                            </ItemTemplate>
    
                            <FooterTemplate>
                                
                                </table>
                            </FooterTemplate>
                        </asp:Repeater>

    the span locates in (rptrActivities) which is not accessible from the code behind

    This is how I bind items to each section (internal repeater)

    Protected Sub rptrSections_ItemDataBound(sender As Object, e As RepeaterItemEventArgs) Handles rptrSections.ItemDataBound
            Try
                If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
                    Dim SectionId As String = TryCast(e.Item.FindControl("hdnSection"), HiddenField).Value
                    ActivitiesSqlDataSource.SelectParameters.Clear()
                    ActivitiesSqlDataSource.SelectParameters.Add("sectionID", SectionId)
                    ActivitiesSqlDataSource.SelectParameters.Add("intervalStart", TypeCode.DateTime, hdnIntervalStartDate.Value)
                    ActivitiesSqlDataSource.SelectParameters.Add("intervalEnd", TypeCode.DateTime, hdnIntervalEndDate.Value)
                    Dim dataView As DataView = DirectCast(ActivitiesSqlDataSource.Select(DataSourceSelectArguments.Empty), DataView)
    
    
                    Dim rptrActivities As Repeater = TryCast(e.Item.FindControl("rptrActivities"), Repeater)
                    rptrActivities.DataSource = dataView
                    rptrActivities.DataBind()
    
    
                End If
            Catch ex As Exception
    
            End Try
        End Sub

    any Ideas?

    Wednesday, November 7, 2018 6:10 PM
  • User61956409 posted

    Hi 0591666959,

    the span is not accessable from the code behind since it is within a nested Repeater

    You can find it in rptrActivities_ItemDataBound event, like below.

    <ItemTemplate>
        <tr>
            <td>
                <span runat="server" id="cspan" style="font-size: 1.5em; color: tomato;">
                    <i class="fas fa-circle">content here</i>
                </span>
            </td>
            <td>
                <%# DataBinder.Eval(Container.DataItem, "ActivityName") %>
                <%--<asp:HiddenField ID="hdnFieldFunction" runat="server" Value='<%# Eval("Code") %>' />--%>
            </td>
        </tr>

    In code behind:

    Protected Sub rptrActivities_ItemDataBound(sender As Object, e As RepeaterItemEventArgs)
        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
    
            'your code logic here
    
            Dim span As HtmlGenericControl = e.Item.FindControl("cspan")
            span.Style.Add("color", "yellow")
        End If
    End Sub

    With Regards,

    Fei Han

    Thursday, November 8, 2018 6:38 AM
  • User1700504264 posted

    <g class="gr_ gr_10 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="10" data-gr-id="10">Hi</g> 0591666959,

    0591666959

    the span is not accessable from the code behind since it is within a nested Repeater

    You can find it in rptrActivities_ItemDataBound event, like below.

    <ItemTemplate>
        <tr>
            <td>
                <span runat="server" id="cspan" style="font-size: 1.5em; color: tomato;">
                    <i class="fas fa-circle">content here</i>
                </span>
            </td>
            <td>
                <%# DataBinder.Eval(Container.DataItem, "ActivityName") %>
                <%--<asp:HiddenField ID="hdnFieldFunction" runat="server" Value='<%# Eval("Code") %>' />--%>
            </td>
        </tr>

    In code behind:

    Protected Sub rptrActivities_ItemDataBound(sender As Object, e As RepeaterItemEventArgs)
        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
    
            'your code logic here
    
            Dim span As HtmlGenericControl = e.Item.FindControl("cspan")
            span.Style.Add("color", "yellow")
        End If
    End Sub

    With Regards,

    Fei Han

    Thank you <g class="gr_ gr_240 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="240" data-gr-id="240"><g class="gr_ gr_241 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation replaceWithoutSep" id="241" data-gr-id="241">Fei</g></g> 

    Actually, the repeater itself is not accessible from the code behind! 

    since it is nested in another repeater, so I can not declare that event in the code behind

    is there any way to go around this?

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 8, 2018 4:51 PM
  • User1700504264 posted

    <g class="gr_ gr_14 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="14" data-gr-id="14">Finally</g> I solved this issue

    This is how I solved it

    First: I replaced the <span> with <asp:label>

    <td>
                                                <asp:label runat="server" CssClass='<%# Eval("ActivityStatusColor") %>'><i class="fas fa-circle"></i></asp:label>
                                                <%--<span style="font-size: 1.5em; color:tomato;">
                                                  <i class="fas fa-circle"></i>
                                                </span>--%>
                                            </td>

    Second: I bind a class name to the CssClass attribute of the label, depending on the status

    SELECT r.ID as Code, 
    					r.intervalStart as RecordStart, 
    					r.intervalEnd as RecordEnd, 
    					r.expectedRecord as Target, 
    					r.achievedRecord as Record, 
    					r.recordDate as RecordDate,
    					r.evidence as evidence,
    					--r.stumblingReason as stumblingreason,
    					a.title as ActivityName,  
    					a.[status] as ActivityStatus,
    					a.StumblingReason as stumblingreason,
    					ActivityStatusColor=(CASE a.[status] WHEN 0 THEN 'LightSlateGray' WHEN 1 THEN 'MediumSpringGreen' WHEN 2 THEN 'Dodgerblue'  WHEN 3 THEN 'Tomato' END ), 
    					a.kpiValue as kpiValue,
    					(SELECT SUM(achievedRecord) FROM Record r WHERE r.Activity=a.ID) as achieved
    Third: I added those classes with the attributes I need in the CSS style file


    .LightSlateGray { font-size: 1.5em; color: LightSlateGray; } .MediumSpringGreen { font-size: 1.5em; color: MediumSpringGreen; } .Dodgerblue { font-size: 1.5em; color: Dodgerblue; } .Tomato { font-size: 1.5em; color: Tomato; }

    Saturday, November 10, 2018 7:54 PM