Using JavaScript to control objects in a DataGrid

Source: Internet
Author: User
Tags array client connectionstrings
Datagrid|javascript| Object | control

Q: I have a class that returns a DataSet dataset and how to bind to JavaScript. A: How do you call it binding to JavaScript? For example, to call it in a section of JS? Q: I have 2 datagrid on one page, one is the value that is bound from CS, the other one is empty, there is no value. Users do operations on the DataGrid, such as modifying the value, and then the modified value to do the operation, in the DATAGRID2 display the results of the operation, and then the results back to the outgoing, CS to do further processing. Q: You write an example, I imitate. A: Yes.


The following is an ASPX page with three datasource on it, basically without looking at the JavaScript section.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<title>untitled page</title>
<script type= "Text/javascript" >
<!--
Because IE and firefox/netscape implement DOM in a slightly different way, if you want to run smoothly in Firefox, this method should be slightly modified
function Rechange (obj,targ) {
Passed in two parameters, the first parameter is a select, and the second is the DG2 client ID
var tmp;
var i=0;
var arr=new Array ();
From select back until Tbody
var Tab=obj.parentnode;
while (tab.tagname!= "Tbody") {
Tab=tab.parentnode;
}
Get all the product stats list into arr
for (i=1;i<tab.childnodes.length;i++) {
This is the Drop-down selection box
var selecttag=tab.childnodes[i].childnodes[0].childnodes[0];
This is the second column of the row
var littag=tab.childnodes[i].childnodes[1];
The selection value of the Drop-down selection is the Product ID
var Productid=selecttag.value;
The quantity is stored in the second column of the row
var quantity=parseint (Littag.innertext);
Initializes a sequence to an array of product IDs if the array is not initialized
if (arr[productid]==null) {
Arr[productid]=new Array ();
arr[productid][0]=0;
}
Add to the quantity statistics on the product ID
arr[productid][0]+=quantity;
}
Get the next dg2 tbody body
var Targ=document.getelementbyid (Targ). Childnodes[0];
And then iterate through all the rows, starting at 1 because there's a header
for (i=1;i<targ.childnodes.length;i++) {
Get Product ID
var productid=targ.childnodes[i].childnodes[0].innerhtml;
var productname=targ.childnodes[i].childnodes[1].innerhtml;
var quantity=targ.childnodes[i].childnodes[2].innerhtml;
If the statistics for this product are in the ARR array, override the
if (arr[productid]!=null) {
TARG.CHILDNODES[I].CHILDNODES[2].INNERHTML=ARR[PRODUCTID][0];
}
Instead of 0
else{
targ.childnodes[i].childnodes[2].innerhtml=0;
}
}
}
-->
</script>
<body>
<form id= "Form1" runat= "Server" >

<asp:sqldatasource id= "SqlDataSource1" runat= "connectionstring=" <%$ connectionstrings: NorthwindConnectionString%> "
Selectcommand= "SELECT [ProductName], [ProductID] from [alphabetical list of products] where [productid]<20" >
</asp:SqlDataSource>
<asp:sqldatasource id= "SqlDataSource2" runat= "connectionstring=" <%$ connectionstrings: NorthwindConnectionString%> "
Selectcommand= "SELECT [ProductID], [Quantity] from [order Details] WHERE [productid]<20" ></asp:sqldatasource >
<asp:sqldatasource id= "SqlDataSource3" runat= "connectionstring=" <%$ connectionstrings: NorthwindConnectionString%> "
selectcommand= "Select A.[productid],b.[productname],sum (A.[quantity]) as [totalquantity] from [order Details] a inner Join [Alphabetical List of products] B in A.[productid]=b.[productid] where a.[productid]<20 GROUP by a.[productid],b.[ ProductName] ">
</asp:SqlDataSource>

<asp:datagrid runat= "Server" id= "DG1" autogeneratecolumns= "False" datasourceid= "SqlDataSource2" onitemdatabound= "Dg1_itemdatabound" >
<Columns>
<asp:templatecolumn headertext= "ProductID" >
<ItemTemplate>
<asp:dropdownlist runat= "Server" id= "DDL1" datasourceid= "SqlDataSource1" datatextfield= "ProductName" Datavaluefield= "ProductID" ></asp:DropDownList>
</ItemTemplate>
</asp:TemplateColumn>
<asp:boundcolumn datafield= "Quantity" footertext= "Quantity" headertext= "Quantity" ></asp:BoundColumn>
</Columns>
</asp:DataGrid>

<asp:datagrid runat= "Server" id= "DG2" datasourceid= "SqlDataSource3" ></asp:DataGrid>

</form>
</body>

CS section: Give DropDownList a client event, pass in two parameters, described in the JavaScript section above

protected void Dg1_itemdatabound (object sender, DataGridItemEventArgs e)
{
if (E.item.itemtype = = ListItemType.Item | | e.item.itemtype = = listitemtype.alternatingitem) {
DataRowView DRV = (DataRowView) e.Item.DataItem;
DropDownList DDL1 = (DropDownList) e.item.findcontrol ("DDL1");
for (int i = 0; i < DDL1. items.count;i++) {
if (drv["ProductID"]. ToString () = = DDL1. Items[i]. Value) {
DDL1. SelectedIndex = i;
Break
}
}
DDL1. Attributes.Add ("onchange", "Javascript:rechange" (This, ' "+this.) DG2. Clientid+ "");
}

}




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.