在两页之间选择相应的剑道行

Question

我在仪表板页面上有一个剑道网格，当选择网格中的一行时，需要加载不同票证页面上剑道网格中的同一行以显示该票证信息。

这是仪表板页面上的剑道网格：

@(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)
    )

这是票证页面上的 Kendo 网格，在页面加载时当前选择网格中的第一行以在网格右侧显示票证消息和详细信息。

@(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>

}

因此重申一下，当选择仪表板页面上的剑道上的一行时，我需要加载门票页面并自动选择门票页面上的剑道网格中的相应行。但是，如果在导航栏中选择了门票页面而没有选择剑道仪表板上的行，我仍然需要选择门票页面上剑道网格中的第一行。

在工单页面上选择一行时，会附加工单消息和详细信息：

 // 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);
 }

Answer 1

我看到您正在将 ViewModel 传递到第二个网格，该网格应该显示所需的票证。如果 ViewModel 包含 TicketID，您可以向网格的数据源添加

Filter

配置。这样，数据将被过滤，您将在网格中获得一行。

@model OverviewTicketSystemModel
...

.DataSource(dataSource => dataSource
  .Custom()
 ...
  .Filter(filters =>
    {
       filters.Add(t => t.TicketID).IsEqualTo(Model.TicketID);
    })
  )