AutoCompleteExtender inside a modal pop but while i search a item or name the list came backside of modal

Question

User-148701852 posted

Front end:

<%@ Page Title="" Language="C#" MasterPageFile="~/OCPL_MAST.Master" AutoEventWireup="true" CodeBehind="Tenantdetail.aspx.cs" Inherits="OCPL.Application.Yadast_Management.Tenantdetail" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head_Content" runat="server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Body_Content" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
<div class="header">
<h1 class="page-title">Yadast </h1>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li class="active">Tenant Detail</li>
</ol>
<div class="clearfix"></div>
</div>
<%-- <div ID="alertmsg" class="container">
<div class="alert alert-warning alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Invalid Data Please Cheack The Data</strong>
</div>
</div>--%>

<asp:Panel ID="gridpanel" runat="server" ScrollBars="Auto">
<div id="page-inner">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<a href="YadastAbstractDM.aspx" class="btn-back"> Back </a>
<div class="col-md-2" style="width: 60px">
<asp:Label ID="lblProject" runat="server" Text="Project:-" CssClass="lbl"> </asp:Label>
</div>
<div class="col-md-2" style="width: 220px">
<asp:Label ID="lblprojectbind" runat="server" Text="" CssClass="lbl"> </asp:Label>
</div>
<div class="col-md-2" style="width: 60px">
<asp:Label ID="lblVillage" runat="server" Text="Village:-" CssClass="lbl"> </asp:Label>
</div>
<div class="col-md-2" style="width: 115px">
<asp:Label ID="lblvillagebind" runat="server" Text="" CssClass="lbl"> </asp:Label>
</div>
<div class="col-md-2" style="width: 90px">
<asp:Label ID="lbllacno" runat="server" Text="LA_CaseNo:-" CssClass="lbl"> </asp:Label>
</div>
<div class="col-md-2" style="width: 60px">
<asp:Label ID="lbllacbind" runat="server" Text="" CssClass="lbl"> </asp:Label>
</div>
<div class="col-md-2" style="width: 70px">
<asp:Label ID="lblddlkhatian" runat="server" Text="Khatian:-" CssClass="lbl"> </asp:Label>
</div>
<div class="col-md-2" style="width: 125px">
<asp:DropDownList ID="ddlkhatian" CssClass="form-control" OnSelectedIndexChanged="ddlkhatian_SelectedIndexChanged" AutoPostBack="true" runat="server"></asp:DropDownList>
</div>
<%-- Link button for modal --%>
<div class="col-md-2" style="width: 220px">
<asp:LinkButton ID="lnkbtnsearch" Style="color: #2684d4;" runat="server" Font-Size="Large"><i class="fa fa-search "></i> Search For a Tenant To Edit Detail</asp:LinkButton>
</div>

<%-- the modal pop up extender --%>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" CancelControlID="btncross" runat="server" PopupControlID="modalpanel1"
TargetControlID="lnkbtnsearch" BackgroundCssClass="popup-bg"></ajaxToolkit:ModalPopupExtender>
<%-- modal defination for seach tenenat --%>
<asp:Panel ID="modalpanel1" runat="server" Height="250px" Width="380px" BackColor="white" Style="z-index:2 !important;">
<div class="modal-header">
<h3 class="modal-title col-md-11">
<asp:Label ID="Label18" runat="server" Text="Search A Tenant Recod"></asp:Label>
</h3>
<div class="col-md-1 right">
<asp:LinkButton ID="btncross" runat="server" CssClass="close"><i class="fa fa-times-circle"></i> </asp:LinkButton>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-body">
<asp:AutoCompleteExtender ID="AutoExtender_org_name" runat="server" MinimumPrefixLength="1"
CompletionInterval="10" EnableCaching="true" CompletionSetCount="1" TargetControlID="txtmodaltntname"
ServiceMethod="Gettntname" CompletionListCssClass="AutoExtender" CompletionListItemCssClass="AutoExtenderList" CompletionListHighlightedItemCssClass="AutoExtenderHighlight">
</asp:AutoCompleteExtender>
<asp:Label ID="lblmodaltntname" runat="server" Text="Enter Tenant Name" CssClass="form-inline"></asp:Label>
<asp:TextBox ID="txtmodaltntname" runat="server" AutoPostBack="true" CssClass="form-group-sm"></asp:TextBox>
<asp:Button ID="btnok" runat="server" Text="OK" OnClick="btnok_Click" class="btn btn-primary" />
<%--CompletionListCssClass="completionList" CompletionListItemCssClass="listItem"
CompletionListHighlightedItemCssClass="itemHighlighted"--%>
</div>
</asp:Panel>

