America/US Samples
Europe Samples
Asia Samples

Gaia Ajax: GridView

The Gaia Ajax GridView displays the values of a data source in a table where each column represents a field and each row represents a record. It inherits from the ASP.NET GridView, and has built-in Ajax behaviour.

In this sample we are showing the power of the Gaia Ajax GridView just using markup. Edit, Delete, Select, Paging and Sorting is all ready using the flexible ObjectDataSource.

 IdStatusContact PersonActivity NameActivity DateIs Checked
Edit Delete Select11Joel FitzgeraldDevelopment9/9/2010 4:39:33 PM
Edit Delete Select21Tom FitzgeraldWrite Blog9/9/2010 7:53:33 PM
Edit Delete Select31Nina ScholesFix Bugs9/9/2010 9:24:33 PM
Edit Delete Select41Myron FitzgeraldRead newspapers9/9/2010 10:38:33 PM
Edit Delete Select51Nina ScholesDevelopment9/4/2010 3:37:33 PM
Edit Delete Select61Lucy FarradayMorning meeting9/10/2010 12:13:33 AM
Edit Delete Select71Scott NielsenAttend Seminar9/7/2010 12:38:33 PM
Edit Delete Select81Bob AndersonInterview9/8/2010 5:09:33 PM
Edit Delete Select91Tom FitzgeraldCode Review9/7/2010 10:59:33 AM
Edit Delete Select101Bob AndersonSales Presentation9/6/2010 7:37:33 PM
123

Markup (ASPX/.aspx)

   1:  <gaia:GridView 
   2:      ID="zGridView" 
   3:      runat="server" 
   4:      Width="100%"
   5:      AllowPaging="True" 
   6:      AllowSorting="True" 
   7:      DataKeyNames="Id"
   8:      DataSourceID="zObjectDataSource" 
   9:      AutoGenerateColumns="False">
  10:      <Columns>
  11:          <gaia:CommandField 
  12:              ShowEditButton="true" 
  13:              ShowDeleteButton="true" 
  14:              ShowSelectButton="true" />
  15:          <gaia:BoundField 
  16:              DataField="Id" 
  17:              HeaderText="Id" 
  18:              SortExpression="Id"
  19:              ReadOnly="true" />
  20:          <gaia:BoundField 
  21:              DataField="Status" 
  22:              HeaderText="Status" 
  23:              SortExpression="Status"
  24:              ControlStyle-Width="30px" />
  25:          <gaia:BoundField 
  26:              DataField="ContactPerson" 
  27:              HeaderText="Contact Person"
  28:              SortExpression="ContactPerson"
  29:              ControlStyle-Width="100px" />
  30:          <gaia:BoundField 
  31:              DataField="ActivityName" 
  32:              HeaderText="Activity Name"
  33:              SortExpression="ActivityName"
  34:              ControlStyle-Width="100px" />
  35:          <gaia:BoundField 
  36:              DataField="ActivityDate" 
  37:              HeaderText="Activity Date"
  38:              SortExpression="ActivityDate" 
  39:              ReadOnly="true" />
  40:          <gaia:CheckBoxField 
  41:              DataField="IsChecked" 
  42:              HeaderText="Is Checked"
  43:              SortExpression="IsChecked" 
  44:              ItemStyle-HorizontalAlign="Center" />
  45:      </Columns>
  46:  </gaia:GridView>
  47:  <asp:ObjectDataSource 
  48:      EnablePaging="False" 
  49:      TypeName="Gaia.WebWidgets.Samples.Utilities.CalendarController"
  50:      ID="zObjectDataSource" 
  51:      runat="server" 
  52:      SelectMethod="ListAsDataTable"
  53:      UpdateMethod="Update"
  54:      DeleteMethod="Delete">
  55:  </asp:ObjectDataSource>
  56: