Focus Specific Grid Row Based on Key

2 posts, 1 answers
  1. Ray
    Ray avatar
    3 posts
    Member since:
    May 2013

    Posted 25 Sep 2014 Link to this post

    I'm sure this is actually really simple and I'm just making it really complicated, but I could really use a fresh set of eyes on this one.

    When a user loads my page with the grid on it, I get the url referrer via JavaScript and analyze it via regex. If the url has a TransactionID (int) in it, I assign it to a JavaScript variable.

    Here's my problem: I want to find the row in the grid with that TransactionID and have the grid go right to it (like if it's farther down the grid, I want the grid to scroll down to that row automatically). One way I think I can do this is to focus the row itself, but I can't figure out how to get to it in JavaScript. If I could find the row with the TransactionID, then just call the focus() function, I think that will solve this thing.

    Here's what I have. Please help! :(

    @(Html.Kendo().Grid(Model)
    .Name("TransactionGrid")
    .DataSource(dataSource => dataSource
        .Server()
        .Model(model => model.Id(o => o.TransactionsTrackingID))
        .PageSize(1000)
    )
    .Columns(columns =>
    {
        columns.Template(
            @<text>
    <a href='@Url.Content("~/Transaction/Details/" + @item.TransactionID)' style="cursor:pointer;">
        Details</a>
    </text>
        ).Width(53);
        columns.Bound(r => r.TransactionID).Title("ID").Hidden();
        columns.Bound(r => r.MessageType).Filterable(ftb => ftb.Cell(cell => cell.Delay(autoCompleteDelay)));
         
    })
    .HtmlAttributes(new { style = "width:100%;" })
    .Resizable(resizing => resizing.Columns(true))
    .Pageable()
    .Groupable()
    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
    .Sortable(sorting => sorting.Enabled(true))
    .Scrollable(s => s.Height(600))
                            )




    <script type="text/javascript">
     
     
        $(document).ready(function () {
     
            var referrer = '';
     
            if (document.referrer) {
                referrer = document.referrer;
            }
     
            var re1 = '(Transaction)'; // Alphanum 1
            var re2 = '(\\/)'; // Any Single Character 1
            var re3 = '(Details)'; // Word 1
            var re4 = '(\\/)'; // Any Single Character 2
            var re5 = '(\\d+)'; // Integer Number 1
     
            var p = new RegExp(re1 + re2 + re3 + re4 + re5, ["i"]);
            var m = p.exec(referrer);
     
            if (m !== null) {
                var transactionId = m[5]; //this gets the transactionID
     
                var grid = $("#TransactionGrid")
                grid.ready(function () {
                    //The code I will need goes in here. :(
                });
            }
        });
    </script>
  2. Answer
    Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 29 Sep 2014 Link to this post

    Hello Ray,

    The truth is that there isn't easy way of doing this. Here is the steps that you need to take:

     - you will need to find the row in the grid. Now as you are using server binding there isn't data in the data source (client side) of the grid and you will have to find the row by searing the content in the cells. Example snippet for this (assuming that the second cell contains the TransactionID)
    var rows = $("#TransactionGrid").data("kendoGrid").items(); //Grid data rows
    var row = $.grep(rows, function(row) { return row.cells[1].innerHTML == parsedValue; })[0];

     - once the row is found you will have to bring it into view. One way to do this is to call scrollIntoView of the DOM element, i.e. row.scrollIntoView(); . Focusing the row will not work as it isn't form element and by default the browser doesn't consider it as focusable unless tabindex is set. 

    Regards,
    Nikolay Rusev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top