<div class="clearfix"></div>
<%-- grneral gridview --%>
<div class="table-responsive" style="margin-top: 20px;">
<asp:UpdatePanel ID="grdupdate" runat="server">
<ContentTemplate>
<asp:GridView ID="grdtenatdetail" OnPageIndexChanging="grdtenatdetail_PageIndexChanging" AllowPaging="true" HeaderStyle-CssClass="tbl-header" Width="100%" AutoGenerateColumns="false" CssClass="table table-striped table-bordered" runat="server">
<Columns>
<asp:TemplateField HeaderText="SLNO">
<ItemTemplate>
<asp:Label ID="lblslno" runat="server" Text='<%# Container.DataItemIndex+1 %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Khatian">
<ItemTemplate>
<asp:Label ID="lblkhatano" runat="server" Text='<%# Eval("KHATA_NO") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Tenant Name">
<ItemTemplate>
<asp:Label ID="lbltenatname" runat="server" Text='<%# Eval("TNT_NAME") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="Relative Name">
<ItemTemplate>
<asp:Label ID="lblrelativename" runat="server" Text='<%# Eval("RELA_NAME") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Relation">
<ItemTemplate>
<asp:Label ID="lblrelation" runat="server" Text='<%# Eval("RELATION") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="LIFE STAUTS">
<ItemTemplate>
<asp:Label ID="lbltenatname" runat="server" Text='<%# Eval("RLT_LFS") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address">
<ItemTemplate>
<asp:Label ID="lblrelation" runat="server" Text='<%# Eval("ADDRESS") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<%-- gridview for search result and edit option --%>
<div class="table-responsive" style="margin-top: 20px;">
<%--<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>--%>

<asp:GridView ID="GridViewsearch" Visible="false" AllowPaging="true" OnRowCommand="GridViewsearch_RowCommand1" OnPageIndexChanging="GridViewsearch_PageIndexChanging" HeaderStyle-CssClass="tbl-header" Width="100%" AutoGenerateColumns="false" CssClass="table table-striped table-bordered" runat="server">
<Columns>
<asp:TemplateField HeaderText="SLNO">
<ItemTemplate>
<asp:Label ID="lblslno" runat="server" Text='<%# Container.DataItemIndex+1 %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Khatian">
<ItemTemplate>
<asp:Label ID="lblkhatano" runat="server" Text='<%# Eval("KHATA_NO") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Tenant Name">
<ItemTemplate>
<asp:Label ID="lbltenatname" runat="server" Text='<%# Eval("TNT_NAME") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="Relative Name">
<ItemTemplate>
<asp:Label ID="lblrelativename" runat="server" Text='<%# Eval("RELA_NAME") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Relation">
<ItemTemplate>
<asp:Label ID="lblrelation" runat="server" Text='<%# Eval("RELATION") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="LIFE STAUTS">
<ItemTemplate>
<asp:Label ID="lblTNT_LFS" runat="server" Text='<%# Eval("RLT_LFS") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address">
<ItemTemplate>
<asp:Label ID="lblADDRESS" runat="server" Text='<%# Eval("ADDRESS") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<%--<asp:LinkButton ID="lnkeditrecord" Style="color: #2684d4;" CommandName="go" runat="server"><i class="fa fa-pencil-square-o "></i></asp:LinkButton>--%>
<asp:LinkButton runat="server" ID="lnkeditrecord" Style="color: #2684d4;" CommandName="go" ><i class="fa fa-pencil-square-o "></i></asp:LinkButton>
</ItemTemplate>

</asp:TemplateField>
</Columns>
</asp:GridView>

