Ad

Onchange Display GridView Record If Exist From Database Using Javascript

- 1 answer

I have an onchange event from html DropDownList in my code. I have already created a function to handle the OnChange event.

What I am trying to achieve is to load a 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 achieve this task using JavaScript? kindly suggest

Ad

Answer

I have altered my way of coding for this functionality.

As I added an aspx Dropdownlist instead of HTML SELECT And not using javascript for it.

Here I go:-

SelectedIndexChanged Event code

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 if record exist by 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 to stop the page from getting PostBack so I used Update panel in aspx like 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 it displayed the record if existed into the database.

Ad
source: stackoverflow.com
Ad