Monday, July 11, 2011

Templates in Gridview (Binding data from SQL result)

When you have a Gridview and hook it up to a datasource, the result will be displayed in BoundFields.
You sometimes might want to have a textbox instead of an auto-generated BoundField .

Here's how I do it

Step 1: Generate your Gridview as you normally do. Select a datasource, select a SqlStoredProcedure/query and a schema will be generated with Boundfields automatically.

For example, in my case, the stored procedure returns 3 fields. Entry, Date Posted and Posted By.
And this is how the BoundFields look.
<asp:GridView ID="JournalGrid" runat="server" EmptyDataText="No Journal Entries"
            AutoGenerateColumns="False" DataSourceID="JournalDS">
    <Columns>
    <asp:BoundField DataField="Entry" HeaderText="Entry"
        SortExpression="Entry" />                                      
    <asp:BoundField DataField="Date Posted" HeaderText="Date Posted"
        SortExpression="Date Posted" />
    <asp:BoundField DataField="Posted By" HeaderText="Posted By"
        SortExpression="Posted By" />
    </Columns>
</asp:GridView>

Step 2: Lets say we want to change the Entry to be displayed as a Textbox

Change the BoundField for the Entry to:

<asp:TemplateField>
    <ItemTemplate>
    <asp:TextBox ID="EntriesText" Runat="server" ReadOnly="true" Text='<%# Bind("Entry") %>'
      TextMode="MultiLine" Rows="5" Columns="50" />          
    </ItemTemplate>
</asp:TemplateField> 

Final code look like this:

<asp:GridView ID="JournalGrid" runat="server" EmptyDataText="No Journal Entries"
     AutoGenerateColumns="False" DataSourceID="JournalDS">
<Columns>
<asp:TemplateField>
     <ItemTemplate>
     <asp:TextBox ID="EntriesText" Runat="server" ReadOnly="true" Text='<%# Bind("Entry") %>'
          TextMode="MultiLine" Rows="5" Columns="50" />          
    </ItemTemplate>
</asp:TemplateField>                                                    
<asp:BoundField DataField="Date Posted" HeaderText="Date Posted"
     SortExpression="Date Posted" />
<asp:BoundField DataField="Posted By" HeaderText="Posted By"
     SortExpression="Posted By" />
</Columns>
</asp:GridView>

Cheers

No comments:

Post a Comment