<%--</ContentTemplate>
</asp:UpdatePanel>--%>
</div>
<div class="clearfix"></div>
<div class="col-md-4" style="margin-left: -1%;">
<asp:Button ID="Button1" runat="server" Text="Reset" Visible="false" CssClass="btn btn-primary" OnClick="Button1_Click" />
</div>
<%-- <div class="col-md-4" style="margin-left: 76%;">
<asp:LinkButton ID="LinkButton1" Style="color: #2684d4;" runat="server" Font-Size="Large"><i class="fa fa-pencil-square-o "></i> Edit a Tenant Record</asp:LinkButton>
</div>
<div class="clearfix"></div>--%>
<div class="col-md-4" style="margin-left: 76%;">
<asp:LinkButton ID="lknbtnaddnewrecord" Style="color: #2684d4;" runat="server" Font-Size="Large" OnClick="lknbtnaddnewrecord_Click" ><i class="fa fa-file "></i> Add a New Tenant Record</asp:LinkButton>
</div>
</div>
</div>
</div>
</div>
</div>
</asp:Panel>
</asp:Content>

backend:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DTO;
using System.Data;
using UtilityClass;
using System.Data.SqlClient;
using System.Configuration;

namespace OCPL.Application.Yadast_Management
{
public partial class Tenantdetail : System.Web.UI.Page
{
string procode = "";
string villcode = "";
string lacno = "";
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
if (Session["uid"].ToString() != "")
{
procode = Session["Project"].ToString();
villcode = Session["Village"].ToString();
lacno = Session["LAcase"].ToString();
DataTable dt = new DataTable();
DataTable dt2 = new DataTable();
dt = CommonClass.ViewDataWithOutConditon("Select PROJ_NAME from PROJECT_DETAIL_MASTER where PROJ_CODE='" + Session["Project"].ToString() + "'");
dt2 = CommonClass.ViewDataWithOutConditon("Select VILL_NAME from VILLAGE_CODE_MASTER where VILL_CODE='" + villcode + "' and PROJ_CODE='" + procode + "'");
if(dt!=null && dt.Rows.Count>0)
{
lblprojectbind.Text = dt.Rows[0][0].ToString();
}
if(dt2!=null && dt2.Rows.Count>0)
lblvillagebind.Text = dt2.Rows[0][0].ToString();
lbllacbind.Text = lacno;
BindDetail(grdtenatdetail, "", "");
fillddl();
}
else
{
Response.Redirect("../Index.aspx");
}
}
}

protected void fillddl()
{
DataTable dtddl = new DataTable();
List<CommonDTO> dtolist1 = new List<CommonDTO>();
CommonDTO cmmnobj1;
procode = Session["Project"].ToString();
villcode = Session["Village"].ToString();
lacno = Session["LAcase"].ToString();

cmmnobj1 = new CommonDTO();
cmmnobj1.PARAMNAME = "@PROJ_CODE";
cmmnobj1.PARAMVALUE = procode;
cmmnobj1.PARAMTYPE = 2;
dtolist1.Add(cmmnobj1);
cmmnobj1 = new CommonDTO();
cmmnobj1.PARAMNAME = "@VILL_CODE";
cmmnobj1.PARAMVALUE = villcode;
cmmnobj1.PARAMTYPE = 2;
dtolist1.Add(cmmnobj1);
cmmnobj1 = new CommonDTO();
cmmnobj1.PARAMNAME = "@LAC_NO";
cmmnobj1.PARAMVALUE = lacno;
cmmnobj1.PARAMTYPE = 2;
dtolist1.Add(cmmnobj1);

dtddl = CommonClass.ViewData("PROC_GET_khata_DETAIL_to_DDL", dtolist1);
ddlkhatian.DataSource = dtddl;
ddlkhatian.DataTextField = "KHATA_NO";
ddlkhatian.DataValueField = "KHATA_NO";
ddlkhatian.DataBind();
ddlkhatian.Items.Insert(0, "ALL");
}
protected void BindDetail(GridView grid, string ddlkhata, string tntname)
{
DataTable dtbl = new DataTable();
List<CommonDTO> dtolist = new List<CommonDTO>();
CommonDTO cmmnobj;
procode = Session["Project"].ToString();
villcode = Session["Village"].ToString();
lacno = Session["LAcase"].ToString();

cmmnobj = new CommonDTO();
cmmnobj.PARAMNAME = "@PROJ_CODE";
cmmnobj.PARAMVALUE = procode;
cmmnobj.PARAMTYPE = 2;
dtolist.Add(cmmnobj);

cmmnobj = new CommonDTO();
cmmnobj.PARAMNAME = "@VILL_CODE";
cmmnobj.PARAMVALUE = villcode;
cmmnobj.PARAMTYPE = 2;
dtolist.Add(cmmnobj);
cmmnobj = new CommonDTO();
cmmnobj.PARAMNAME = "@LAC_NO";
cmmnobj.PARAMVALUE = lacno;
cmmnobj.PARAMTYPE = 2;
dtolist.Add(cmmnobj);
cmmnobj = new CommonDTO();
cmmnobj.PARAMNAME = "@KHATA_NO";
cmmnobj.PARAMVALUE = ddlkhata;
cmmnobj.PARAMTYPE = 2;
dtolist.Add(cmmnobj);

cmmnobj = new CommonDTO();
cmmnobj.PARAMNAME = "@TNT_NAME";
cmmnobj.PARAMVALUE = tntname;
cmmnobj.PARAMTYPE = 2;
dtolist.Add(cmmnobj);

dtbl = CommonClass.ViewData("PROC_GET_TENANT_DETAIL", dtolist);

if (dtbl.Rows.Count > 0)
{
grid.DataSource = dtbl;
grid.DataBind();
}
else
{
grid.DataSource = null;
grid.DataBind();
grid.EmptyDataText = "No Records Found";
}

}

