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.

The tickets messages and details are appended when a row is selected on the ticket page:

 // Function to handle the change event when a ticket is selected in the ClientOpenTicketsTicketPage grid
  module.OnchangeForClientOpenTickets = function (e) {
      var grid = $("#ClientOpenTicketsTicketPage").data("kendoGrid");
      var selectedItem = grid.dataItem(grid.select());
      var TicketID = selectedItem.TicketID;
      loadTicketMessages(TicketID);
      loadTicketDetails(TicketID);
  };

  // Function to load ticket messages for a given TicketID
  function loadTicketMessages(TicketID) {
      $.ajax({
          type: "GET",
          url: "/Ticket/Ticket/DisplayTicketMessages",
          data: { TicketID: TicketID },
          success: function (data) {
              $('#ticketMessageContainer').html(data);
          }
      });
  }

  // Function to load ticket details for a given TicketID
  function loadTicketDetails(TicketID) {
      $.ajax({
          type: "GET",
          url: "/Ticket/Ticket/DisplayTicketDetails",
          data: { TicketID: TicketID },
          success: function (data) {
              $('#ticketDetailsContainer').html(data);
          }
      });
  }

p

ublic async Task<IActionResult> DisplayTicketDetails(Guid TicketID)
 {
     OverviewTicketSystemModel vm = new OverviewTicketSystemModel();

     vm.Ticket = await _TicketApiClient.GetTicketByIDAsync(TicketID);

     return PartialView("Partials/_TicketDetailsPartial", vm);
 }



public async Task<IActionResult> DisplayTicketMessages(Guid TicketID)
 {
     OverviewTicketSystemModel vm = new OverviewTicketSystemModel();

     vm.Ticket = await _TicketApiClient.GetTicketByIDAsync(TicketID);

     return PartialView("Partials/_TicketMessagesPartial", vm);
 }