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

10 posts, 0 answers
  1. Jeff
    Jeff avatar
    5 posts
    Member since:
    Aug 2011

    Posted 06 Dec 2012 Link to this post

    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>    
      
    }
  2. Tim
    Tim avatar
    6 posts
    Member since:
    Dec 2012

    Posted 07 Dec 2012 Link to this post

    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>
  3. Ravi
    Ravi avatar
    3 posts
    Member since:
    Jun 2015

    Posted 24 Jun 2015 in reply to Tim Link to this post

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

     

     

  4. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 26 Jun 2015 Link to this post

    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
  5. Ravi
    Ravi avatar
    3 posts
    Member since:
    Jun 2015

    Posted 29 Jun 2015 in reply to Rosen Link to this post

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

    Posted 30 Jun 2015 Link to this post

    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
  7. Ravi
    Ravi avatar
    3 posts
    Member since:
    Jun 2015

    Posted 30 Jun 2015 in reply to Rosen Link to this post

    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;

     

     

  8. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 02 Jul 2015 Link to this post

    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
  9. Dan
    Dan avatar
    167 posts
    Member since:
    Nov 2017

    Posted 23 Apr 2018 in reply to Rosen Link to this post

    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.

  10. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2482 posts

    Posted 24 Apr 2018 Link to this post

    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.
Back to Top