CODEWITHSUNDEEP
javascript
Srinivas
Srinivas

Reputation: 171

How to scroll to a particular record in gridview which is in div

I have a TextBox and a Button, and I have a quite long GridView (I don't want to page it), so I put it in a Div with vertical scroll bar enabled.

I just want to enter search string in text box and if I click on button it should find the row where string matched and set its back color, and should scroll to that row.

This should be done in Javascript. I'm able to do every thing, but no luck in scrolling to the found row.

The javascript function is like below 

function NextClinic() {

            var gvClinics = document.getElementById("<%= gvClinics.ClientID %>");
            var FindText = document.getElementById("<%= txtClinicKeywords.ClientID %>").value;
            var oRows = gvClinics.rows;
            var rawDataRows = new Array();
            var cell;
            var hdnCounterNext = document.getElementById("<%= hdnCounterNext.ClientID %>").value;
            for (var i = hdnCounterNext; i < oRows.length; i++) {
                var cell = gvClinics.rows[i].cells[3];
                if (cell.innerHTML.indexOf(FindText) !== -1) {
                    alert("found at " + i);
                    document.getElementById("<%= hdnCounterNext.ClientID %>").value = i+1
                    return false;
                }
            }
        }

A best suggestion is highly appreciated..

Thanks Sri.

Upvotes: 2

Views: 1405

Answers (2)

Devesh
Devesh

Reputation: 4550

Try to get the position of click and then use the ScrollTo option to move it correct place . I think jquery will help you. I think there is some plugin to do so here is one of them : http://demos.flesler.com/jquery/scrollTo/. Even you can also use http://api.jquery.com/scrollTop/ if you can the position of the element.

Upvotes: 1

user2985029
user2985029

Reputation:

use the scrollIntoView method

function NextClinic() {

            var gvClinics = document.getElementById("<%= gvClinics.ClientID %>");
            var FindText = document.getElementById("<%= txtClinicKeywords.ClientID %>").value;
            var oRows = gvClinics.rows;
            var rawDataRows = new Array();
            var cell;
            var hdnCounterNext = document.getElementById("<%= hdnCounterNext.ClientID %>").value;
            for (var i = hdnCounterNext; i < oRows.length; i++) {
                var cell = gvClinics.rows[i].cells[3];
                if (cell.innerHTML.indexOf(FindText) !== -1) {
                    alert("found at " + i);
                    cell.scrollIntoView();
                    document.getElementById("<%= hdnCounterNext.ClientID %>").value = i+1
                    return false;
                }
            }
        }

example

Upvotes: 1

Related Questions