This is a migrated thread and some comments may be shown as answers.

Focus Specific Grid Row Based on Key

1 Answer 133 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ray
Top achievements
Rank 1
Ray asked on 25 Sep 2014, 09:57 PM
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>

1 Answer, 1 is accepted

Sort by
0
Accepted
Nikolay Rusev
Telerik team
answered on 29 Sep 2014, 09:08 AM
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.

 
Tags
Grid
Asked by
Ray
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Share this question
or