protected void grdtenatdetail_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
grdtenatdetail.PageIndex = e.NewPageIndex;
if (ddlkhatian.SelectedItem.Text == "ALL")
{
BindDetail(grdtenatdetail, "", "");
}
else
{
BindDetail(grdtenatdetail, ddlkhatian.SelectedItem.Text.ToString(), "");
}
}

protected void ddlkhatian_SelectedIndexChanged(object sender, EventArgs e)
{
if (ddlkhatian.SelectedItem.Text == "ALL")
{
BindDetail(grdtenatdetail, "", "");
}
else
{
BindDetail(grdtenatdetail, ddlkhatian.SelectedItem.Text.ToString(), "");
}
}

protected void lknbtnaddnewrecord_Click(object sender, EventArgs e)
{
Session["mode"] = "New";
Response.Redirect("../Yadast Management/Newtenantrecord.aspx");
}

private Boolean cheaktenant()
{
DataTable dtchk = new DataTable();
if (ddlkhatian.SelectedItem.Text != "ALL")
{
dtchk = CommonClass.ViewDataWithOutConditon("select TNT_NAME from YADAST_MASTER where VILL_CODE='" + Session["Village"].ToString() + "' and LAC_NO='" + Session["LAcase"].ToString() + "' and KHATA_NO='" + ddlkhatian.SelectedItem.Text.ToString() + "' and TNT_NAME='" + txtmodaltntname.Text.ToString() + "'");

if (dtchk.Rows.Count>0 && dtchk.Rows[0]["TNT_NAME"].ToString().ToUpper() == txtmodaltntname.Text.ToString().ToUpper())
{
return true;
}
else
{
return false;
}
}
else
{
dtchk = CommonClass.ViewDataWithOutConditon("select TNT_NAME from YADAST_MASTER where VILL_CODE='" + Session["Village"].ToString() + "' and LAC_NO='" + Session["LAcase"].ToString() + "' and TNT_NAME='"+txtmodaltntname.Text.ToString()+"'");
if (dtchk.Rows.Count > 0 && dtchk.Rows[0]["TNT_NAME"].ToString().ToUpper() == txtmodaltntname.Text.ToString().ToUpper())
{
return true;
}
else
{
return false;
}
}
}

