All geek questions in one place

Onchange display a GridView record if it exists from the database using Javascript

In my code there is an onchange event from the html DropDownList . I already created a function to handle the onchange event.

What I'm trying to achieve is load the GridView based on the DropDownList selection.

Below is my HTML :

 <select id="ddlUnit" style="width: auto" runat="server" name="unitno" onchange="Funchangestatus()"> <option>--- Select ---</option> </select>

Also see my JavaScript for the same:

 function Funchangestatus() { PageMethods.GetStatus(document.getElementById('ddlUnit').value, onstatuschange); } function onstatuschange(status) { var strvalstatus = ""; strstatus = status[0].split('~'); document.getElementById("txtstatus").value = strstatus[0]; document.getElementById("txtstatus").readOnly = true; }

How can I accomplish this task using JavaScript? kindly suggest

+5
source share
3 answers

I changed my coding method for this function.

Since I added aspx Dropdownlist instead of HTML SELECT AND do not use javascript for this.

Here I go: -

SelectedIndexChanged Event ID

 protected void ddlUnit_OnSelectedIndexChanged(object sender, EventArgs e) { string flatstatus = ddlUnit.SelectedItem.Text; OracleConnection ObjPriCon = new OracleConnection(System.Configuration.ConfigurationManager.ConnectionStrings["OracleConn"].ToString()); ObjPriCon.Open(); OracleCommand cmd = new OracleCommand("Select distinct FLAT_STATUS STATUS from xxacl_pn_flat_det_v where FLAT_ID = '" + flatstatus + "' order by STATUS", ObjPriCon); if (ddlUnit.SelectedItem.Text.ToString().Equals("--- Select ---")) { txtstatus.Value = ""; return; } OracleDataReader dr = cmd.ExecuteReader(); if (dr.HasRows) { dr.Read(); txtstatus.Value = dr["STATUS"].ToString(); } else { } dr.Close(); ObjPriCon.Close(); DisplayGrid(); GrdBookingStatus.Visible = true; }

ROW FILTERING and checking for a record using [DATAVIEW][1]

 protected void DisplayGrid() { OracleCommand cmd = new OracleCommand("SELECT pn.project_id AS project_id, pn.property_name, pn.building, pn.building_id AS building_id, cd.flat_id AS flat_id, ab.flat_status, ab.COMMENTS " + "FROM xxcus.xxacl_pn_projbuild_v pn INNER JOIN xxacl_pn_flat_status_his ab " + "ON pn.project_id = ab.project_id AND pn.building_id = ab.building_id " + "INNER JOIN xxacl_pn_flat_det_v cd ON cd.flat_id = ab.flat_id", ObjPriCon); DataTable dtfillgrid = new DataTable(); OracleDataAdapter da = new OracleDataAdapter(cmd); da.Fill(dtfillgrid); DataView dView = new DataView(dtfillgrid); dView.RowFilter = "PROJECT_ID = '" + ddlProject.SelectedValue + "' AND BUILDING_ID ='" + ddlBuilding.SelectedValue + "' AND FLAT_ID = '" + ddlUnit.SelectedItem.Text + "'"; GrdBookingStatus.DataSource = dView.ToTable(); GrdBookingStatus.DataBind(); }

