How to enable the gridview to display the header when no data is available)

Source: Internet
Author: User
Tags blank page

1. Preface when you bind data to the gridview control, if the bound record is blank, the page does not display the gridview, leading to blank page and the layout structure of the page is also affected. The method discussed below allows the gridview to display the field structure and display prompt information of the table when there is no data record.

The fields to be bound by the gridview are the same as those of the temple field. Here, we use the original function of the gridview to set that "data is empty" is displayed when the data is empty. If the emptydatatext attribute is not set, when the bound record is blank, the gridview will not be displayed on the page.

4. data Display 4.1 normal null record show write buttonnormalbind event function buttonnormalbind_click, add the following code to test the unprocessed gridview display: protected void buttonnormalbind_click (Object sender, eventargs E) {datatable dt = new datatable (); DT. columns. add ("temple_id"); DT. columns. add ("temple_name"); DT. columns. add ("location"); DT. columns. add ("build_date"); this. gridviewemptydatatest. datasource = DT; this. gridviewemptydatatest. databind ();} after executing the code, The displayed result of the gridview is as follows: You can see that the structure of the gridview is invisible. In most practical applications, we want to see what fields the gridview has. 4.2 Add blank rows to display the structure of the gridview. We know that as long as the gridview able bound to the gridview has a row of records, the gridview will display the header. Therefore, when the datatable is empty, we add a blank row to display the header. The code is changed to the following: datatable dt = new datatable (); DT. columns. add ("temple_id"); DT. columns. add ("temple_name"); DT. columns. add ("location"); DT. columns. add ("build_date"); If (DT. rows. count = 0) {DT. rows. add (DT. newrow ();} This. gridviewemptydatatest. datasource = DT; this. gridviewemptydatatest. databind (); Judge before each binding. If it is null, an empty row is added. The binding result is shown in: The table header can be displayed, however, it is confusing to show no data for empty rows. Can I add a prompt? 4.3 adding an empty record prompts us to add some code to process the gridview after data binding, so that the display results are more friendly. In this. gridviewemptydatatest. add the following code to databind (): int columncount = DT. columns. count; gridviewemptydatatest. rows [0]. cells. clear (); gridviewemptydatatest. rows [0]. cells. add (New tablecell (); gridviewemptydatatest. rows [0]. cells [0]. columnspan = columncount; gridviewemptydatatest. rows [0]. cells [0]. TEXT = "no record"; gridviewemptydatatest. rows [0]. cells [0]. style. add ("text-align", "center"); shows the improved display result: But when there are other button operations on the page that cause the page to be PostBack, the page is displayed again with no prompt information as shown in: This is not what we want. 4.4 prevent page display changes when PostBack. To prevent display changes, we add the following code in the page_load event to re-bind the gridview: If (ispostback) {// if the data is null, re-construct the gridview if (gridviewemptydatatest. rows. count = 1 & gridviewemptydatatest. rows [0]. cells [0]. TEXT = "no record") {int columncount = gridviewemptydatatest. columns. count; gridviewemptydatatest. rows [0]. cells. clear (); gridviewemptydatatest. rows [0]. cells. add (New tablecell (); gridviewemptydatatest. rows [0]. cells [0]. columnspan = columncount; gridviewemptydatatest. rows [0]. cells [0]. TEXT = "no record"; gridviewemptydatatest. rows [0]. cells [0]. style. add ("text-align", "center") ;}} now our controls can finally be displayed as per our requirements, but for the purpose of code reuse, when a project has multiple gridview, We need to encapsulate the code into a class to avoid full code, so that all the gridview data can be easily bound to our requirements. 4.5 The encapsulation code of the encapsulation class is as follows: using system. data; using system. web. UI. webcontrols; // <summary> // when the data record bound to the gridview is empty, the header of the gridview is displayed, prompt with no record displayed /// </Summary> public class gridviewcontrol {// the information displayed when the gridview data is empty Private Static string emptytext = "no record "; public gridviewcontrol () {}/// <summary> /// after PostBack is prevented, the gridview cannot be displayed. /// </Summary> /// <Param name = "gridview"> </param> Public static void resetgridview (gridview GRI Dashboard) {// if the data is empty, re-construct the gridview if (gridview. rows. count = 1 & gridview. rows [0]. cells [0]. TEXT = emptytext) {int columncount = gridview. columns. count; gridview. rows [0]. cells. clear (); gridview. rows [0]. cells. add (New tablecell (); gridview. rows [0]. cells [0]. columnspan = columncount; gridview. rows [0]. cells [0]. TEXT = emptytext; gridview. rows [0]. cells [0]. style. add ("text-align", "center") ;}/// <summa Ry> // bind data to the gridview, when the table data is empty, the table header is displayed. // </Summary> /// <Param name = "gridview"> </param> /// <Param name = "table"> </param> Public static void gridviewdatabind (gridview, datatable table) {// record is empty reconstructs the gridview if (table. rows. count = 0) {table = table. clone (); table. rows. add (table. newrow (); gridview. datasource = table; gridview. databind (); int columncount = table. columns. count; gridview. rows [0 ]. Cells. clear (); gridview. rows [0]. cells. add (New tablecell (); gridview. rows [0]. cells [0]. columnspan = columncount; gridview. rows [0]. cells [0]. TEXT = emptytext; gridview. rows [0]. cells [0]. style. add ("text-align", "center");} else {// The data is not empty and the gridview is directly bound. datasource = table; gridview. databind ();} // unbind and unselect the gridview. selectedindex =-1 ;}} you can compile this class into DLL for calling in various places. 4.6 usage example the usage of this class is very simple, that is, in each data binding, gridviewdatabind is called, the first parameter of this function is the gridview parameter of the data to be bound. The second parameter is the able that contains the data field column. It may be null or not. If the data is not empty, the function will automatically bind normally, otherwise, the "no record" prompt is displayed. The code for the preceding button event can be changed to: datatable dt = new datatable (); DT. columns. add ("temple_id"); DT. columns. add ("temple_name"); DT. columns. add ("location"); DT. columns. add ("build_date"); gridviewcontrol. gridviewdatabind (this. gridviewemptydatatest, DT); finally, in page_load, The resetgridview function is called for all the gridview functions on this page, as shown below: If (ispostback) {gridviewcontrol. resetgridview (this. gridviewemptydatatest);} Here is a website test source code. You can create a test database based on the data table mentioned in 2 and Add the corresponding data for testing. Remember to change the connection string. Test source code: http://dl2.csdn.net/down4/20071008/08205401208.rar5.summary Ms's Asp.net provides us with easy-to-use controls. If you make some minor changes to the usage of these controls, you can make more perfect results.


Source: http://blog.sina.com.cn/s/blog_4a5e327701000b7x.html

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.