By: John Kilgo Date: February 1, 2003 Download The Code.
Printer Friendly Version
The data choices for some database table columns are relatively fixed. Examples would be countries, states, and counties for instance. In these cases a dropdown list of fixed choices makes more sense than keyboard input where mistakes can be made easily. In an editable datagrid you can include dropdownlistboxes, although they must be populated at run time. you can not do it at design time. In order to accomodate the dropdownlistbox the datagrid must use TemplateColumns with ItemTemplates.
For this Article I have.
As is usually the case in DotNetJohn articles, we will separate code from presentation by using an aspx page with a .vb code-behind page. The aspx page is presented first. The first part of the page, presented below, just defines our datagrid . There is nothing unusual about the design of the datagrid except that we setup for OnEditCommand, OnUpdateCommand, and OnCancelCommad event handlers. These are necessary for any datagrid to be placed in edit mode. The actual event handlers will be in our code-behind page .
<% @ Page language = "VB" src = "DataGridDropdown.aspx.vb" inherits = "DataGriddropdown"%>
DataGrid with a dropdownlistbox </ title> </ head> <body> < form runat = "server" ID = "Form1"> <h3> DataGrid with a DropDownListBox </ h3> <asp: DataGrid ID = "dtgCustomers" runat = "server" AutoGenerateColumns = False HeaderStyle-BackColor = "IndianRed" HeaderStyle-Font -Bold = "True" HeaderStyle-Font-Name = "Verdana" HeaderStyle-Font-Size = "12px" HeaderStyle-ForeColor = "White" ItemStyle-BackColor = Gainsboro ItemStyle-Font-Name = "verdana" ItemStyle-Font-Size = "12px" oncancelcommand = "DTGCUSTOMERS_CANCEL" OneDitCommand = "DTGCUSTOMERS_EDIT" onupdateCommand = "DTGCUSTOMERS_UPDATE" width = "75%"></p>
<p>. Next comes our TemplateColumns We use asp: labels to hold data for presentation All of this is pretty straight forward until we come to the code marked in blue In the first few lines we have our ItemTemplate wherein the country will be shown when the.. datagrid is in presentation mode (ie not in edit mode). in this respect it is just like all of the other columns in the grid. We then include a label with its visible property set to false. This invisible label holds the CustomerID column. It is not needed for presentation but will be needed as a key field for our WHERE clause when updating the row. It could have been included elsewhere in the grid, but logically belongs with the section where data will be updated. (for purposes of this article only the country column will be updateable, although all columns could have been eligible for update.) Notice that we have made arrangements to present the country in two different places. The first is for normal presentation mode, while the sec . Ond is so that we can see the existing value while we are in edit mode with the dropdownlistbox showing.Finally comes our dropdownlist box It is made ready by the line: DataSource = "<% # BindTheCountry ()%>" While we. CANNOT Populate The Dropdown At Design Time, We can Reference A Function (Bindthecountry ()) That Will Fill The Dropdown At Run Time. Bindthecountry () Will Be Seen In The Code-Behind page.</p>
<p><Columns> <asp: EditCommandColumn EditText = "Edit" CancelText = "Cancel" UpdateText = "Update" ItemStyle-Width = "100px" HeaderText = "Commands" /> <asp: TemplateColumn HeaderText = "Company Name"> <ItemTemplate> <ask: label id = "lblcompanyname" text = '<% # databinder.eval (container.DataItem, "companyName")%>' Runat = "server" /> </ itemtemplate> </ asp: templateColumn> <asp: TemplateColumn Headertext = "Contact Name"> <itemtemplate> <ask: label id = "lblcontactname" text = '<% # databinder.eval (container.DataItem, "ContactName")%>' Runat = "Server" /> </ ItemTemplate> </ asp: TemplateColumn> <asp: TemplateColumn HeaderText = "Contact Title"> <ItemTemplate> <asp: Label ID = "lblContactTitle" Text = '<% # DataBinder.Eval (Container.DataItem, "ContactTitle")% > 'Run at = "server" /> </ ItemTemplate> </ asp: TemplateColumn> <asp: TemplateColumn HeaderText = "Country"> <ItemTemplate> <asp: Label ID = "lblCountry" Text = '<% # DataBinder.Eval (Container .Dataitem, "country")%> 'runat = "server" /> </ itemtemplate> <</p>
<p>EditItemTemplate> <ask: label runat = "server" id = "lblcustomerid" Visible = "false" text = '<% # databinder.eval ("CustomerID")%>' /> <ask: label id = "lbltempState" text = '<% # databinder.eval (container.dataitem, "country")%>' Runat = "server" /> <ask: DROPDOWNLIST ID = "DDLCOUNTRY" DATASOURCE = "<% # bindthecountry ()% > "OnPreRender =" SetDropDownIndex "DataTextField =" Country "DataValueField =" Country "runat =" server "/> </ EditItemTemplate> </ asp: TemplateColumn> <asp: TemplateColumn HeaderText =" Telephone "> <ItemTemplate> <asp: Label ID = "lblphone" text = '<% # databinder.eval (Container.DataItem, "Phone")%>' Runat = "Server" /> </ itemtemplate> </ asp: templateColumn> </ columns> </ ASP: DataGrid> </ form> </ Body> </ html> The remain of the code Above comples the layout of our data.</p>
<p>Next is our code-behind file where all the work gets done. Much of the code is the usual database access code to populate the datagrid. The code immediately below contains the Page_Load event where the grid is first bound to its data, the BindTheGrid ( ) routine to actually accomplish the grid's databinding, the Edit event handler to place the grid in edit mode, and the Cancel event handler to get the grid out of edit mode without performing an update. These are necessary routines for any datagrid being presented, and placed in edit mode.Please note: in the .aspx page and in both sections of the code-behind file being shown here, the lines displayed in purple constitue code that allows the dropdownlist to have the current country value preselected when the grid is placed In Edit Mode. This Code WAS Contributed by Victor Rubba After this Article Was Originally Published. I wish To Thank Victor for His Contribution.</p>
<p>Imports SystemImports System.Web.UIImports System.Web.UI.WebControlsImports System.ConfigurationImports System.DataImports System.Data.SqlClientPublic Class DataGridDropDown: Inherits Page Protected WithEvents dtgCustomers As System.Web.UI.WebControls.DataGrid Protected strCountry As String Private Sub Page_Load (ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load If Not Page.IsPostBack Then BindTheGrid () End If End Sub Public Sub BindTheGrid () Dim objConn As SqlConnection = New SqlConnection (ConfigurationSettings.AppSettings ( " ConnectionString ")) Dim cmdCustomers As SqlCommand = New SqlCommand (" SELECT Top 10 CustomerID, "_ &" CompanyName, ContactName, ContactTitle, Country, Phone "_ &" FROM Customers ", objConn) cmdCustomers.CommandType = CommandType.Text objConn. Open () dTGCustomers.DataSource = cmdcustomers.executeReader () DTGCUSTOMERS.DATABIND () Objconn.close () end Sub DTGCUSE () End Sub DTGCUSEMERS_EDIT (Byval Sender AS) Object, ByVal E As DataGridCommandEventArgs) strCountry = CType (E.Item.FindControl ( "lblCountry"), Label) .Text dtgCustomers.EditItemIndex = CInt (E.Item.ItemIndex) BindTheGrid () End Sub Public Sub dtgCustomers_Cancel (ByVal sender As Object, byval e as datagridcommandeventArgs) DTGCUSTOMERS.EDITEMINDEX = -1 bindthegrid () end SUB</p>
<p>The last three routines, shown below, contain the code to populate our dropdownlistbox, to update the table, and to preselect the existing country in the dropdownlist. Remember on our aspx page we could not populate the dropdownlistbox, but we could make room for it and call a function that would populate it at runtime? BindTheCountry () is shown first below. BindTheCountry () connects to a database table and executes a reader which is returned to the aspx page as the dropdownlistbox's data source. Normally we would access a codes table containing countries. Since such a table was not easily available to me, I just did a SELECT Distinct Country from the Customer's table to have something with which to populate the dropdownlistbox.Sub dtgCustomers_Update does the updating of the Customers table with the country value selected From The DropdownListBox. NOTICE THAT WE MUST Use The FindControl Method To Locate The Dropdownlist Box (DDLCOUNTRY) AND THEN GET The SELECTEDITEM.VALUE PROPERTY TO find the actual country selected from the dropdown. We also use the hidden label on the datagrid (mentioned in the aspx file discussion) to obtain the CustomerID column to use as a key field in our WHERE clause for the UPDATE.</p>
<p>Public Function BindTheCountry () Dim objConn As SqlConnection = New SqlConnection (ConfigurationSettings.AppSettings ( "ConnectionString")) Dim cmdCustomers As SqlCommand = New SqlCommand ( "SELECT Distinct Country FROM Customers", objConn) cmdCustomers.CommandType = CommandType.Text objConn.Open () Return cmdCustomers.ExecuteReader (CommandBehavior.CloseConnection) End Function Public Sub dtgCustomers_Update (ByVal sender As Object, ByVal e As DataGridCommandEventArgs) Dim objConn As SqlConnection = New SqlConnection (ConfigurationSettings.AppSettings ( "ConnectionString")) Dim cmdCustomers As SqlCommand Dim strCustomerID As String = CType (e.Item.FindControl ( "lblCustomerID"), Label) .Text Dim strCountry As String = CType (e.Item.FindControl ( "ddlCountry"), DropDownList) .SelectedItem.Value Dim strSql As String strSql = "Update Customers Set Country = '" & STRCOUNTRY _ & "' Where customerid = '" & structomerid & "" cmdcustomers = new SQLCOMMAND (strsql, ob jConn) objConn.Open () cmdCustomers.ExecuteReader (CommandBehavior.CloseConnection) dtgCustomers.EditItemIndex = -1 BindTheGrid () End Sub Public Sub SetDropDownIndex (ByVal sender As Object, ByVal e As System.EventArgs) Dim ed As System.Web.UI .WebControls.dropdownList Ed = sender Ed.selectedIndIndex = Ed.Items.indexof (Ed.Items.FindBytext (STRCOUNTRY)) End Subend Class</p>
<p>A fair amount of code has been presented, but I believe if you will run the demo program several times to see how the editing works in the grid, and then compare what you see to the various sections of code, you will come away with an Understanding of how the process works.once again, thanks to Victor Rubba for His CONTE CONTRIBUTIONS (Listed in Purple) for this article.</p>
<p>You May Run The Program Here.you May Download The Code Here.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-110069.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="110069" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.040</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'UMQiIT7aRQtpM641y1DBC6s9XOqTElkp7Zs5ttj3sd4s5_2B4PjE_2B7Yvm_2BYKBpaEGtR4Bg2svN6kIP_2BCcE';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
