Как изменить <div >'s style=width, который находится внутри ItemTemplate

Question

У меня есть Gridview, и один из столбцов должен показывать прогресс по набору задач. Я использую индикатор загрузки в одной из ячеек сетки.

Как я могу изменить div style="width: __%" когда он находится внутри ItemTemplate, который находится внутри asp: TemplateField?

<asp:GridView ID="gvExample" runat="server" CssClass="table table-bordered table-striped table-hover" />
    <Columns>
        <asp:BoundField />
        <asp:BoundField />
        <asp:BoundField />                    
        <asp:TemplateField ItemStyle-Width="200">
            <ItemTemplate>
                <div class="progress">
                    <div style="width: 50%" class="progress-bar progress-bar-striped" role="progressbar" height: 20px;" aria-valuemin="0" aria-valuemax="100"></div>
                    <div id="ApprovedTherm" runat="server" class="progress-bar progress-bar-striped progress-bar-success" role="progressbar" height: 20px;" aria-valuemin="0" aria-valuemax="100"></div>
                    <div id="TotalTherm" runat="server" class="progress-bar progress-bar-striped progress-bar-warning" role="progressbar" height: 20px;" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>            
</asp:GridView>

TLDR: как мне установить div style="width: __%" из кода позади?

Answer 1

Вы можете сделать это, установив атрибуты в коде позади. Но вам нужно добавить ID а также runat=server в div первым.

<ItemTemplate>
    <div id="ProgressBar" runat="server" style="width: 50%" class="progress-bar progress-bar-striped"></div>
</ItemTemplate>

Затем в коде позади используйте FindControl, чтобы найти DIV и установить атрибуты.

foreach (GridViewRow row in GridView1.Rows)
{
    HtmlGenericControl hgc = row.FindControl("ProgressBar") as HtmlGenericControl;
    hgc.Attributes.Add("style", "width: 100%");
}

Или по индексу

HtmlGenericControl hgc = GridView1.Rows[i].FindControl("ProgressBar") as HtmlGenericControl

Answer 2

1. Дайте идентификатор DIV и запустите его на сервере

   <div id="temp" runat="server" ... > ... </div>
   

2. Получить его из события RowDataBound:

   protected void gvExample_RowDataBound(object sender, GridViewRowEventArgs e)
   {
       if (e.Row.RowType == DataControlRowType.DataRow)
       {
           // access the div here
           HtmlGenericControl tempDiv = (HtmlGenericControl) e.Row.FindControl("temp");
           tempDiv.Attributes.Add("style", "width: 50%;");
       }
   }
   

   Примечание: не забудьте добавить OnRowDataBound="gvExample_RowDataBound" атрибут вашего GridView.