Navigate to records in RadGrid by typing a letter in a textbox

Thread is closed for posting
6 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 03 May 2007 Link to this post

    Requirements

    RadGrid for ASP .NET version 

    Q1 2007 and later
    RadControls for ASP .NET AJAX version 2008.1.415 and later
    .NET version

    2.0 and later
    Visual Studio version

    2005 and later 
    Programming language

    Javascript
    Browser support

    all supported by RadGrid for ASP .NET


    all browsers supported by RadControls for ASP .NET AJAX



    PROJECT DESCRIPTION

    The current project shows a RadGrid with a textbox in the command item template. Typing a letter in this textbox sets selected row in the grid to be the first found grid row that has a value in a designated column starting with the letter typed. The entire operation is done client-side using RadGrid client-side API.

    Grid's ClientSettings-->Selecting-->AllowRowSelect is set to true in order to have MasterTableView's Rows array available. Scrolling is enabled and the grid is scrolled down to the selected row, when set. Scrolling is based on the following help topic:
    http://www.telerik.com/help/aspnet/grid/?grdScrollToTheSelectedItem.html.

    In addition the column that provides the values which are checked for the starting letter is added to MasterTableView's DataKeyNames and ClientSettings.EnableClientKeyValues is enabled in order these values to be accessible on the client. The essential javascript code follows:

        var grid; 
        var scrollArea; 
        function GridCreated() 
        {  
            grid = this
            scrollArea = document.getElementById(this.ClientID + "_GridData"); 
        } 
        function KeyPressed(e)  
        { 
            var keynum 
            var keychar 
             
            keynum = e.which || e.keyCode 
            keychar = String.fromCharCode(keynum) 
             
            var rownum = grid.MasterTableView.Rows.length; 
            for (var i = 0; i < rownum; i++) 
            { 
                if (grid.MasterTableView.Rows[i].KeyValues["ProductName"].indexOf(keychar) == 0) 
                { 
                    grid.MasterTableView.SelectRow(grid.MasterTableView.Rows[i].Control, true); 
                     
                    //scroll to the selected row after the grid updates its display 
                    window.setTimeout(function(){ 
                        Scroll(grid.MasterTableView.Rows[i]); 
                        }, 10); 
                    break
                } 
             } 
             
             var textBox = e.srcElement || e.target; 
             textBox.blur(); 
             return true
        } 
        function Scroll(row) 
        { 
                //if the position of the selected row is below the viewable grid area   
                if((row.Control.offsetTop - scrollArea.scrollTop) + row.Control.offsetHeight + 20 > scrollArea.offsetHeight)   
                {   
                    //scroll down to selected row   
                    scrollArea.scrollTop = scrollArea.scrollTop + ((row.Control.offsetTop - scrollArea.scrollTop) + row.Control.offsetHeight - scrollArea.offsetHeight) + row.Control.offsetHeight;   
                }   
                //if the position of the the selected row is above the viewable grid area   
                else if((row.Control.offsetTop - scrollArea.scrollTop) < 0)   
                {   
                    //scroll the selected row to the top   
                    scrollArea.scrollTop = row.Control.offsetTop;   
                }   
        } 

  2. Craig Bolon
    Craig Bolon avatar
    107 posts
    Member since:
    Jun 2006

    Posted 15 May 2007 Link to this post

    May 15, 2007

    Dear Telerik admin --

    Here you confirm what we observed, that: "ClientSettings-->Selecting-->AllowRowSelect [must apparently be] set to true in order to have MasterTableView's Rows array available."

    A grid for one of our products has a checkbox and other fields in each row and is not row-selectable. Checkboxes are checked to indicate user specifications. We do not use multi-row selection because (1) it requires key-chords or alternate buttons, which our guidelines do not allow, and (2) such a capability would be hidden from users, whereas checkboxes makes the selection capability obvious.

    In our opinion, both server-side and client-side interfaces ought to have a simple GetCell(iRow, iColumn), but in fact neither has such a method. On server-side, with the application of undocumented behaviors, we manage to get the checkbox values. On client-side, we have as yet found no workable approach.
     
    And so the question: for a grid-that is not row-selectable, how do we get client-side access to a particular cell?

    -- Craig Bolon
       Brookline, MA, USA

  3. Craig Bolon
    Craig Bolon avatar
    107 posts
    Member since:
    Jun 2006

    Posted 15 May 2007 Link to this post

    May 15, 2007

    Dear Telerik admin --

    We found a solution for this one. Make the grid row-selectable but defeat selections with:

        function GridXXXRowSelected(oRow)
        {
            var oGrid = <% = ofGridXXX.ClientID %>;
            if (oGrid != null)
                oTable = oGrid.MasterTableView;
            if (oTable != null)
                oTable.DeselectRow(oRow.Control, true);
            return false;
        }

    Now one has Rows[] available for GetCellByColumnUniqueName().

    -- Craig Bolon
       Brookline, MA, USA
  4. avanti
    avanti avatar
    1 posts
    Member since:
    May 2007

    Posted 04 Jun 2007 Link to this post

    Hi. The rows are referenced initially, i.e. on page load. But when I click on Add New Row and add a new row dynamically in-place, my javascript code is not able to find the new row. How do i loop through all the old and new rows of a grid at client side?
  5. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 04 Jun 2007 Link to this post

    Hello,

    Indeed, the client object of the control is only available when the client-side row selection has been enabled.
    Indeed, one option is to deselect the row. Also, you can just cancel each row selection, before it is being carried out, thus not having to call the deselect function.
    Further, you can iterate through all the items on the client via the RadGridClientObject.MasterTableView.Items object.
    I hope this helps.

    Best wishes,
    Yavor
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 10 Mar 2008 Link to this post

    Hi,

    I have attached an update of the code library entry, to the latest Prometheus version of the control.

    Kind regards,
    Yavor
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top