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 923 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jeff
Top achievements
Rank 1
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

Sort by
0
Tim
Top achievements
Rank 1
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>
0
Ravi
Top achievements
Rank 1
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);
        }

 

 

0
Rosen
Telerik team
answered on 26 Jun 2015, 12:52 PM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Ravi
Top achievements
Rank 1
answered on 29 Jun 2015, 01:21 PM
Thanks Rosen for your input. Can you help me with some sample code or some example which I can follow.
0
Rosen
Telerik team
answered on 30 Jun 2015, 11:37 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Ravi
Top achievements
Rank 1
answered on 30 Jun 2015, 06:51 PM

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;

 

 

0
Rosen
Telerik team
answered on 02 Jul 2015, 07:07 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 23 Apr 2018, 08:28 AM

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.

0
Viktor Tachev
Telerik team
answered on 24 Apr 2018, 05:23 AM
Hi Dan,

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



Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Jeff
Top achievements
Rank 1
Answers by
Tim
Top achievements
Rank 1
Ravi
Top achievements
Rank 1
Rosen
Telerik team
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Viktor Tachev
Telerik team
Share this question
or