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

Opening Bootstrap modal from URL in grid column

2 Answers 273 Views
Grid
This is a migrated thread and some comments may be shown as answers.
ImNotTed
Top achievements
Rank 1
Iron
ImNotTed asked on 29 Apr 2016, 12:11 PM

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
Top achievements
Rank 1
commented on 28 Jun 2021, 07:13 PM

Were you ever able to solve this issue?

2 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 03 May 2016, 07:13 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
ImNotTed
Top achievements
Rank 1
Iron
answered on 28 Jun 2021, 07:52 PM

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!

Tags
Grid
Asked by
ImNotTed
Top achievements
Rank 1
Iron
Answers by
Dimo
Telerik team
ImNotTed
Top achievements
Rank 1
Iron
Share this question
or