protected void btnok_Click(object sender, EventArgs e)
{
if (cheaktenant() == true)
{
if (ddlkhatian.SelectedItem.Text != "ALL" && txtmodaltntname.Text != "")
{
BindDetail(GridViewsearch, ddlkhatian.SelectedItem.Text.ToString(), txtmodaltntname.Text.ToString());
GridViewsearch.Visible = true;
grdtenatdetail.Visible = false;

}
else
{
BindDetail(GridViewsearch, "", txtmodaltntname.Text.ToString());
GridViewsearch.Visible = true;
grdtenatdetail.Visible = false;
}
}
else
{
grdtenatdetail.Visible = false;
GridViewsearch.Visible = true;
GridViewsearch.DataSource = null;
GridViewsearch.EmptyDataText = "Invalid Data";
GridViewsearch.DataBind();
Button1.Visible = true;
txtmodaltntname.Text = "";
}

}
[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> Gettntname(string prefixText, int count)
{
string constr = ConfigurationSettings.AppSettings["myConnectionString"];
SqlConnection _objcon = new SqlConnection(constr);
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "select Top 20 TNT_NAME from YADAST_MASTER where" + "[TNT_NAME] like @SearchText +'%'";
cmd.Parameters.AddWithValue("@SearchText", prefixText);
cmd.Connection = _objcon;
_objcon.Open();
List<string> Org_name = new List<string>();
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
Org_name.Add(sdr["TNT_NAME"].ToString());
}
_objcon.Close();
return Org_name;

}

protected void GridViewsearch_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridViewsearch.PageIndex = e.NewPageIndex;
if (ddlkhatian.SelectedItem.Text != "ALL" && txtmodaltntname.Text != "")
{
BindDetail(GridViewsearch, ddlkhatian.SelectedItem.Text.ToString(), txtmodaltntname.Text.ToString());
GridViewsearch.Visible = true;
grdtenatdetail.Visible = false;

}
else
{
BindDetail(GridViewsearch, "", txtmodaltntname.Text.ToString());
GridViewsearch.Visible = true;
grdtenatdetail.Visible = false;
}

}
protected void GridViewsearch_RowCommand1(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "go")
{
GridViewRow grdrw = (GridViewRow)(((LinkButton)e.CommandSource).NamingContainer);
Label lblkhatano = (Label)grdrw.FindControl("lblkhatano");
Label lbltenatname = (Label)grdrw.FindControl("lbltenatname");
Session["tntname"] = lbltenatname.Text.ToString();
Session["khatano"] = lblkhatano.Text.ToString();
Session["mode"] = "Edit";
Response.Redirect("../Yadast Management/Newtenantrecord.aspx",false);
}
}

protected void Button1_Click(object sender, EventArgs e)
{
grdtenatdetail.Visible = true;
GridViewsearch.Visible = false;
BindDetail(grdtenatdetail, "", "");
Button1.Visible = false;
}
}
}

Css contain:

.modalBackground{ !important; height:0px !important;}
.AutoExtenderList
{
display:block;
elevation:higher;
;
border-bottom: dotted 1px #006699;
cursor: pointer;
color: Maroon;
}
.AutoExtenderHighlight
{
color: White;
background-color: #006699;
cursor: pointer;
}
.AutoExtender
{
font-family: Verdana, Helvetica, sans-serif;
font-size: 1em;
font-weight: lighter;
border: solid 1px #006699;
line-height: 20px;
padding: 0px;
width:45px;
display:block;
background-color: White;
margin-left:10px;
margin-right:2px;
}
.popup-bg{ background:rgba(0,0,0,0.5);}

.modalPopup {display: block;background-color: #fff;padding: 10px;width: 500px;height: 400px;}
.modal-content{margin-top:20% !important;}
.modal-header{background-color:#3d86d2; color:#fff; padding:5px 10px;}
.modal-title{display:inline-block;}
.modal-header .close{color:#fff; margin-top:5px; margin-right:-17px; opacity:1; padding-left:0px;padding-top:0px}

PLEASE HELP ME IN IT

Answer 1

User-707554951 posted

Hi  asplearning

For your problem, you need to need z-index property for autocompleteextender listitem

Use following css:

  .AutoExtender {
            font-family: Verdana, Helvetica, sans-serif;
            font-size: 1em;
            font-weight: lighter;
            border: solid 1px #006699;
            line-height: 20px;
            padding: 0px;
            width: 45px;
            display: block;
            background-color: White;
            margin-left: 10px;
            margin-right: 2px;
            z-index:100000 !important;
        }

Best Regards

Cathy

Answer 2

User-148701852 posted

this worked perfectly thank you