Client side searchable Gridview in asp.net

Question

0.00/5 (No votes)

See more:

Hi,
I want client side searchable grid view. when i press any character in text box then grid view need to show data which is started from that character.
Thank u

Posted 2-Feb-12 18:51pm

Nilesh Patil Kolhapur

Updated 8-May-16 19:03pm

Add a Solution

3 solutions

Solution 1

AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup panel to display words that begin with the prefix typed into the textbox. Here is the property list:

XML

<ajaxToolkit:AutoCompleteExtender
    runat="server"
    ID="autoComplete1"
    TargetControlID="myTextBox"
    ServiceMethod="GetCompletionList"
    ServicePath="AutoComplete.asmx"
    MinimumPrefixLength="2"
    CompletionInterval="1000"
    EnableCaching="true"
    CompletionSetCount="20"
    CompletionListCssClass="autocomplete_completionListElement"
    CompletionListItemCssClass="autocomplete_listItem"
    CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
    DelimiterCharacters=";, :"
    ShowOnlyCurrentWordInCompletionListItem="true">
        <Animations>
            <OnShow> ... </OnShow>
            <OnHide> ... </OnHide>
        </Animations>
</ajaxToolkit:AutoCompleteExtender>

Posted 2-Feb-12 18:57pm

Ganesan Senthilvel

Comments

Nilesh Patil Kolhapur 3-Feb-12 1:07am

what is service method and service path in it

Solution 3

After some modification in Sanjay K. Gupta's Code it will search the whole grid.

JavaScript

// Searching in whole grid
function Filter(txtbox, GridViewId) {
                var grid = document.getElementById(GridViewId);
                var terms = txtbox.value;
                var isExists = false;
                var ele;
                for (var r = 1; r &lt; grid.rows.length; r++) {
                    isExists = false;
                    for (var j = 0; j &lt; grid.rows[0].cells.length; j++) {
                        ele = grid.rows[r].cells[j].innerHTML;
                        if (ele.toLowerCase().indexOf(terms.toLowerCase()) &gt;= 0)
                            isExists = true;
                    }
                    if (!isExists)
                        grid.rows[r].style.display = 'none';
                    else
                        grid.rows[r].style.display = '';


            }

Posted 8-May-16 19:03pm

Hafiz Saad Ullah

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sanjay K. Gupta · Accepted Answer · 2012-02-02T19:11:00

<input type='text' onkeyup='Filter(this);'/>

function Fliter (Obj) {
    var grid=document.getElementById('gridID');
        var terms = Obj.value;
        var cellNr = this.filterCellIndex;//your  grid cellindex
        var ele;
        for (var r = 1; r < grid.rows.length; r++) {
            ele = grid.rows[r].cells[cellNr].innerHTML.replace(/<[^>]+>/g, "");
            if (ele.toLowerCase().indexOf(terms) >= 0)
                grid.rows[r].style.display = '';
            else grid.rows[r].style.display = 'none';
        }
    };