About aouto gridview[Answered] RSS

3 replies

Last post Mar 07, 2017 06:45 PM by sardessardes

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

- Reply
sardessardes
Member

38 Points

95 Posts

About aouto gridview

Mar 02, 2017 07:44 PM|sardessardes|LINK

Hi all

i want to make search area . when u type in textbox than aoutomaticilly 10 picture and picture name showing.

i made it from 1 gridview, 1 textbox and 1 timer , 1 sqldatasource(sqldatasource bring data which like textbox typed)

using timer is sluggish my web site.

is there a way how to do search area when user enter type and automatically show picture and picture name.

also all of them in one button

begining of the END
Starting to be the MASTER
- Reply
sardessardes
Member

38 Points

95 Posts

Re: About aouto gridview

Mar 05, 2017 07:35 PM|sardessardes|LINK

İ think i need "Filter GridView as you type" funtionallty.

here is some examples but too complex any easy way anyone know ?

https://www.aspsnippets.com/Articles/Search-and-Filter-GridView-as-you-type-in-TextBox-using-jQuery-AJAX-in-ASPNet.aspx

http://dotnetcode4programmer.blogspot.com.tr/2013/03/filter-gridview-as-you-type-aspnet-c.html

begining of the END
Starting to be the MASTER

Zhi Lv - MSF...

All-Star

45489 Points

7008 Posts

Microsoft

Re: About aouto gridview

Mar 06, 2017 01:55 AM|Zhi Lv - MSFT|LINK

Hi sardessardes,

You could try to use the AutoCompleteExtender control.

In aspx:

<form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
            <asp:TextBox ID="txtContactsSearch" runat="server"></asp:TextBox>
            <ajaxToolkit:AutoCompleteExtender
                ServicePath="WebService1.asmx"
                ServiceMethod="SearchEmployees"
                TargetControlID="txtContactsSearch"
                MinimumPrefixLength="1"
                CompletionInterval="100"
                CompletionSetCount="10"
                OnClientPopulated="Employees_Populated"
                OnClientItemSelected=" OnEmployeeSelected"
                ID="AutoCompleteExtender1"
                runat="server"
                FirstRowSelected="false">
            </ajaxToolkit:AutoCompleteExtender>
        </div>
    </form>

    <script type="text/javascript">
        function Employees_Populated(sender, e) {
            var employees = sender.get_completionList().childNodes;
            for (var i = 0; i < employees.length; i++) {
                var div = document.createElement("DIV");
                div.innerHTML = "<img style = 'height:50px;width:50px' src = 'photos/"
                + employees[i]._value + ".jpg' /><br />";
                employees[i].appendChild(div);
            }
        }
        function OnEmployeeSelected(source, eventArgs) {
            var idx = source._selectIndex;
            var employees = source.get_completionList().childNodes;
            var value = employees[idx]._value;
            var text = employees[idx].firstChild.nodeValue;
            source.get_element().value = text;
        }
</script>

Code behind:

[System.Web.Script.Services.ScriptMethod()]
        [System.Web.Services.WebMethod]
        public static List<string> SearchEmployees(string prefixText, int count)
        {
            using (SqlConnection conn = new SqlConnection())
            {
                conn.ConnectionString = ConfigurationManager
                        .ConnectionStrings["NorthwindConnectionString1"].ConnectionString;
                using (SqlCommand cmd = new SqlCommand())
                {
                    cmd.CommandText = "select EmployeeId, FirstName, LastName from" +
                     " Employees where FirstName like '%'+ @SearchText + '%'";
                    cmd.Parameters.AddWithValue("@SearchText", prefixText);
                    cmd.Connection = conn;
                    conn.Open();
                    List<string> employees = new List<string>();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        while (sdr.Read())
                        {
                            employees.Add(AjaxControlToolkit.AutoCompleteExtender
                               .CreateAutoCompleteItem(string.Format("{0} {1}",
                               sdr["FirstName"], sdr["LastName"]),
                               sdr["EmployeeId"].ToString()));
                        }
                    }
                    conn.Close();
                    return employees;
                }
            }
        }

More details, please check the following links:

http://www.aspsnippets.com/Articles/Render-images-in-autocomplete-list-of-ASP.Net-AJAX-AutoCompleteExtender.aspx

https://ajaxcontroltoolkit.devexpress.com/AutoComplete/AutoComplete.aspx

Best regards,
Dillion

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

- Reply
sardessardes
Member

38 Points

95 Posts

Re: About aouto gridview

Mar 07, 2017 06:45 PM|sardessardes|LINK

Hi all;

Thx to everbody who typed my topics.

Finally i made its. if anyone want to same thing here is working codes

<%@ Page Language="C#" AutoEventWireup="false" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">
function runPostback() {
document.forms["form1"].submit();
}

function SetDelay() {
setTimeout("runPostback()", 200);
}
</script>

</head>

<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:TextBox ID="TextBox1" onkeyup="SetDelay();" runat="server" AutoCompleteType="Disabled" AutoPostBack="True" OnTextChanged="TextBox1_TextChanged1"></asp:TextBox>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="TextBox1" />
</Triggers>
<ContentTemplate>

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="Id">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" ReadOnly="True" SortExpression="Id" />
<asp:BoundField DataField="filmadi" HeaderText="filmadi" SortExpression="filmadi" />
<asp:BoundField DataField="filmkonusu" HeaderText="filmkonusu" SortExpression="filmkonusu" />
<asp:BoundField DataField="oyuncu1" HeaderText="oyuncu1" SortExpression="oyuncu1" />
<asp:BoundField DataField="oyuncu2" HeaderText="oyuncu2" SortExpression="oyuncu2" />
<asp:BoundField DataField="oyuncu3" HeaderText="oyuncu3" SortExpression="oyuncu3" />
<asp:BoundField DataField="oyuncu4" HeaderText="oyuncu4" SortExpression="oyuncu4" />
<asp:BoundField DataField="oyuncu5" HeaderText="oyuncu5" SortExpression="oyuncu5" />
<asp:BoundField DataField="yonetmen" HeaderText="yonetmen" SortExpression="yonetmen" />
<asp:BoundField DataField="yapımcı" HeaderText="yapımcı" SortExpression="yapımcı" />
<asp:BoundField DataField="filmresim" HeaderText="filmresim" SortExpression="filmresim" />
<asp:BoundField DataField="filmfragman" HeaderText="filmfragman" SortExpression="filmfragman" />
<asp:BoundField DataField="yıl" HeaderText="yıl" SortExpression="yıl" />
<asp:BoundField DataField="filmozet" HeaderText="filmozet" SortExpression="filmozet" />
<asp:BoundField DataField="filmresim2" HeaderText="filmresim2" SortExpression="filmresim2" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [filmbilgileri] WHERE ([filmadi] LIKE '%' + @filmadi + '%')">
<SelectParameters>
<asp:ControlParameter ControlID="TextBox1" Name="filmadi" PropertyName="Text" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>

</form>

<script type='text/javascript'>
function setCaretPosition(element, pos){
//Get your element
var ctrl = document.getElementById(element);

if(ctrl.setSelectionRange)
{
ctrl.focus();
ctrl.setSelectionRange(pos,pos);
}
else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}

//Set your caret position to 0
setCaretPosition('<%= TextBox1.ClientID %>',20);
</script>

</body>
</html>

begining of the END
Starting to be the MASTER

‹ Previous Thread|Next Thread ›