asked on

Scroll to matching word in datagrid

Hi Experts,

I found the following code whilst searching the EE forums. It seems like it's going to do the job I need.

You can see the thread here: https://www.experts-exchange.com/questions/23739257/Scroll-to-matching-word-in-a-table-using-javascript.html?sfQueryTermInfo=1+scroll+search+texbox

Basically what I need is the facility to type a letter in a text box and the datagrid will automatically scroll to that line.

Example. If I type 'EF' in the text box it will search the second column Item Number and take you to the first value it find which begins with EF.

The code used in the EE forum was:

// ==

function createlettermap()
{
var txtsearchbox = document.getElementById("txtHeaderSearch");
var tbl = txtsearchbox.parentNode.parentNode.parentNode.parentNode;
var rows = tbl.rows;
var j = 0;
count = 0;
var searchChar = rows[1].cells[1].firstChild.nodeValue.toLowerCase().charAt(0); // assign first char of first row
for(var i=1;i< rows.length;i++)
{
if (rows[i].cells[1].firstChild.nodeValue.toLowerCase().charAt(0)!= searchChar) // if the first char of current row is not equal to previous row
{
//create an array entry for that character for ex: rows starts with "A" starts at 1 and ends at 10, the entry would be listmap{[a,1,20]}
listmap[j] = new Array();
listmap[j][0] = searchChar;
listmap[j][1] = i - count;
listmap[j][2] = i-1;
j++;

searchChar = rows[i].cells[1].firstChild.nodeValue.toLowerCase().charAt(0); //re set search char to current row first character
count = 1 ;
}
else
count++;
}
}

//

I don't know if the above code is of any use but hopefully it's just a matter of plugging it in.

How can I add an input text box which will look similar to the picture below on my page and have it perform the function of autoscrolling to the inputed text.

I have attached my existing code and have no idea where everything should go.

Big Thanks Experts.

<%@ Page Language="C#" EnableViewState="true" %>
<%@ import Namespace="System.Data" %>
<%@ import Namespace="System.Data.Odbc" %>
 
 
<script runat="server">
 
    void Page_Load(object sender, EventArgs e) {
        if(!Page.IsPostBack)
        {
            // TODO: Update the ConnectionString and CommandText values for your application
            string ConnectionString = @"DSN=MYOB;uid=Username;pwd=Password";
            string CommandText = "select Items.ItemNumber, Items.ItemName, Items.TaxInclusiveLastPurchasePrice FROM Items ORDER BY Items.ItemNumber ASC";
 
            OdbcConnection myConnection = new OdbcConnection(ConnectionString);
            OdbcCommand myCommand = new OdbcCommand(CommandText, myConnection);
 
            myConnection.Open();
 
            DataGrid1.DataSource = myCommand.ExecuteReader(CommandBehavior.CloseConnection);
            DataGrid1.DataBind();
 
            // close the connection
            myConnection.Close();
            
        }
    }
 
 
public void chkID_CheckedChanged(object sender, EventArgs e)
   {
       CheckBox chk = sender as CheckBox;
       if (chk != null)
       {
           DataGridItem item = chk.NamingContainer as DataGridItem;
          
           TextBox txt = item.FindControl("price") as TextBox;
           TextBox txt1 = item.FindControl("qty") as TextBox;
           TextBox1.Text=  TextBox1.Text + txt1.Text + " " + "x" + " " + item.Cells[1].Text + " - " + item.Cells[2].Text + "  " + "(" + "$" + txt.Text + ")" + "\n" ;
 
 
           Response.Write("Item List Updated");
           
       }
       
       
   }
 
 
</script>
 
 
 
 
<html>
<head>
</head>
<body style="FONT-FAMILY: arial">
    <form id="Form1" runat="server">
   <asp:HiddenField ID="hiddenField1" runat="server" />  
   <asp:TextBox id="search" runat="server" />
                    
        <asp:datagrid id="DataGrid1" runat="server" CellSpacing="1" GridLines="None" CellPadding="3" BackColor="White" 
ForeColor="Black" EnableViewState="True" Font-Size="8" AutoGenerateColumns="False">
<Columns>
<asp:TemplateColumn HeaderText="Qty">
                <ItemTemplate>
 
         <asp:Textbox columns="1" ID="qty" runat="server" />                       
                                       
                </ItemTemplate>
 
            </asp:TemplateColumn>
                        
 
<asp:BoundColumn HeaderText="Item Number" DataField="ItemNumber" ItemStyle-Font-Size="8" ItemStyle-Font-Name="Arial" />
        <asp:BoundColumn HeaderText="Item Name" DataField="ItemName" ItemStyle-Font-Size="8" ItemStyle-Font-Name="Arial"
                ItemStyle-HorizontalAlign="Left"
                DataFormatString="{0:$#,###.##}" />
<asp:BoundColumn HeaderText="Purchase Price" DataField="TaxInclusiveLastPurchasePrice" ItemStyle-Font-Size="8" ItemStyle-Font-Name="Arial"
                ItemStyle-HorizontalAlign="Left"
                DataFormatString="{0:C}" />  
 
<asp:TemplateColumn HeaderText="Retail Price">
                <ItemTemplate>
 
         <asp:Textbox columns="8" ID="price" runat="server" />                       
                                       
                </ItemTemplate>
 
            </asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Insert">
                <ItemTemplate>
                    <asp:CheckBox ID="chkID" runat="server" 
                        oncheckedchanged="chkID_CheckedChanged" AutoPostBack="True" />
                                       
                </ItemTemplate>
 
            </asp:TemplateColumn>
 </Columns>
            <HeaderStyle font-bold="True" forecolor="white" backcolor="#FF9900" Font-Size="8" Font-Name="Arial" HorizontalAlign="Center"></HeaderStyle>
            <ItemStyle backcolor="#DEDFDE" Font-Name="Arial"></ItemStyle>
 
        </asp:datagrid>
<asp:TextBox ID="TextBox1" TextMode="multiline" columns="74" rows="5" runat="server" />   
    </form>
</body>
</html>

Open in new window

example1.JPG

logicsolutions

ASKER

Just realized that the search box cannot be on the same page as the datarid otherwise I will lose the focus on the search box when it scroll to the row.

Is it possible for me to place the search box outside in a parent I frame that way when I search in the parent iframe it won't lose the textbox but will only automatically scroll to the row in the iframe which contains the datagrid.

logicsolutions

ASKER

I take it this can't be done. Is there an easier solution out there someone has already used or is searching a datagrid impossible.

I also found this link whilst searching but it's written in VB.net. I have tried to translate it into C# but have no idea how.

Here is the link: http://www.sitepoint.com/article/datagrid-searching-asp-net/3/

It's basically everything I need but I just don't know how to integrate it with my code.

Any help would be greatly appreciated experts.

ASKER CERTIFIED SOLUTION

logicsolutions

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial