Focus Specific Grid Row Based on Key

[Ray]

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>

[Nikolay Rusev]

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