Custom DataGrid Control (repost)

You are to create a custom control, overriding the standard GridView control, which supports a number of additional functions: 1. Searchable column 2. Ajax enabled result viewing (without refreshing page) 3. Custom pagination 4. Easier sorting ? Please download and read the spec. ## Deliverables You are to create a custom control, overriding the standard GridView control, which supports a number of additional functions: 1. Searchable and filterable? column 2. Ajax enabled result viewing (without refreshing page) 3. Custom pagination 4. Easier sorting At the end, I want to be able to do implement a gridview control with this: <CustomControl:AjaxGrid id="mdnAjaxGrid" runat="server" AutoGenerateColumns="False" DataKeyNames="Id" AllowPaging="True"? PageSize="40"? AllowSorting="True" DefaultSortExpression="title asc" DisplayCheckBox="True"? > <HeadingBar>//Group Permission</HeadingBar> <ControlBar> ? ? ? ? <asp:Button id="btnAdd" runat="server" cssClass="Add" onClick="btnAdd_onClick"/> ? ? ? ? <asp:Button id="hplAdd" runat="server" cssClass="Duplicate" onClick="btnDuplicate_onClick"? /> ? ? ? ? <asp:Button id="hplAdd" runat="server" cssClass="Select All" onClick="SelectAll"? /> ? ? ? ? <asp:Button id="hplAdd" runat="server" cssClass="De-Select All" onClick="DeselectAll" /> ? ? ? ? <asp:Button id="hplAdd" runat="server" cssClass="Delete" onClick="btnDelete" /> </ControlBar> <Columns> <asp:HyperlinkField DataTextField="Id" DataTextField="ID" DataNavigateUrlFields="id" DataNavigateUrlFormatString= "/default.aspx&{0}" SortExpression="ID asc" /> <asp:HyperlinkField DataTextField="Title" DataTextField="Title" DataNavigateUrlFields="id" SortExpression="title asc" Searchable="true" /> <asp:HyperlinkField DataTextField="Dtm_updated" DataTextField="Last Updated" DataNavigateUrlFields="id" SortExpression="Dtm_updated desc" /> </Columns> </CustomControl:AjaxGrid> Please see the attached three images for the styling and layout. This has to be exactly what the gridview control will look like. Graphics and icons have been provided. You'd need to style the control according to the interface provided. Also, the styles have to present fine on IE6, IE7 and Firefox 2 and 3. [login to view URL] ----------------- This showcases the overall layout of the control. The top has a HeaderBar, which shows the title of the grid. ControlBar showcases a list of controls available. These are a list of button controls with controllable text and css styling. Onclick events should be able to catch a list of ids checked. (WITHOUT REFRESHING, use AJAX!) The bottom row consists of a search button, which when clicked, will toogle up a row (see? "interface for [login to view URL]"). The Quick Search textfield allows me to enter text and hit enter and that will refresh the grid list itself (without refreshing the page), display the searched result. (see "interface for search [login to view URL]")? Bottom row also consists of a pager, which allows navigating pages thru pages, and also a refresh button, plus a paging information label. When creating the gridview: <CustomControl:AjaxGrid id="mdnAjaxGrid" runat="server" AutoGenerateColumns="False" DataKeyNames="Id" AllowPaging="True"? PageSize="40"? AllowSorting="True" DefaultSortExpression="title asc" DisplayCheckBox="True"? > AllowPaging: When this is true, the pagination will work, or the grid will show all data in one go, no pager at the bottom. PageSize: This tells the pagination how many items to display per page, if AllowPaging is set true. AllowSorting: This tells the gridview whether the sorting is allowed. If so, DefaultSortExpression simply tells the control which column to be sorted by default. Note, the sort expression is different from standard one, instead it just accepts the column name and desc or asc. DisplayCheckBox: This shows the checkboxlist if set to true, or hidden. Regarding the items in? <Columns>, I am not sure if hyperlinks are suitable, you can make decision here, but I just want the whole row to be clickable, and be able to pass the selected id to a destination page through query string or code behind. I also want a column to be filterable, if it is set to true, then a dropdownlist filter will appear somewhere and filter the dataset. For event handlers such as Add and duplicate, you don have to implement anything, just make sure ids can be passed into it. For select all and de-select all, you will have to write the javascript to do that. As for delete, you will have to make sure the event handler can get a list of ids selected. ?