javascript - How to Change Content When User Selected Different Option From DropDownList -
i have dropdownlist user select item want retrieve gridview. (see below:)
let's @ first when page loaded, dropdown list "item1" being displayed default option. @ first when page loaded, should retrieve item1 content based on listitem text, not value, , display item1 content on webpage. if user clicked on different option (e.g. item2), retrieve item2 content based on listitem text, , display item2 content on webpage, , on..
dropdownlist code:
<asp:dropdownlist id="dropdownlist1" runat="server" width="136px" autopostback="true" onselectedindexchanged="jobrun_selectedindexchanged"> </asp:dropdownlist> dropdownlist_selectedindexchanged code:
protected void dropdownlist1_selectedindexchanged(object sender, eventargs e) { if (dropdownlist1.selectedindex >= 0) { if (!string.isnullorempty(1stlistbox.selectedvalue) && !string.isnullorempty(2ndlistbox.selectedvalue) && !string.isnullorempty(3rdlistbox.selectedvalue) && !string.isnullorempty(4thlistbox.selectedvalue) && !string.isnullorempty(5thlistbox.selectedvalue)) { 1stlistbox_label.text = string.empty; 2ndlistbox_label.text = string.empty; 3rdlistbox_label.text = string.empty; 4thlistboxlabel.text = string.empty; 5thlistbox_label.text = string.empty; binddropdownlist1(); } else { if (string.isnullorempty(1stlistbox.selectedvalue)) { 1stlistbox_label.text = ("please select @ least 1 option").tostring(); } else { 1stlistbox_label.text = string.empty; } if (string.isnullorempty(1stlistbox.selectedvalue)) { 1stlistbox_label.text = ("please select @ least 1 option").tostring(); } else { 1stlistbox_label.text = string.empty; } if (2ndlistbox.selectedvalue == string.empty) { 2ndlistbox_label.text = ("please select @ least 1 option").tostring(); } else { 2ndlistbox_label.text = string.empty; } if (3rdlistbox.selectedvalue == string.empty) { 3rdlistbox_label.text = ("please select @ least 1 option").tostring(); } else { 3rdlistbox_label.text = string.empty; } if (4thlistbox.selectedvalue == string.empty) { 4thlistbox_label.text = ("please select @ least 1 option").tostring(); } else { 4thlistbox.text = string.empty; } } ajaxcontroltoolkit.tabcontainer container = new ajaxcontroltoolkit.tabcontainer(); container.id = "tabcontainer"; container.enableviewstate = false; container.tabs.clear(); container.height = unit.pixel(2000); container.width = unit.pixel(1200); container.tabs.addat(0, getmanualtab()); system.web.ui.webcontrols.image img = new system.web.ui.webcontrols.image(); img.id = "heatmap"; img.width = 40; img.height = 300; img.imageurl = "image/heatmap.png"; string selectedvalue= dropdownlist1.selecteditem.tostring(); if (1stlistbox.selectedvalue == "select all") { foreach (listitem item in 1stlistbox.items) { if (item.value.equals("1")) { continue; } label tabcontent = new label(); tabcontent.id += item.value; tabcontent.text += item.value; string itemselected = 1stlistbox.selecteditem.tostring(); textbox1.text = tabcontent.text.tostring(); datatable tg = new datatable(); datarow dr; tg.columns.add(new datacolumn("date")); tg.columns.add(new datacolumn("status", typeof(string))); tg.columns.add(new datacolumn("title", typeof(string))); tg.columns.add(new datacolumn("name", typeof(string))); tg.columns.add(new datacolumn("max", typeof(int))); tg.columns.add(new datacolumn("min", typeof(int))); tg.columns.add(new datacolumn("avg", typeof(int))); tg.columns.add(new datacolumn("percentile25", typeof(int))); tg.columns.add(new datacolumn("percentile50", typeof(int))); tg.columns.add(new datacolumn("percentile75", typeof(int))); foreach (gridviewrow gvr in gridview1.rows) { if (gvr.cells[2].text == tabcontent.text.tostring() && gvr.cells[0].text == selectedvalue.tostring()) { dr = tg.newrow(); dr["date"] = gvr.cells[0].text; dr["status"] = gvr.cells[1].text; dr["title"] = gvr.cells[2].text; dr["name"] = gvr.cells[3].text; dr["max"] = int.parse(gvr.cells[4].text); dr["min"] = int.parse(gvr.cells[5].text); dr["avg"] = int.parse(gvr.cells[6].text); dr["percentile25"] = int.parse(gvr.cells[7].text); dr["percentile50"] = int.parse(gvr.cells[8].text); dr["percentile75"] = int.parse(gvr.cells[9].text); tg.rows.add(dr); } } chart chart1= new chart(); chart1.datasource = tg; chart1.width = 600; chart1.height = 350; chart1.series.add(new series()); chart1.series[0].charttype = seriescharttype.boxplot; list<object> lst = tg.asenumerable().tolist<object>(); foreach (datarow row in tg.rows) chart1.series[0].points.addxy(row["status"], new object[] { row["max"], row["min"], row["avg"], row["percentile25"], row["percentile50"], row["percentile75"] }); chart1.series[0].charttype = seriescharttype.boxplot; if (tg.rows.count > 0) { string title = (tg.rows[0]["title"].tostring()); chart1.titles.add(title); } //create chartareas chartarea ca = new chartarea(); //ca.name = "chartarea3"; ca.axisx = new axis(); ca.axisy = new axis(); chart1.chartareas.add(ca); //databind chart1.databind(); chart1.visible = true; ajaxcontroltoolkit.tabpanel panel = new ajaxcontroltoolkit.tabpanel(); panel.headertext += item.text; container.tabs.add(panel); panel.controls.add(chart1); } } else { foreach (listitem item in 1stlistbox.items) { if (item.selected) { label tabcontent = new label(); tabcontent.id += item.value; tabcontent.text += item.value; //string itemselected = 1stlistbox.selecteditem.tostring(); textbox1.text = tabcontent.text.tostring(); datatable tg = new datatable(); datarow dr; tg.columns.add(new datacolumn("date")); tg.columns.add(new datacolumn("status", typeof(string))); tg.columns.add(new datacolumn("title", typeof(string))); tg.columns.add(new datacolumn("name", typeof(string))); tg.columns.add(new datacolumn("max", typeof(int))); tg.columns.add(new datacolumn("min", typeof(int))); tg.columns.add(new datacolumn("avg", typeof(int))); tg.columns.add(new datacolumn("percentile25", typeof(int))); tg.columns.add(new datacolumn("percentile50", typeof(int))); tg.columns.add(new datacolumn("percentile75", typeof(int))); foreach (gridviewrow gvr in gridview1.rows) { if (gvr.cells[2].text == tabcontent.text.tostring()) { dr = tg.newrow(); dr["date"] = gvr.cells[0].text; dr["status"] = gvr.cells[1].text; dr["title"] = gvr.cells[2].text; dr["name"] = gvr.cells[3].text; dr["max"] = int.parse(gvr.cells[4].text); dr["min"] = int.parse(gvr.cells[5].text); dr["avg"] = int.parse(gvr.cells[6].text); dr["percentile25"] = int.parse(gvr.cells[7].text); dr["percentile50"] = int.parse(gvr.cells[8].text); dr["percentile75"] = int.parse(gvr.cells[9].text); tg.rows.add(dr); } } chart chart1= new chart(); chart1.datasource = tg; chart1.width = 600; chart1.height = 350; chart1.series.add(new series()); chart1.series[0].charttype = seriescharttype.boxplot; list<object> lst = tg.asenumerable().tolist<object>(); foreach (datarow row in tg.rows) chart1.series[0].points.addxy(row["status"], new object[] { row["max"], row["min"], row["avg"], row["percentile25"], row["percentile50"], row["percentile75"] }); chart1.series[0].charttype = seriescharttype.boxplot; if (tg.rows.count > 0) { string title = (tg.rows[0]["title"].tostring()); chart1.titles.add(title); } //create chartareas chartarea ca = new chartarea(); //ca.name = "chartarea3"; ca.axisx = new axis(); ca.axisy = new axis(); chart1.chartareas.add(ca); //databind chart1.databind(); chart1.visible = true; ajaxcontroltoolkit.tabpanel panel = new ajaxcontroltoolkit.tabpanel(); panel.headertext += item.value; container.tabs.add(panel); //panel.controls.add(tabcontent); panel.controls.add(chart1); } } } placeholder1.controls.add(container); } binddropdownlist1() method:
public void binddropdownlist1() { //lost hold values list<datetime> listcopy = new list<datetime>(); datetime dt; string values = string.join(", ", jobrun_cbl.items.cast<listitem>().where(i => i.selected).select(i => i.text)); if (values.contains("select all")) { //loop through each items in listbox , add list foreach (listitem li in listbox1.items) { if (datetime.tryparse(li.text, out dt)) { listcopy.add(dt); } } } else { //loop through each items in listbox , add list foreach (listitem li in listbox1.items) { //check if item selected if (li.selected == true) { //add items list listcopy.add(datetime.parse(li.text)); } } } //compare , sort latest date comes on top listcopy.sort((x, y) => y.compareto(x)); //clear items in dropdownlist dropdownlist1.items.clear(); //set datasource dropdownlist dropdownlist1.datasource = listcopy; //set dateformatstring in dropdownlist dropdownlist1.datatextformatstring = "{0:dd-mmm-yyyy}"; //bind dropdownlist dropdownlist1.databind(); } question: when user clicked on different option dropdownlist, how being clicked dropdownlist (based on listitem text (e.g. item 2), not value (e.g. 1), retrieve data gridview based on being clicked, , display different content on webpage based on being clicked?
i have no idea how despite searching online quite awhile. appreciate if can provide me on this. thanks!
regards,
felicia
i might understand question wrongly c# question or javascript question
need have autopostback , selectedindexchanged event that....
per code below:-
edit...
if want trigger on page_load might want call event on page_load or bind first item gridview..
.aspx
<asp:dropdownlist id="ddl" runat="server" onselectedindexchanged="ddl_selectedindexchanged" autopostback="true"> <asp:listitem>test 1</asp:listitem> <asp:listitem>test 2</asp:listitem> <asp:listitem>test 3</asp:listitem> <asp:listitem>test 4</asp:listitem> </asp:dropdownlist> .cs
protected void ddl_selectedindexchanged(object sender, eventargs e) { if (ddl.selectedindex >= 0) { // selected text string value = ddl.selecteditem.text.trim(); // binding here } }
Comments
Post a Comment