Combination of DataGrid and dropdownlist and use CSS to customize the DataGrid

Source: Internet
Author: User
Sometimes we need
(1) When editing, use the drop-down box to select the database content by default.
(2) Use the drop-down box to filter data
(3) Use CSS to uniformly customize the DataGrid
Below Code :
Data structure:
Table Dep: depid (primary key ID), depname (school name)
Table STU: stuid (primary key ID), stuname (Student name), studepid (school ID = TABLE dep. depid)

Front-end:
<% @ Page Language = "C #" codebehind = "webform28.aspx. cs" autoeventwireup = "false" inherits = "csdn. webform28" %>
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML>
<Head>
<Title> webform28 </title>
<Meta name = "generator" content = "Microsoft Visual Studio. NET 7.1">
<Meta name = "code_language" content = "C #">
<Meta name = "vs_defaultclientscript" content = "JavaScript">
<Link href = "css.css" rel = "stylesheet" type = "text/CSS">
<Meta name = "vs_targetschema" content = "http://schemas.microsoft.com/intellisense/ie5">
</Head>
<Body>
<Form ID = "form1" method = "Post" runat = "server">
<Asp: dropdownlist id = "dropdownlist1" runat = "server" autopostback = "true"> </ASP: dropdownlist>
<Asp: DataGrid id = "datagrid1" runat = "server" autogeneratecolumns = "false" cellspacing = "1" borderwidth = "0px"
Cellpadding = "5" cssclass = "border" oneditcommand = "edit" oncancelcommand = "cancel" onupdatecommand = "Update"
Datakeyfield = "stuid">
<Itemstyle cssclass = "item"> </itemstyle>
<Headerstyle cssclass = "Header"> <Columns>
<Asp: templatecolumn headertext = "name">
<Itemtemplate>
<% # Databinder. eval (container. dataitem, "stuname") %>
</Itemtemplate>
<Edititemtemplate>
<Asp: textbox id = "name" runat = "server" text = '<% # databinder. eval (container. dataitem, "stuname") %> 'width = "88px">
</ASP: textbox>
</Edititemtemplate>
</ASP: templatecolumn>
<Asp: templatecolumn headertext = "">
<Itemtemplate>
<% # Databinder. eval (container. dataitem, "depname") %>
</Itemtemplate>
<Edititemtemplate>
<Asp: dropdownlist id = "Dep" runat = "server"> </ASP: dropdownlist>
</Edititemtemplate>
</ASP: templatecolumn>
<Asp: editcommandcolumn buttontype = "Pushbutton" updatetext = "Update" canceltext = "cancel" edittext = "edit"> </ASP: editcommandcolumn>
</Columns>
</ASP: DataGrid>
</Form>
</Body>
</Html>
Background:
Using system;
Using system. collections;
Using system. componentmodel;
Using system. Data;
Using system. Data. sqlclient;
Using system. drawing;
Using system. Web;
Using system. Web. sessionstate;
Using system. Web. UI;
Using system. Web. UI. webcontrols;
Using system. Web. UI. htmlcontrols;

