System.Web.UI.WebControls.GridView i TemplateField, czyli wygodniejsza wizualizacja i edycja [PL]

GridView jest bardzo często wykorzystywany do wyświetlania danych typu tabelarycznego (np. lista umów w systemie), wystarczy że podepniemy się do obiektu (np. DataSet'a), który zawiera zestaw danych, które chcemy wyświetlić i już mamy ładną tabelkę na stronie. W prosty sposób można dodać kolejną funkcjonalność: edycji, czy kasowania elementów, w tym celu wystarczy wykonać kilka kliknięć i już... Gorzej, gdy nasz zestaw danych (nasza tabela) zawiera odwołania do innych tabel, np. tabela UMOWY jest powiązana z inną tabelą KONTRAHENCI i w ten sposób wskazywane jest powiązanie, z kim umowa jest podpisywana lub dla kogo jest ona wykonywana. Zwykle takie powiązanie jest realizowane przez klucze obce, np. identyfikatory wskazujące na wiersze w innych tabelach. Oczywiście wyświetlanie identyfikatora (liczby, czy GUID'a) jest bez sensu, wolelibyśmy przecież widzieć konkretną nazwę. Okazuje się, że jest to proste do wykonania, a z pomocą przychodzi TemplateField.

Przykład z DropDownList

Zobaczmy przykład, który jest oparty o wspomniane wcześniej tabele UMOWY i KONTRAHENCI, oryginalnie kreator VisualStudio umieścił w GridView następującą definicję kolumny:

<asp:BoundField DataField="ID_KLIENTA" HeaderText="ID_KLIENTA" 
                SortExpression="ID_KLIENTA" />

Ja postanowiłem w tym miejscu umieścić listę typu DropDownList. Zamieniłem więc powyższy wpis na:

<asp:TemplateField HeaderText="Klient" SortExpression="ID_KLIENTA">
    <ItemTemplate>
        <asp:DropDownList ID="DropDownList_customer_disp" runat="server" DataSourceID="ObjectDataSource_GodzinyDataset_customers"
            DataTextField="NAZWA_KROTKA" DataValueField="ID" SelectedValue='<%# Bind("ID_KLIENTA") %>'
            Enabled="false" />
    </ItemTemplate>
    <EditItemTemplate>
        <asp:DropDownList ID="DropDownList_customer_edit" runat="server" DataSourceID="ObjectDataSource_GodzinyDataset_customers"
            DataTextField="NAZWA_KROTKA" DataValueField="ID" SelectedValue='<%# Bind("ID_KLIENTA") %>'>
        </asp:DropDownList>
    </EditItemTemplate>
</asp:TemplateField> 

Umieściłem więc dwa szablony:

• ItemTemplate - wykorzystywany do wyświetlania danych (DropDownList'a jest zablokowana: Enabled="false")
• EditItemTemplate - wykorzystywany do edycji danych (DropDownList'a pozwala na wybieranie kontrahenta.

Podobnie zrobiłem dla innych obcych kluczy i w efekcie otrzymałem:

Proste prawda?

Przykład z Calendar

Podobnie można np. jeszcze zrobić z datami i kalendarzami, np. zamieniamy:

<asp:BoundField DataField="DATA_UMOWY" HeaderText="DATA_UMOWY" SortExpression="DATA_UMOWY" />

na:

<asp:TemplateField HeaderText="DATA UMOWY" SortExpression="DATA_UMOWY">
    <ItemTemplate>
        <asp:Label ID="Label_date_disp" runat="server" Text='<%# Bind("DATA_UMOWY") %>'></asp:Label>
    </ItemTemplate>
    <EditItemTemplate>
        <asp:Calendar ID="Calendar_date_disp" runat="server" 
            SelectedDate='<%# Bind("DATA_UMOWY") %>'
            VisibleDate='<%# Eval("DATA_UMOWY") %>'></asp:Calendar>
    </EditItemTemplate>
</asp:TemplateField>

i mamy:

Podsumowanie

Na koniec polecam jeszcze przeczytać artykuł: „Tutorial 12: Using TemplateFields in the GridView Control” (http://msdn.microsoft.com/en-us/library/bb288032.aspx).