1. Start by making a page in your application called YourPage.aspx
To implement paging and sorting in an ASP.NET GridView, you must do the following actions:
- Sort and Page: Sorting and paging can be made available by setting the AllowSorting and AllowPaging attributes to True.
- Set Page Size: You can specify how many records are shown on each page by using the PageSize property.
Handle Sorting and Paging Events: In order to control the sorting and paging functionality, you must handle the Sorting and PageIndexChanging events. - Bind Data: To keep sorting and paging in place, make sure the GridView is tied to a data source on each postback.
Sample Programming
This is a comprehensive illustration of an ASP.NET GridView with paging and sorting turned on:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dvGrid<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row-fluid<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><span class="token namespace">asp:</span>GridView <span class="token attr-name">ID</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MDetails<span class="token punctuation">"</span></span> <span class="token attr-name">runat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>server<span class="token punctuation">"</span></span> <span class="token attr-name">AutoGenerateColumns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>False<span class="token punctuation">"</span></span> <span class="token attr-name">CellPadding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span> <span class="token attr-name">Width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span> <span class="token attr-name">AllowPaging</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>True<span class="token punctuation">"</span></span> <span class="token attr-name">AllowSorting</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>True<span class="token punctuation">"</span></span> <span class="token attr-name">CssClass</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>GridStyle<span class="token punctuation">"</span></span> <span class="token attr-name">PageSize</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">OnSorting</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MDetails_Sorting<span class="token punctuation">"</span></span> <span class="token attr-name">OnPageIndexChanging</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MDetails_PageIndexChanging<span class="token punctuation">"</span></span> <span class="token attr-name">BackColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>White<span class="token punctuation">"</span></span> <span class="token attr-name">BorderColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#CCCCCC<span class="token punctuation">"</span></span> <span class="token attr-name">BorderStyle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>None<span class="token punctuation">"</span></span> <span class="token attr-name">BorderWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1px<span class="token punctuation">"</span></span> <span class="token attr-name">GridLines</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>None<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">Style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">line-height</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>columns<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><span class="token namespace">asp:</span>TemplateField <span class="token attr-name">HeaderText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>क्र.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>itemtemplate<span class="token punctuation">></span></span> <span class="token directive tag"><%# <span class="token punctuation">(</span><span class="token punctuation">(</span>GridViewRow<span class="token punctuation">)</span> Container<span class="token punctuation">)</span><span class="token punctuation">.</span>RowIndex <span class="token operator">+</span> <span class="token number">1</span> <span class="token operator">+</span> <span class="token punctuation">(</span>MDetails<span class="token punctuation">.</span>PageIndex <span class="token operator">*</span> MDetails<span class="token punctuation">.</span>PageSize<span class="token punctuation">)</span> %></span> <span class="token tag"><span class="token punctuation"></</span>itemtemplate<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span><span class="token namespace">asp:</span>TemplateField<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><span class="token namespace">asp:</span>BoundField <span class="token attr-name">DataField</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DistrictName<span class="token punctuation">"</span></span> <span class="token attr-name">HeaderText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>नाम<span class="token punctuation">"</span></span> <span class="token attr-name">SortExpression</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"><</span><span class="token namespace">asp:</span>BoundField <span class="token attr-name">DataField</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LocalName<span class="token punctuation">"</span></span> <span class="token attr-name">HeaderText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>निकाय का नाम <span class="token punctuation">"</span></span> <span class="token attr-name">SortExpression</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LocalName<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"><</span><span class="token namespace">asp:</span>BoundField <span class="token attr-name">DataField</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ZoneName<span class="token punctuation">"</span></span> <span class="token attr-name">HeaderText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ग्राम<span class="token punctuation">"</span></span> <span class="token attr-name">SortExpression</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Zone<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"><</span><span class="token namespace">asp:</span>BoundField <span class="token attr-name">DataField</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Village<span class="token punctuation">"</span></span> <span class="token attr-name">HeaderText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/वार्ड<span class="token punctuation">"</span></span> <span class="token attr-name">SortExpression</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>WardName<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"><</span><span class="token namespace">asp:</span>BoundField <span class="token attr-name">DataField</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Id<span class="token punctuation">"</span></span> <span class="token attr-name">HeaderText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>आईडी<span class="token punctuation">"</span></span> <span class="token attr-name">SortExpression</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Id<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"><</span><span class="token namespace">asp:</span>BoundField <span class="token attr-name">DataField</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>NewId<span class="token punctuation">"</span></span> <span class="token attr-name">HeaderText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>आईडी<span class="token punctuation">"</span></span> <span class="token attr-name">SortExpression</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Id<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"><</span><span class="token namespace">asp:</span>BoundField <span class="token attr-name">DataField</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MemberName<span class="token punctuation">"</span></span> <span class="token attr-name">HeaderText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>हितग्राही नाम<span class="token punctuation">"</span></span> <span class="token attr-name">SortExpression</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MemberName<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>itemstyle <span class="token attr-name">horizontalalign</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>itemstyle<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span><span class="token namespace">asp:</span>BoundField<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><span class="token namespace">asp:</span>BoundField <span class="token attr-name">DataField</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Date<span class="token punctuation">"</span></span> <span class="token attr-name">DataFormatString</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{0:dd/MM/yyyy}<span class="token punctuation">"</span></span> <span class="token attr-name">HeaderText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>दिनाकं<span class="token punctuation">"</span></span> <span class="token attr-name">SortExpression</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Date<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"><</span><span class="token namespace">asp:</span>TemplateField <span class="token attr-name">HeaderText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>विवरण देखे<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>itemtemplate<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><span class="token namespace">asp:</span>Button <span class="token attr-name">ID</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btnViewDetails<span class="token punctuation">"</span></span> <span class="token attr-name">runat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>server<span class="token punctuation">"</span></span> <span class="token attr-name">Text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>देखें<span class="token punctuation">"</span></span> <span class="token attr-name">CssClass</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-success btn-sm<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">OnClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span><span class="token value javascript language-javascript"><span class="token operator"><</span><span class="token operator">%</span># <span class="token string">"return showDetailsPopup("</span> <span class="token operator">+</span> <span class="token function">Eval</span><span class="token punctuation">(</span><span class="token string">"ID"</span><span class="token punctuation">)</span> <span class="token operator">+</span><span class="token string">");"</span> <span class="token operator">%</span><span class="token operator">></span></span><span class="token punctuation">'</span></span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"><</span><span class="token namespace">asp:</span>Label <span class="token attr-name">ID</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lblmsg1<span class="token punctuation">"</span></span> <span class="token attr-name">runat</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>server<span class="token punctuation">"</span></span> <span class="token attr-name">Text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">Visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span><span class="token namespace">asp:</span>Label<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>itemtemplate<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>itemstyle <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>80px<span class="token punctuation">"</span></span> <span class="token attr-name">horizontalalign</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>itemstyle<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span><span class="token namespace">asp:</span>TemplateField<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>columns<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>footerstyle <span class="token attr-name">backcolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>White<span class="token punctuation">"</span></span> <span class="token attr-name">forecolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#000066<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"><</span>headerstyle <span class="token attr-name">backcolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#006699<span class="token punctuation">"</span></span> <span class="token attr-name">font-bold</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>True<span class="token punctuation">"</span></span> <span class="token attr-name">forecolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>White<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"><</span>headerstyle <span class="token attr-name">backcolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#0e4d92<span class="token punctuation">"</span></span> <span class="token attr-name">font-bold</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>True<span class="token punctuation">"</span></span> <span class="token attr-name">forecolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>White<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"><</span>pagerstyle <span class="token attr-name">backcolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>White<span class="token punctuation">"</span></span> <span class="token attr-name">forecolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#000066<span class="token punctuation">"</span></span> <span class="token attr-name">horizontalalign</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Left<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"><</span>rowstyle <span class="token attr-name">forecolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#000066<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"><</span>selectedrowstyle <span class="token attr-name">backcolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#669999<span class="token punctuation">"</span></span> <span class="token attr-name">font-bold</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>True<span class="token punctuation">"</span></span> <span class="token attr-name">forecolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>White<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"><</span>sortedascendingcellstyle <span class="token attr-name">backcolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#F1F1F1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"><</span>sortedascendingheaderstyle <span class="token attr-name">backcolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#007DBB<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"><</span>sorteddescendingcellstyle <span class="token attr-name">backcolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#CAC9C9<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"><</span>sorteddescendingheaderstyle <span class="token attr-name">backcolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#00547E<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"></</span><span class="token namespace">asp:</span>GridView<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> |
2. Now In Your YourPage.cs Page Add Method Of Sorting And Paging
Key Points of Sorting and Paging in Code-Behind
Sorting Event Handler (MDetails_Sorting)
- Event Trigger: This method is triggered when a column header is clicked to sort the GridView.
- Retrieve Data: Retrieve the data from ViewState.
- Sort Data: Sort the data based on the clicked column (e., SortExpression) and the sort direction.
- Rebind Data: Binds the sorted data back to the GridView.
2. Paging Event Handler (MDetails_PageIndexChanging)
- Event Trigger: This method is triggered when a different page is selected in the GridView.
- Set Page Index: Updates the PageIndex of the GridView to the new page index.
- Rebind Data: Calls BindGridView() to rebind the data and refresh the GridView with the new page.
3. Get Sort Direction (GetSortDirection)
- Purpose: Determines the sort direction (ascending or descending) based on the current column.
- State Management: Uses ViewState to store and retrieve the current sort direction and expression.
4. Bind Data (BindGridView)
- Purpose: Binds the GridView with data.
- Data Retrieval: Calls GetFamilyDetails() to fetch the data.
- State Management: Stores the data in ViewState for later use (sorting, paging).
- Bind Data: Binds the data to the GridView control.
ASP.NET 8.0.4 Hosting Recommendation
ASP.NET is a powerful platform for creating web applications and services. You must be comfortable with JavaScript, HTML, CSS, and C# before developing a web application in ASP.NET. On the market, there are thousands of web hosting companies providing ASP.NET Hosting. But, only very few web hosting companies could provide high quality ASP.NET hosting solution.
ASP.NET is the best development language in Windows platform, which is released by Microsoft and widely used to build all types of dynamic Web sites and XML Web services. With this article, we’re going to help you to find the best ASP.NET Hosting solution in Europe based on reliability, features, price, performance and technical support. After we reviewed about 30+ ASP.NET hosting providers in Europe, our Best ASP.NET Hosting Award in Europe goes to HostForLIFE.eu, one of the fastest growing private companies and one of the most reliable hosting providers in Europe.