How to Play with DataGrid Control - How the Work is Done
(Page 2 of 7 )
How the work is actually done:
<HTML CODE>
<HTML>
<HEAD>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
</HEAD>
<body MS_POSITIONING="GridLayout">
<FORM Runat="server">
<TABLE id="Table2" >
<TR>
<TD>
<asp:DataGrid id="dgNonApproveList" runat="server" OnPageIndexChanged="MyDataGrid_Page" OnCancelCommand="dgNonApproveList_CancelCommand" OnUpdateCommand="dgNonApproveList_UpdateCommand" OnEditCommand="dgNonApproveList_EditCommand" DataKeyField="DocTId" Width="752px" AllowPaging="True" AllowSorting="True" ForeColor="#000000" Font-Names="Arial" Font-Size="Smaller" AutoGenerateColumns="false">
<HeaderStyle Font-Bold="True"></HeaderStyle>
<Columns>
<asp:TemplateColumn>
<HeaderTemplate>
<input type="CheckBox" name="SelectAllCheckBox" onclick="SelectAll(this)">
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox id="SelectCheckBox" Runat="Server" />
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="UserId" HeaderText="User Id"></asp:BoundColumn>
<asp:BoundColumn DataField="DocTitle" HeaderText="DocTitle"></asp:BoundColumn>
<asp:TemplateColumn>
<HeaderTemplate>
Date From
</HeaderTemplate>
<ItemTemplate>
<%# DataBinder.Eval(Container, "DataItem.DateTo")%>
</ItemTemplate>
<EditItemTemplate>
<asp:Calendar ID=calDateFrom SelectedDate='<%# DataBinder.Eval(Container, "DataItem.DateTo")%>' Runat="server" Width="186px" ForeColor="Black" Font-Size="8pt" Height="134px" BackColor="White" DayNameFormat="FirstLetter" Font-Names="Verdana" BorderColor="#999999" CellPadding="4"><TodayDayStyle ForeColor="Black" BackColor="#CCCCCC"></TodayDayStyle><SelectorStyle BackColor="#CCCCCC"> </SelectorStyle><NextPrevStyle VerticalAlign="Bottom"></NextPrevStyle>
<DayHeaderStyle Font-Size="7pt" Font-Bold="True" BackColor="#CCCCCC"></DayHeaderStyle>
<SelectedDayStyle Font-Bold="True" ForeColor="White" BackColor="#666666"> </SelectedDayStyle><TitleStyle Font-Bold="True" BorderColor="Black" BackColor="#999999"> </TitleStyle> <WeekendDayStyle BackColor="#FFFFCC"> </WeekendDayStyle> <OtherMonthDayStyle ForeColor="#808080"> </OtherMonthDayStyle>
</asp:Calendar>
</EditItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<HeaderTemplate>
Date Till
</HeaderTemplate>
<ItemTemplate>
<%# DataBinder.Eval(Container, "DataItem.DateTill")%>
</ItemTemplate>
<EditItemTemplate>
<asp:Calendar ID="calDateTo" SelectedDate='<%# DataBinder.Eval(Container, "DataItem.DateTill")%>' Runat="server" Width="186px" ForeColor="Black" Font-Size="8pt" Height="134px" BackColor="White" DayNameFormat="FirstLetter" Font-Names="Verdana" BorderColor="#999999" CellPadding="4"> <TodayDayStyle ForeColor="Black" BackColor="#CCCCCC"></TodayDayStyle> <SelectorStyle BackColor="#CCCCCC"> </SelectorStyle> <NextPrevStyle VerticalAlign="Bottom"></NextPrevStyle>
<DayHeaderStyle Font-Size="7pt" Font-Bold="True" BackColor="#CCCCCC"></DayHeaderStyle>
<SelectedDayStyle Font-Bold="True" ForeColor="White" BackColor="#666666"> </SelectedDayStyle> <TitleStyle Font-Bold="True" BorderColor="Black" BackColor="#999999"> </TitleStyle> <WeekendDayStyle BackColor="#FFFFCC"></WeekendDayStyle><OtherMonthDayStyle ForeColor="#808080"> </OtherMonthDayStyle></asp:Calendar>
</EditItemTemplate>
</asp:TemplateColumn>
<asp:EditCommandColumn ButtonType="LinkButton" UpdateText="Update!" CancelText="Cancel!" EditText="Edit!"></asp:EditCommandColumn>
</Columns>
</asp:datagrid>
</TD>
</TR>
<TR>
<TD align="left"><asp:button id="btnApprove" onclick="btnApprove_Click" runat="server" Text="Delete"></asp:button><asp:label ID="MessageLabel" ForeColor="Red" EnableViewState="False" Runat="Server" Font-Bold="True"></asp:label></TD>
</TR>
</TABLE>
<TABLE id="Table1" style="Z-INDEX: 102; LEFT: 8px; WIDTH: 760px; POSITION: absolute; TOP: 8px; HEIGHT: 77px" cellSpacing="1" cellPadding="1" width="760" border="0">
<TR>
<TD style="WIDTH: 114px">Record Per Page</TD>
<TD style="WIDTH: 186px"><asp:textbox id="txtPageLength" runat="server" Width="64px"></asp:textbox></TD>
</TR>
<TR>
<TD style="WIDTH: 114px">Paging Style</TD>
<TD style="WIDTH: 186px"><asp:radiobutton id="optNum" runat="server" Text="1 2 3 4 ...." GroupName="opt" Checked="True"></asp:radiobutton><asp:radiobutton id="button" runat="server" Text="Pre Next" GroupName="opt"></asp:radiobutton></TD>
<TD><asp:button id="btnDisplay" onclick="btnDisplay_Click" runat="server" Text="Display Record"></asp:button></TD>
</TR>
<TR>
<TD style="WIDTH: 114px">Sort By</TD>
<TD style="WIDTH: 186px">
<asp:dropdownlist id="ddwnSortBy" runat="server">
<asp:ListItem Value="DocTemplate.DocTitle">Document Title</asp:ListItem>
<asp:ListItem Value="UserDocDefault.DateTo">Date From</asp:ListItem>
<asp:ListItem Value="UserDocDefault.DateTill">Date Till</asp:ListItem>
</asp:dropdownlist></TD>
</TR>
</TABLE>
</FORM>
</body>
</HTML>
Next: The Page_Load Event Handler >>
More ASP.NET Articles
More By Mayank Gupta