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

[Jeff]

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>    

  

}

[Tim]

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>

[Ravi]

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

 

 

[Rosen]

Hello Ravi,

The code you are using will not work as you are instantiating multiple window instance over the same element. You should remove the Kendo window's declaration set via the C# fluent API and use only the one created in JavaScript. As with the current code the showDetails method will create a second widget instance over the element of the instance created using the C# wrapper.

Regards,
Rosen
Telerik

[Ravi]

Thanks Rosen for your input. Can you help me with some sample code or some example which I can follow.

[Rosen]

Hello Ravi,

I'm afraid we do not have such example available. However, from the provided information it seems that you have already implemented a solution to what you are trying to achieve. You just need to remove the double initialization of the window widget and move the close event handler to the JavaScript initialized window widget.

Regards,
Rosen
Telerik

[Ravi]

Great Rosen. Appreciate your input. This helped me. I am able to refresh grid.

Any inputs on how to remove hardcoding of URL?

var url = "http://localhost:52921/AOF/LoadOrder/EditFulfillment?ID=" + dataItem.PulseHdrID;

 

 

[Rosen]

Hello Ravi,

You could remove it as I suppose you have done it on other places in your application - for example by using the @Url.Action to generate it.

Regards,
Rosen
Telerik

[Dan]

Hi Rosen,

You did not provide an example how using the @Url.Action can be used to generate the url, since the url requires a parameter from the javascript. Could you provide an code example.

[Viktor Tachev]

Hi Dan,

Please check out the thread below that describes how additional parameters can be added to a url generated from @Url.Action:

• https://stackoverflow.com/questions/15112055/passing-dynamic-javascript-values-using-url-action

Regards,
Viktor Tachev
Progress Telerik