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

Adding Custom button to open a partial view in a pop-up window

9 Answers 1924 Views

Grid

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

Jeff asked on 06 Dec 2012, 07:50 PM

I haven't found any good examples on this that used the ASP.NET MVC. The button will open up a partial view in a pop-up window. The id field from the grid row needs to be used to pull data for the pop-up window. Does anyone have an example of this using the ASP.NET MVC controls?

So far, I haven't been able to execute the "OpenContractRate" method that I mention in the javascript function below.

Here is what I've tried so far...

Kendo Grid:

@(Html.Kendo().Grid<TMS.Domain.Operations.TIMS.CoreObjects.ContractOrderEvent>()

.Name("ContractDetailOrderEventGrid")

.Columns(columns =>

{

columns.Command(o =>

{

o.Destroy();

o.Edit();

}).Width(100);

columns.Bound(o => o.ContractTypeName).Width(100);

columns.Bound(o => o.OrderLevelFlag).Width(50);

columns.Command(command => command.Custom("Update").Click("ShowRates")).Width(75);

columns.Bound(o => o.InvoiceDescription).Width(100);

columns.Bound(o => o.SourceContainerOwner).Width(100);

columns.Bound(o => o.DestContainerOwner).Width(100);

columns.Bound(o => o.SourceContainerTypeName).Width(100).Title("Src Container Type");

columns.Bound(o => o.DestContainerTypeName).Width(100);

})

.Scrollable(scrolling => scrolling.Enabled(true).Height("250px"))

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Sortable(sorting => sorting.Enabled(true))

.Pageable(paging => paging.Enabled(false))

.Resizable(resizing => resizing.Columns(true))

.Filterable(filtering => filtering.Enabled(true))

.Groupable(grouping => grouping.Enabled(true))

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(p => p.ContractOrderEventId))

.Read(read => read.Action("ReadContractOrderEvent", "ContractGrid", new { contractId = Model.DetailModel.ContractId } ))

.Update(update => update.Action("UpdateContractOrderEvent", "ContractGrid"))

.Destroy(update => update.Action("DestroyContractOrderEvent", "ContractGrid"))

)

Kendo Window:

@(Html.Kendo().Window()

.Name("Rates")

.Title("Rates")

.Visible(false)

.Modal(true)

.Draggable(true)

.Width(500)

.Height(500)

)

Javascript function:

<script>

function ShowRates(e) {

var direction = "ContractRateAdmin/OpenContractRate";

var wnd = $("#Rates").data("kendoWindow");

if (!wnd) {

// first click of the button - will automatically fetch the contentUrl

wnd = $("#Rates").kendoWindow({

title: "Rates",

actions: [ "Close"],

content: direction,

width: "800px",

height: "600px",

visible: false,

modal: true

}).data("kendoWindow");

}

wnd.refresh(direction);

wnd.center();

wnd.open();

}

</script>

Controller Action:

[HttpGet, ImportModelStateFromTempData, HttpParamAction]

public ActionResult OpenContractRate()

{

ContractAdminRateModel model = new ContractAdminRateModel();

model.EffectiveDate = DateTime.Now;

// Return the view

return PartialView(Url.Content("~/Views/Admin/Contracts/AdminContractsDetailRates.cshtml"), model);

}

Partial View to show in pop-up window:

@model TMS.MVC.TIMS.Models.Admin.Contract.ContractAdminRateModel

@{

var htmlWidthDefault = "width: 250px;";

}

@using (Html.BeginForm(HttpParamActionAttribute.TIMSActionName, "ContractRateAdmin"))

{

<table>

<tr>

<td><span class="FieldLabel">Effective Date:</span></td>

<td>

@Html.Partial(Url.Content("~/Views/Admin/Contracts/FieldTemplates/ContractDetailRate_EffectiveDate.cshtml"))

</td>

</table>

}

9 Answers, 1 is accepted

answered on 07 Dec 2012, 08:47 PM

I'm not sure if this is the correct way to do this, but it works. I made a custom command button that executes the following Javascript. Hard coding the URL is going to end up being a problem.

columns.Command(command => command.Custom("Details").Click("showDetails"))

<script type="text/javascript">

function showDetails(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

var url = "http://localhost:50258/Csr/EditAccounts/" + dataItem.AccountId;

var wnd = $("#Details").kendoWindow({

title: "Accounts",

actions: ["Minimize", "Maximize", "Close"],

content: url,

visible: false,

modal: true

}).data("kendoWindow");

wnd.center();

wnd.open();

}

</script>

answered on 24 Jun 2015, 06:45 PM

Hello Tim,

I am following your approach. However I need to refresh my parent grid on close of popup. I am able to refresh it first time of closing grid but it is not working second time. Please guide.

function showDetails(e) {

e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var url = "http://localhost:52921/AOF/LoadOrder/EditFulfillment?ID=" + dataItem.PulseHdrID;
var wnd = $("#Details").kendoWindow({
title: "Accounts",
actions: ["Minimize", "Maximize", "Close"],
content: url,
visible: false,
modal: true
}).data("kendoWindow");
wnd.center();
wnd.open();
}

@(Html.Kendo().Window().Name("Details")
.Title("Allocate Quantity for Pulse Order")
.Visible(false)
.Modal(true)
.Draggable(true)
.Width(700)
.Height(600)
.Events(events => events
.Close("resetPulseOrderGrid")
.Refresh("resetPulseOrderGrid")
)
)

function resetPulseOrderGrid() {
alert('hello');
$("#filesGrid").data("kendoGrid").dataSource.read();
}

Controller code

public ActionResult EditFulfillment()
{
Session["selectedPulseHdrID"] = Request.QueryString["ID"];
PulseDtlViewModel pdVM = new PulseDtlViewModel();
return PartialView("_fulfillment", pdVM);
}