Opening Bootstrap modal from URL in grid column

[ImNotTed]

I would like to show a clickable URL within a Kendo Grid that opens a bootstrap modal. Unfortunately, when the user clicks on this link, the browser navigates to a new page to show the results.

The code below is supposed to open a partial view that would load the proper data for the specified LotId.

Any help would be greatly welcomed.

Thanks!

@(Html.Kendo().Grid<LotViewModel>()
      .Name("LotGrid")
      .Columns(columns =>
      {
        columns.Bound(x => x.LotName).ClientTemplate(@Html.ActionLink("#=LotName#", "ShowLotModal", "Lot", new { id = "#=LotId#" }, null));

})

// Etc...


[Beryl]

Were you ever able to solve this issue?

[Dimo]

Hello,

The Bootstrap modal should be opened with a JavaScript click handler, attached to the ActionLink. Currently, it appears that such a handler is not used. The Grid's dataBound event can be used to attach the event handler, unless you prefer an "onclick" attribute.

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/overview#event-handling

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

Since the discussed development task is not directly related to Kendo UI, my recommendation is to achieve the desired behavior with an ActionLink outside the Grid, and then integrate the functionality with the Grid. Let me know if you have any problems with the last step.

Regards,
Dimo
Telerik

[ImNotTed]

Beryl,

I did get it working and it wasn't too difficult. This was written in Bootstrap 3 & MVC, years ago. You'll probably have to rework the modal layout to work with Bootstrap 4 or 5.

I'm not including the models or other methods since they'll just complicate the important parts. You should focus on the custom "Click" event, and the way I'm using jQuery to replace the contents of the modal's DIV with that of another page.

<!-- Shipping page -->

<div class="well well-sm">
  @{ Html.RenderPartial("~/Views/Shared/_ValidationErrors.cshtml"); }

  @(Html.Kendo().Grid<ShipmentViewModel>()
      .Name("ReceiveShipmentGrid")
      .Columns(columns =>
      {
        columns.Bound(x => x.ShipmentId).Visible(false);
        columns.Bound(x => x.ShipmentDate).Format(ViewBag.DateFormat);
        columns.Bound(x => x.TransferStatus).Title("Status");
        columns.Bound(x => x.NewOwnerUserName);
        columns.Bound(x => x.DestinationLocationPath);
        columns.Command(command =>
        {
          command.Custom("Edit").Text(@ViewBag.EditGlyph).SendDataKeys(true).Click("openShipmentEditModal"); // This is the command that opens the modal
          command.Custom("ReceiveShipment").Text(@ViewBag.ReceiveGlyph).SendDataKeys(true).Click("receiveShipment");
        }).Width(85).Visible(@SessionData.CanEditShipment);
      })
      .AutoBind(true)
      .Selectable()
      .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Events(events => events.Error("errorHandler"))
        .Model(model => model.Id(x => x.ShipmentId))
        .Read(read => read.Action("GetShipments", "ReceiveShipment"))
      )
  )
</div>

<!-- This is where the contents of the modal will be placed -->
<div id="shipmentModal" class="modal fade" data-backdrop="static" data-keyboard="false">
  <div id="shipmentContainer"></div>
</div>

<script>

// Open the Edit Shipment modal when the button is clicked
function openShipmentEditModal() {
  var url = getShipmentModalUrl();
  var shipmentId = $('#ShipmentId').val();

  // This is where we use jquery to put the contents of the modal into the container.

  $.get(url + '/' + shipmentId, function(data) {
    $('#shipmentContainer').html(data);
    $('#shipmentModal').modal('show');
  });
};
</script>

<!-- Shipment Modal -->

<div class="modal-dialog" id="shipmentEditForm">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">@MvcHtmlString.Create(ViewBag.ShipmentGlyph) @ViewBag.Title</h4>
    </div>
    <div class="modal-body">

<!-- Form contents go here -->

    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>
</div>

<script>

          // Hide modal command... you'll have to wire this up yourself
          $('#shipmentModal').modal('hide');

</script>

I hope this helps you out!