Поделиться через

Практическое руководство. Динамическая установка ширины столбцов серверного веб-элемента управления GridView

  • Статья

Обновлен: Ноябрь 2007

По умолчанию размер столбцов в элементе управления GridView задается автоматически. Столбцы отображаются в виде ячеек таблицы HTML (элементов td) без информации о ширине. Большинство обозревателей устанавливают ширину ячеек таблицы, исходя из размеров самого широкого столбца.

При необходимости можно задать ширину каждого столбца в элементе управления GridView программным путем. Это полезно, если ширина столбца зависит от информации, доступной только во время выполнения. Например, можно изменять размеры столбца в зависимости от его содержимого — то есть на основе данных, к которым привязывается элемент управления GridView.

Стандартная методика установки ширины столбцов включает задание значения свойства Width для шаблона столбца. При необходимости установки ширины столбца в зависимости от его содержимого можно создать обработчик для событий RowDataBound. Это позволяет получить доступ к данным строки для их измерения.

Динамическая установка ширины столбца

  • Чтобы задать нужную ширину столбца, задайте для свойства Width свойства ItemStyle столбца элемента управления GridView необходимую ширину.

    В следующем примере кода показано, как задать ширину всех столбцов в элементе управления GridView1, используя величину, вводимую пользователем в текстовом поле.

    Protected Sub Button1_Click(ByVal sender As Object, _
        ByVal e As System.EventArgs)
    Try
      Dim colWidth As Integer
      colWidth = CInt(Server.HtmlEncode(TextBox1.Text))
      If colWidth > 0 Then
        For i As Integer = 0 To GridView1.Columns.Count - 1
          GridView1.Columns(i).ItemStyle.Width = colWidth
        Next
      End If
    Catch
      ' Report error.
    End Try
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    try
    {
      int colWidth = Int16.Parse(Server.HtmlEncode(TextBox1.Text));
      if (colWidth > 0)
      {
        for (int i = 0; i < GridView1.Columns.Count; i++)
        {
          GridView1.Columns[i].ItemStyle.Width = colWidth;
        }
      }
    }
    catch
    {
      // Report error.      
    }
}

Установка ширины столбца в зависимости от содержащихся в нем данных

  1. Создайте обработчик для событий RowDataBound.

    Событие RowDataBound происходит каждый раз, когда новая строка привязывается к данным в сетке, и позволяет обращаться к данным всех строк.

  2. В обработчике событий сделайте следующее:

    1. Создайте объект DataRowView и присвойте ему значение DataItem, соответствующее текущей строке сетки.

      Свойство DataItem имеет базовый объектный тип. Соответственно, для него необходимо приведение.

    2. Проверьте строку данных (DataControlRowType), чтобы убедиться, что вы работаете со строкой, привязанной к данным, а не с заголовком или нижним колонтитулом.

    3. Извлеките из объекта DataRowView значение данных, которое необходимо проверить.

    4. Задайте свойство Width для свойства ItemStyle.

    5. Задайте для свойства Wrap свойства ItemStyle значение false.

      Если свойство Wrap имеет значение false, то столбец будет автоматически изменять свои размеры.

    В следующем примере кода показано, как задавать ширину столбца (в данном случае — третьего) в зависимости от ширины самого широкого элемента данных во втором столбце. Обработчик событий RowDataBound вызывается однократно для каждой строки данных, которая отображается в элементе управления GridView. Количество знаков в самом широком элементе сохраняется в коде в защищенном члене страницы. Ширина столбца устанавливается в коде равной количеству знаков, умноженному на 30 (произвольный множитель).

    Protected widestData As Integer
Protected Sub GridView1_RowDataBound(ByVal sender As Object, _
        ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
    Dim drv As System.Data.DataRowView
    drv = CType(e.Row.DataItem, System.Data.DataRowView)
    If e.Row.RowType = DataControlRowType.DataRow Then
      If drv IsNot Nothing Then
        Dim catName As String = drv(1).ToString()
        Dim catNameLen As Integer = catName.Length
        If catNameLen > widestData Then
          widestData = catNameLen
          GridView1.Columns(2).ItemStyle.Width = _
              widestData * 30
          GridView1.Columns(2).ItemStyle.Wrap = False
        End If
      End If
    End If
End Sub

Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Me.Load
    widestData = 0
End Sub

    protected int widestData;
protected void GridView1_RowDataBound(object sender, 
    GridViewRowEventArgs e)
{
    System.Data.DataRowView drv;
    drv = (System.Data.DataRowView)e.Row.DataItem;
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
      if (drv != null)
      {
        String catName = drv[1].ToString();
        Response.Write(catName + "/");

        int catNameLen = catName.Length;
        if (catNameLen > widestData)
        {
          widestData = catNameLen;
          GridView1.Columns[2].ItemStyle.Width =
            widestData * 30;
          GridView1.Columns[2].ItemStyle.Wrap = false;
        }

      }
    }
}

protected void Page_Load(object sender, EventArgs e)
{
    widestData = 0;
}

См. также

Ссылки

Общие сведения о серверном веб-элементе управления GridView