Atlas Control With GridView And DropDownList

I just saw the video tutorial of using the Atlas project with ASP.NET from Scott Guthrie. It is an awesome introduction to the Atlas Project. You can download the tutorial from the following link:

http://weblogs.asp.net/scottgu/archive/2006/03/29/441357.aspx 

The tutorial explains how you can make a simple Task list application using ASP.NET 2.0 and add Atlas features to it. One of the cool things that Atlas introduces is the Update Panel control. You can simply place a server control inside the Update Panel control and the events of the server control will be handled on the client side. This means that if you place GridView control inside the Update Panel the GridView events will be handled client side without making a postback.

For this the first thing you need to do is to enable the script rendering of the Atlas. You can do this by using the ScriptManager control.

<atlas:ScriptManager ID="sm" runat="server" EnablePartialRendering="true" />

After the ScriptManager control is in-place all you need to do is to add the GridView control inside the Update Panel control.

<atlas:UpdatePanel ID="up1" runat="server">         
        <Triggers>        
        <atlas:ControlValueTrigger
        ControlID="MyDropDownList" PropertyName="SelectedValue" />
        </Triggers>                
        <ContentTemplate>        
        
            &nbsp;<asp:GridView ID="GridView1"
            runat="server" AllowPaging="True" AllowSorting="True"
                BackColor="White" BorderColor="#CC9966"
                BorderStyle="None" BorderWidth="1px"
                CellPadding="4" DataSourceID="SqlDataSource1">
                <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
                <RowStyle BackColor="White" ForeColor="#330099" />
                <SelectedRowStyle BackColor="#FFCC66"
                Font-Bold="True" ForeColor="#663399" />
                <PagerStyle BackColor="#FFFFCC"
                ForeColor="#330099" HorizontalAlign="Center" />
                <HeaderStyle BackColor="#990000"
                Font-Bold="True" ForeColor="#FFFFCC" />
            </asp:GridView>
        
        </ContentTemplate>
        
        </atlas:UpdatePanel>

The <Triggers> tag inside the Update Panel control indicates that the GridView will change its data based on the selected item of the DropDownList. The DropDownList is defined below:

<asp:DropDownList ID="MyDropDownList" runat="server" AutoPostBack="True" >

<asp:ListItem Value="true">Completed</asp:ListItem>

<asp:ListItem Value="false">Not Completed</asp:ListItem>

</asp:DropDownList>

There is much much more to Atlas. You can visit http://atlas.asp.net/Default.aspx?tabid=47 for more details and information.

 

powered by IMHO 1.3

Print | posted @ Friday, March 31, 2006 11:41 PM

Twitter