Как установить CssClass на кнопку в DataGrid

Question

У меня есть ButtonColumn в DataGrid:

<asp:ButtonColumn HeaderText="Edit" ButtonType="PushButton" Text="Edit" />

Как мне установить класс CSS?

Единственный способ сделать это - подключиться к событию RowDataBound:

Protected Sub dgSchedule_ItemDataBound(sender As Object, e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles dgSchedule.ItemDataBound
    If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
        DirectCast(e.Item.Cells(6).Controls(0), Button).CssClass = "confirmButton"

    End If
End Sub

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

Я попытался использовать TemplateColumn и обычный asp:Button - это сработало, но затем щелкнув по нему, не сработало событие ItemCommand сетки, которую мне нужно запустить.

Answer 1

Я решил эту проблему, используя GridView вместо DataGrid.На самом деле не уверен, почему я вообще использовал DataGrid.

Это дает дополнительное свойство ControlStyle-CssClass

например

<asp:ButtonField HeaderText="Edit" ButtonType="Button" Text="Edit" ControlStyle-CssClass="confirmButton" />

Answer 2

Если вам нужно придерживаться DataGrid, а не использовать GridView, одним из способов решения этой проблемы является установка события OnItemDataBound.

OnItemDataBound="mydatagrid_ItemDataBound"

Затем в коде вы можете прикрепить класс CSS к кнопке следующим образом:

//ON DATA BIND
protected void mydatagrid_ItemDataBound(object sender, DataGridItemEventArgs e)
    if (e.Item.ItemType != ListItemType.Header && e.Item.ItemType != ListItemType.Footer) {
        Button myButton= (Button)e.Item.Cells[5].Controls[0];
        myButton.Attributes["class"] = "buttonClass";   
    }
}

Answer 3

У вас есть два варианта:

1.Вы можете установить свойство CssClass для ButtonColumn:

<asp:ButtonColumn CssClass="myStyle" ...></asp:ButtonColumn>

Это будет отображать следующий HTML-код:

<td class="myStyle">
    <input type=button name=select ...>
</td>

Как видите, класс CSS фактически применяется ксодержащий элемент.Чтобы стилизовать столбец, сделайте следующее:

.myClass
{
   /*Your style attributes go here*/
}

И чтобы стилизовать фактическую кнопку, сделайте это в своем CSS:

.myClass INPUT
{
   /*Your style attributes go here*/
}

---

2.В качестве альтернативы вы можете использовать TemplateColumn вместо ButtonColumn и установить свойство CssClass вложенного элемента управления кнопки:

<asp:TemplateColumn HeaderText="Delete">
    <ItemTemplate>
        <asp:Button ID="DeleteButton" runat=server Text="Delete" CssClass="myClass" CommandName="Delete" />
    </ItemTemplate>
</asp:TemplateColumn>

CSS для этого такой же, как и следовало ожидать:

.myClass
{
   /*Your style attributes go here*/
}