I have a Kendo grid on a dashboard page which when a row in the grid is selected, needs to load that same row in a kendo grid on a different ticket page to display that ticket information.

Here is the Kendo grid thats on the dashboard page:

@(Html.Kendo().Grid<TP.Objects.Entities.Generic.Ticket>()
    .Name("ClientOpenTicketsDashboard")
    .Columns(columns =>
    {
        columns.Bound(c => c.Subject).Width("33.3%");
        columns.Bound(c => c.Message).Width("33.3%");
        columns.Bound(c => c.ExpectedSLA).Width("33.3%").ClientTemplate("#= kendo.toString(ExpectedSLA, 'MM/dd/yyyy') #");
    })
    .Selectable(x => x.Enabled(true))
    .Events(events => events.Change("TP.ClientSite.Banking.Banking.Onchange"))
    .Pageable(p => p.ButtonCount(2))
    .DataSource(dataSource => dataSource
    .Custom()
    .PageSize(5)
    .ServerPaging(true)
    .Transport(transport => transport
    .Read(read => read.TPApiUrl("/Ticketing/TicketApi/GetClientOpenTicketsPaged")
    .Data("GetUserID"))
    )
    .Schema(schema => schema
    .Data("Data")
    .Total("Total")
    .Errors("Errors")
    .Model(m => m.Id("TicketID"))
    )
    )
    .Deferred(false)
    )

And heres the Kendo grid thats on the ticket page which on page load currently selects the first row in the grid to display that tickets messages and details to the right of the grid.

@(Html.Kendo().Grid<TP.Objects.Entities.Generic.Ticket>()
    .Name("ClientOpenTicketsTicketPage")
    .Columns(columns =>
    {
        columns.Bound(c => c.Message).Width("100%").ClientTemplate(
        "<div><strong>Name:</strong></div>" +
        "<div>#= Message #</div>" +
        "<div>" +
        "<span class='status-background'><strong></strong> #= TicketStatus.Description #</span> " +
        "<span class='" +
        "# if (TicketPriority.Description == 'Low') { #" +
        "priority-low" +
        "# } else if (TicketPriority.Description == 'Medium') { #" +
        "priority-medium" +
        "# } else if (TicketPriority.Description == 'High') { #" +
        "priority-high" +
        "# } else if (TicketPriority.Description == 'Urgent') { #" +
        "priority-urgent" +
        "# } #" +
        "'><strong></strong> #= TicketPriority.Description #</span>" +
        "</div>"
        ).HtmlAttributes(new { @class = "left-align" });
    })
    .Selectable(x => x.Enabled(true))
    .Events(events =>
    {
        events.Change("TP.ClientSite.Banking.Banking.OnchangeForClientOpenTickets");
        events.DataBound("onDataBoundForClientOpenGrid");
    })
    .DataSource(dataSource => dataSource
    .Custom()
    .PageSize(1000)
    .ServerPaging(true)
    .Transport(transport => transport
    .Read(read => read.TPApiUrl("/Ticketing/TicketApi/GetClientOpenTicketsPaged")
    .Data("GetUserID"))
    )
    .Schema(schema => schema
    .Data("Data")
    .Total("Total")
    .Errors("Errors")
    .Model(m => m.Id("TicketID"))
    )
    )
    .Deferred(true)
    )

<script type="text/javascript">
    function onDataBoundForClientOpenGrid(e) {
        var grid = $("#ClientOpenTicketsTicketPage").data("kendoGrid");
        grid.tbody.find(">tr").addClass("custom-row-gap");
        var firstRow = grid.tbody.find(">tr").first();
        grid.select(firstRow);
        firstRow.trigger("click");
    }
</script>

}

So to reiterate, when a row on the kendo on the dashboard page is selected, i need that to load up the tickets page and automatically select the corresponding row in the kendo grid on the ticket page. However, i also still need to select the first row in the kendo grid on the tickets page if the tickets page is selected in the nav bar without a row on the kendo dashboard being selected.