Also, on the other hand, I wanted the page to not receive PostBack , so I used the Update panel in aspx, as shown below: -

 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <table width="100%" border="0" cellpadding="1px" cellspacing="1px"> <tr> <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New"> Project </td> <td class="field" style="width: 7%"> <asp:DropDownList ID="ddlProject" runat="server" Width="250" OnSelectedIndexChanged="ddlProject_OnSelectedIndexChanged" AutoPostBack="true"> <asp:ListItem Value="--- Select ---">--- Select ---</asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New"> Building No </td> <td class="field" style="width: 7%"> <asp:DropDownList ID="ddlBuilding" runat="server" AutoPostBack="true" Width="250" OnSelectedIndexChanged="ddlBuilding_OnSelectedIndexChanged"> <asp:ListItem Value="--- Select ---">--- Select ---</asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New"> Unit No </td> <td class="field" style="width: 7%"> <asp:DropDownList ID="ddlUnit" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlUnit_OnSelectedIndexChanged" Width="177" AppendDataBoundItems="false"> <asp:ListItem Value="--- Select ---">--- Select ---</asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New"> Status </td> <td class="field" style="width: 7%"> <input type="text" runat="server" id="txtstatus" style="width: 175px; background-color: #EBEBE4;" readonly="readonly" /> </td> </tr> <tr> <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New"> Date </td> <td class="field" style="width: 7%"> <input type="text" runat="server" id="txtdate" style="width: 175px;" disabled="disabled" /> </td> </tr> <tr> <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New"> Flat Status </td> <td class="field" style="width: 7%"> <select id="ddlflatstatus" style="width: 177px;" name="flatstatus" runat="server"> <option value="0">--- Select ---</option> </select> </td> </tr> <tr> <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New"> Comments </td> <td class="field" style="width: 7%"> <asp:TextBox ID="txtcomments" runat="server" Width="172" TextMode="MultiLine"></asp:TextBox> </td> </tr> </table> <div style="height: 10px; background-color: #EAEFF5"> </div> <table width="100%" border="0" cellpadding="1" cellspacing="1" style="background-color: #EAEFF5"> <tr> <td align="center"> <asp:Button ID="CmdSave" OnClientClick="return ValidateRecord()" OnClick="CmdSave_Click" CssClass="button" Text="Submit" runat="server" />&nbsp &nbsp &nbsp <asp:Button ID="btnCancel" CssClass="button" Text="Cancel" runat="server" /> </td> </tr> </table> <div style="height: 10px; background-color: #EAEFF5"> </div> <div align="center" style="background-color: #EAEFF5"> <cc1:Grid ID="GrdBookingStatus" runat="server" FolderStyle="../../Styles/Grid/style_12" AutoGenerateColumns="false" AllowColumnResizing="true" Width="100%" ShowFooter="false" ShowHeader="true"> <Columns> <cc1:Column ID="Column1" DataField="" ReadOnly="true" HeaderText="Sr.No" Width="50" runat="server"> <TemplateSettings TemplateId="tplNumbering" /> </cc1:Column> <cc1:Column ID="Column2" DataField="PROPERTY_NAME" HeaderText="Project Name" runat="server" Width="200px"> </cc1:Column> <cc1:Column ID="Column3" DataField="BUILDING" HeaderText="Building No" runat="server" Width="200px"> </cc1:Column> <cc1:Column ID="Column4" DataField="FLAT_ID" HeaderText="Flat No" runat="server" Width="80px"> </cc1:Column> <cc1:Column ID="Column5" DataField="FLAT_STATUS" HeaderText="Flat Status" runat="server" Width="160px"> </cc1:Column> <cc1:Column ID="Column6" DataField="COMMENTS" HeaderText="Comments" runat="server" Width="200px"> </cc1:Column> </Columns> <Templates> <cc1:GridTemplate runat="server" ID="tplNumbering"> <Template> <b> <%# (Container.RecordIndex + 1) %></b> </Template> </cc1:GridTemplate> </Templates> </cc1:Grid> </div> </ContentTemplate> </asp:UpdatePanel>

And he displayed the entry if it existed in the database.

0
source

Here is the jQuery approach (don't forget to remove runat='server' from select ):

HTML:

 <select id="ddlUnit" style="width: auto" name="unitno"> <option>--- Select ---</option> <option>option1</option> </select> <asp:Button ID="btnSearch" runat="server" Text="Search" /> <asp:Label ID="lblMessage" runat="server" Text="No Record Found" Font-Bold="true" ForeColor="Red" style="display:none"></asp:Label>

JQuery

 <script type="text/javascript"> $(document).ready(function () { $('#<%=btnSearch.ClientID %>').click(function (e) { SearchGridData(); e.preventDefault(); }); }); function SearchGridData() { var counter = 0; //Get the search text var searchText = $('#ddlUnit').val().toLowerCase(); //Hide No record found message $('#<%=lblMessage.ClientID %>').hide(); //Hide all the rows of gridview $('#<%=GridView1.ClientID %> tr:has(td)').hide(); if (searchText.length > 0) { //Iterate all the td of all rows $('#<%=GridView1.ClientID %> tr:has(td)').children() .each(function () { var cellTextValue = $(this).text().toLowerCase(); //Check that text is matches or not if (cellTextValue.indexOf(searchText) >= 0) { $(this).parent().show(); counter++; } }); if (counter == 0) { //Show No record found message $('#<%=lblMessage.ClientID %>').show(); } } else { //Show All the rows of gridview $('#<%=GridView1.ClientID %> tr:has(td)').show(); } } </script>
+1
source

Use jQuery datatables, they support ajax calls and server side processing. Take a look at this:

https://www.datatables.net/examples/server_side/

  $(document).ready( function() { $('#example').dataTable( { "bServerSide": true, "sAjaxSource": "scripts/GetMyData.aspx", "sServerMethod": "POST" } ); } );
0
source

Source: https://habr.com/ru/post/1240218/

More articles:


All Articles