Namespace csdn
{
/// <Summary>
/// Summary of webform28.
/// </Summary>
Public class webform28: system. Web. UI. Page
{
Protected system. Web. UI. webcontrols. dropdownlist dropdownlist1;
Protected system. Web. UI. webcontrols. DataGrid datagrid1;
 
Private void page_load (Object sender, system. eventargs E)
{
// Place user code here to initialize the page
If (! Ispostback)
{
Setbind ();
Setbind2 ();
}
}

Protected void setbind ()
{

Sqlconnection conn = new sqlconnection (system. configuration. configurationsettings. deleettings ["conn"]);
Sqldataadapter da = new sqldataadapter ("select * from Stu, DEP where Stu. studepid = dep. depid", Conn );
Dataset DS = new dataset ();
Da. Fill (DS, "Table1 ");
This. datagrid1.datasource = Ds. Tables ["Table1"];
This. datagrid1.databind ();

}

Protected void setbind2 ()
{

Sqlconnection conn2 = new sqlconnection (system. configuration. configurationsettings. deleettings ["conn"]);
Sqldataadapter da2 = new sqldataadapter ("select * From Dep", conn2 );
Dataset ds2 = new dataset ();
Da2.fill (ds2, "Table1 ");
This. dropdownlist1.datasource = ds2.tables ["Table1"];
This. dropdownlist1.datatextfield = "depname ";
This. dropdownlist1.datavaluefield = "depid ";
This. dropdownlist1.databind ();
This. dropdownlist1.items. insert (0, new listitem ("select ",""));

}

Protected void setbind3 ()
{
String S = This. dropdownlist1.selectedvalue;
Sqlconnection conn = new sqlconnection (system. configuration. configurationsettings. deleettings ["conn"]);
Sqlcommand comm = new sqlcommand ();
Comm. Connection = conn;
If (s! = "")
{
Comm. commandtext = "select * from Stu, DEP where Stu. studepid = dep. depid and depid = @ depid ";
Sqlparameter parm1 = new sqlparameter ("@ depid", sqldbtype. INT );
Parm1.value = s;
Comm. Parameters. Add (parm1 );
}
Else
Comm. commandtext = "select * from Stu, DEP where Stu. studepid = dep. depid ";
Sqldataadapter da = new sqldataadapter ();
Da. selectcommand = comm;
Dataset DS = new dataset ();
Da. Fill (DS, "Table1 ");
This. datagrid1.datasource = Ds. Tables ["Table1"];
This. datagrid1.databind ();

}
# Code generated by region web Form Designer
Override protected void oninit (eventargs E)
{
//
// Codegen: This call is required by the ASP. NET web form designer.
//
Initializecomponent ();
Base. oninit (E );
}

/// <Summary>
/// The designer supports the required methods-do not use the code editor to modify
/// Content of this method.
/// </Summary>
Private void initializecomponent ()
{
This. Maid + = new system. Web. UI. webcontrols. Maid (this. Maid );
This. dropdownlist1.selectedindexchanged + = new system. eventhandler (this. dropdownlist+selectedindexchanged );
This. Load + = new system. eventhandler (this. page_load );

}
# Endregion

Private void maid (Object sender, system. Web. UI. webcontrols. datagriditemeventargs E)
{
Sqlconnection conn = new sqlconnection (system. configuration. configurationsettings. deleettings ["conn"]);
Sqldataadapter da = new sqldataadapter ("select * From Dep", Conn );
Dataset DS = new dataset ();
Da. Fill (DS, "Table1 ");
If (E. Item. itemtype = listitemtype. edititem)
{
Dropdownlist DDL = (dropdownlist) E. Item. findcontrol ("Dep ");
DDL. datasource = Ds. Tables ["Table1"];
DDL. datatextfield = "depname ";
DDL. datavaluefield = "depid ";
DDL. databind ();
DDL. Items. findbyvalue (convert. tostring (databinder. eval (E. Item. dataitem, "depid"). Selected = true; // select the database as the default value.
}
}

Protected void edit (Object sender, datagridcommandeventargs E)
{
This. datagrid1.edititemindex = E. Item. itemindex;
If (this. dropdownlist1.selectedvalue = "")
Setbind ();
Else
Setbind3 ();
}

Protected void cancel (Object sender, datagridcommandeventargs E)
{
This. Maid =-1;
If (this. dropdownlist1.selectedvalue = "")
Setbind ();
Else
Setbind3 ();
}

Protected void Update (Object sender, datagridcommandeventargs E)
{
If (E. Item. itemtype = listitemtype. edititem) // submit only after editing and pressing
{
Sqlconnection conn = new sqlconnection (system. configuration. configurationsettings. deleettings ["conn"]);
Sqlcommand comm = new sqlcommand ("Update Stu set stuname = @ name, studepid = @ depid where stuid = @ ID", Conn );
Sqlparameter parm1 = new sqlparameter ("@ name", sqldbtype. nvarchar, 50 );
Parm1.value = (textbox) E. Item. findcontrol ("name"). text;
Sqlparameter parm2 = new sqlparameter ("@ depid", sqldbtype. INT );
Parm2.value = (dropdownlist) E. Item. findcontrol ("Dep"). selectedvalue;
Sqlparameter parm3 = new sqlparameter ("@ ID", sqldbtype. INT );
Parm3.value = This. datagrid1.datakeys [E. Item. itemindex];
Comm. Parameters. Add (parm1 );
Comm. Parameters. Add (parm2 );
Comm. Parameters. Add (parm3 );
Conn. open ();
Comm. executenonquery ();
Conn. Close ();
This. Maid =-1;
If (this. dropdownlist1.selectedvalue = "")
Setbind ();
Else
Setbind3 (); // if you select to filter, use setbind3 ()
}
}

Private void dropdownlistpolicselectedindexchanged (Object sender, system. eventargs E)
{
Setbind3 ();
}
}
}
CSS:
. Border {
Background-color: # 00496c;
}
. Header {
Font-family: "", sans-serif;
Font-size: 10pt;
Font-weight: bold;
Color: # ffffff;
Background-color: #0080c0;
Text-align: center;
}
. Item {
Font-family: "", sans-serif;
Font-size: 9pt;
Font-weight: normal;
Color: #0080c0;
Background-color: # ffffff;
Text-align: center;
}

The code is relatively simple. The following is a brief description:
(1) setbind () is the basic binding; setbind2 () is the dropdownlist outside the binding; setbind3 () is the binding of the DataGrid after filtering selected in the drop-down box
(2) Here CSS is used to implement the table border using cellspacing, so this value is the Border width. In the CSS of the table border, background-color is used to describe the border color.

from: http://blog.csdn.net/LoveCherry/archive/2005/03/24/328455.aspx

Related Article

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.