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

How do you pass an ID to a Pop-up Template?

7 Answers 581 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 19 Oct 2012, 01:43 PM
I have a Kendo Grid that opens a Template Pop-up when the user clicks Update.  I need to pass an ID to the pop-up or I need to trigger a change on the AccountID dropdownlist to populate the Contacts Grid, but I'm failing on both accounts.  What is the solution?

Here's my Home Index.cshtml:
@using Kendo.Mvc.UI.Fluent
@model PosPayAndBankRec.Models.TreasuryCreateModel
 
@functions {
 
    private void AccountGridCommandDef(GridColumnFactory<PosPayAndBankRec.Models.TreasuryCreateItem> columns)
    {
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
        columns.Bound(p => p.AccountID).Hidden();
        columns.Bound(p => p.BankID).Hidden();
 
        columns.Bound(p => p.BankName).Title("Bank").Width(120);
        columns.Bound(p => p.RamQuestBankNumber).Title("Bank #").Width(60);
        columns.Bound(p => p.AccountName).Title("Account").Title("Location");
        columns.Bound(p => p.AccountNumber).Title("Acct #");
        
        columns.Bound(p => p.PpStatus).Title("Positive Pay");
        columns.Bound(p => p.BrStatus).Title("Bank Rec");
        //columns.Bound(p => p.AccountFolderName).Title("Folder");
    }
 
    private void AccountGridDataSource(DataSourceBuilder<PosPayAndBankRec.Models.TreasuryCreateItem> dataSource)
    {
        dataSource.Ajax()
        .Model(AjaxAccountDataSourceBuilder)
        .Sort(sort => sort.Add(p => p.BankName))
        .ServerOperation(true)
        .Create(create => create.Action("Create", "Home"))
        .Read(read => read.Action("Read", "Home", new { id = Request.QueryString["id"] }))
        .Update(update => update.Action("Edit", "Home"))
        .Destroy(destroy => destroy.Action("Delete", "Home"));
        //.Events(e => e.Error("error"));
    }
 
    private void AjaxAccountDataSourceBuilder(DataSourceModelDescriptorFactory<PosPayAndBankRec.Models.TreasuryCreateItem> model)
    {
        model.Id(p => p.AccountID);
        model.Field(p => p.AccountName);
    }
 
    private void AccountGridToolBarDef(GridToolBarCommandFactory<PosPayAndBankRec.Models.TreasuryCreateItem> toolbar)
    {
        toolbar.Create().Text("Treasury Request");
    }
}
 
@{ ViewBag.Title = "Treasury Connections"; }
@(Html.Kendo().Grid<PosPayAndBankRec.Models.TreasuryCreateItem>()
           .Name("Treasuries")
           .Columns(AccountGridCommandDef)
           .DataSource(AccountGridDataSource)
           .ToolBar(AccountGridToolBarDef)
           .Editable(c => c.Mode(GridEditMode.PopUp).Enabled(true).DisplayDeleteConfirmation(true).Window(window => window.Title("Treasury Request")).TemplateName("TreasuryPopup").AdditionalViewData(new { Banks = Model.Banks }))
           .Sortable()
           .Filterable()
           .Resizable(resize => resize.Columns(true))
           .Reorderable(reorder => reorder.Columns(true))
           .ClientDetailTemplateId("ContactDetails")
           .Pageable(p => p.Enabled(false))
           .Scrollable(s => { s.Height(700); s.Virtual(true); })
             )
</script>
       
 
 
<script id="ContactDetails" type="text/kendo-tmpl">
                    @(Html.Kendo().Grid<PosPayAndBankRec.Models.ContactDetailsModel>()
                            .Name("Details_#=BankID#")
                            .Columns(columns =>
                                        {
                                            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
                                            columns.Bound(p => p.ContactName).Width(150);
                                            columns.Bound(p => p.ContactType).Width(100);
                                            //columns.Bound(p => p.ContactEmail).Width(150);
                                            columns.Bound(p => p.ContactPhone).Width(100);
                                            columns.Bound(p => p.Description).Width(100);
                                             
                                            //columns.Bound(p => p.ContactNotes).Width(200);
                                        })
                            .ToolBar(p => p.Create())
                            .DataSource(dataSource => dataSource
 
                            .Ajax()
                            .Model(model => model.Id(p => p.BankID))
                            .Sort(sort => sort.Add(p => p.ContactName))
                            .ServerOperation(true)
                            .Create(create => create.Action("Create", "Contact"))
                            .Read(read => read.Action("Details", "Contact", new { id = "#=BankID#" }))
                            .Update(update => update.Action("Update", "Contact"))
                            .Destroy(destroy => destroy.Action("Delete", "Contact"))
                        )
 
                            .Pageable()
                            .Sortable()
                            .Resizable(resize => resize.Columns(true))
                            .Reorderable(reorder => reorder.Columns(true))
                            .Editable(c => c.Mode(GridEditMode.PopUp).Enabled(true).DisplayDeleteConfirmation(true).Window(window => window.Title("Contact")).TemplateName("ContactPopup").AdditionalViewData(new { Banks = Model.Banks }))
                            .ToClientTemplate())
            .ToClientTemplate())
</script>


Here's the TreasuryPopup.cshtml:

@using System.Collections
@using PosPayAndBankRec.Models
 
@model PosPayAndBankRec.Models.TreasuryCreateItem
 
@{
    ViewBag.Title = "Treasury";
}
 
 
<fieldset>
    <legend>Bank Account Info</legend>
<table id="table">
    <tr>
        <th>
            Bank
        </th>
        <td>
            @(Html.Kendo().DropDownListFor(model => model.BankID)
                  .Name("BankID")
                  .OptionLabel("-- Select Item --")
          .DataTextField("BankName")
          .DataValueField("BankID")
          .DataSource(source => {
               source.Read(read =>
                               {
                                   read.Action("GetCascadeBanks", "Home");
                               });
          })
                   
                  
        </td>
    </tr>
    <tr>
        <th>
            Location
        </th>
        <td colspan="2">
            <script type="text/javascript">
 
//                function ShowHide(chk,txt) 
//                {
//                    if ((document.getElementById(chk).checked))
 
//                        document.getElementById(txt).style.display='';  
//                    else
//                        document.getElementById(txt).style.display='none';
//                }
 
 
                $(document).ready(function () {
                    $("#AccountID").trigger("valueChange");
                });
 
            </script>
             
            @(Html.Kendo().DropDownListFor(model => model.AccountID)
                   .Name("AccountID")
           .OptionLabel("-- Select Item --")
           .DataTextField("AccountName")
           .DataValueField("AccountID")
           .DataSource(source => {
                                     source.Read(read =>
                                                     {
                                                         read.Action("GetCascadeAccounts", "Home")
                                                             .Data("getBankID");
                                                     })
                                         .ServerFiltering(true);
           })
           .Enable(false)
           .AutoBind(false)
                   .CascadeFrom("BankID")
           .Events(events => events.Change("onBankChange")
           )
                  )
        </td>
    </tr>
    <tr>
        <td>
             
        </td>
        <th>
            Active
        </th>
        <th>
            Deactive
        </th>
    </tr>
    <tr>
        <th>
            Bank Reconcilliation
             
        </th>
        <td>
            @Html.EditorFor(model => model.BrActivationDate)
        </td>
        <td>
             @Html.EditorFor(model => model.BrDeactivationDate)
        </td>
    </tr>
    <tr>
        <th>
            Positive Pay
        </th>
        <td>
 
            @Html.EditorFor(model => model.PpActivationDate)
 
        </td>
        <td>
             @Html.EditorFor(model => model.PpDeactivationDate)
        </td>
    </tr>
</table>
</fieldset>
 
 
 
<fieldset>
    <legend>Contacts</legend>
 
@(Html.Kendo().Grid<PosPayAndBankRec.Models.ContactDetailsModel>()
.Name("Contacts")
                            .Columns(columns =>
                                        {
                                            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
                                            columns.Bound(p => p.ContactName).Width(150);
                                            columns.Bound(p => p.ContactType).Width(100);
                                            //columns.Bound(p => p.ContactEmail).Width(150);
                                            columns.Bound(p => p.ContactPhone).Width(100);
                                            //columns.Bound(p => p.Description).Width(100);
                                            //columns.Bound(p => p.ContactNotes).Width(200);
                                        })
                            .ToolBar(p => p.Create())
                            .DataSource(dataSource => dataSource
                            .Ajax()
                            .Model(model => model.Id(p => p.BankID))
                            .Sort(sort => sort.Add(p => p.ContactName))
                            .ServerOperation(true)
                            .Create(create => create.Action("Create", "Contact"))
                                .Read(read => read.Action("GetCascadeContacts", "Home")
 
                            .Data("getBankID"))
                            .Update(update => update.Action("Edit", "Contact"))
                            .Destroy(destroy => destroy.Action("Delete", "Contact"))
                        )
                        //.AutoBind(false)
                            .Pageable()
                            .Sortable()
                            .Resizable(resize => resize.Columns(true))
                            .Reorderable(reorder => reorder.Columns(true))
                       .Editable(c => c.Mode(GridEditMode.PopUp).Enabled(true).DisplayDeleteConfirmation(true).Window(window => window.Title("Contact")).TemplateName("ContactPopup")))
</fieldset>


Here's the HomeController:

public ActionResult GetCascadeContacts([DataSourceRequest] DataSourceRequest request, int BankID)
        {
 
                var ortcontacts = from contact in db.ORTContacts
                                  join bank in db.ORTBanks on contact.BankID equals bank.BankID
                                  where contact.BankID == BankID
 
                                  orderby contact.ContactName
 
                                  select new TreasuryCreateItem()
                                  {
                                      ContactID = contact.ContactID,
                                      ContactName = contact.ContactName,
                                      ContactEmail = contact.ContactEmail,
                                      ContactPhone = contact.ContactPhone,
                                      ContactType = contact.ContactType,
                                      ContactNotes = contact.ContactNotes,
                                      BankID = contact.BankID,
                                      BankName = bank.BankName
                                  };
                return Json(ortcontacts.ToDataSourceResult(request));
 
        }


Here's the TreasuryCreateModel:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using PosPayAndBankRec.Domain.Models;
using System.ComponentModel.DataAnnotations;
using PosPayAndBankRec.Models.Validators;
 
namespace PosPayAndBankRec.Models
{
    public class TreasuryCreateItem
    {
        public int AccountID { get; set; }
        public int BankID { get; set; }
        public string BankName { get; set; }
        [Required]
        [UniqueAccountName("This bank is already named in the system.")]
        [DataType(DataType.Text)]
        public string BankAccountName { get; set; }
        [Required]
        [UniqueAccountName("This account is already named in the system.")]
        [DataType(DataType.Text)]
        public string AccountName { get; set; }
        public string AccountNumber { get; set; }
        public string RamQuestBankNumber { get; set; }
        public string ContactType { get; set; }
        public string Description { get; set; }
        public int ContactID { get; set; }
        public string ContactName { get; set; }
        public string ContactPhone { get; set; }
        public string ContactEmail { get; set; }
        public string ContactNotes { get; set; }
        public bool? HasPosPay { get; set; }
        public bool? HasBankRec { get; set; }
        public string BrStatus { get; set; }
        public string PpStatus { get; set; }
        public string BrStatusNotes { get; set; }
        public string PpStatusNotes { get; set; }
        public Nullable<System.DateTime> BrActivationDate { get; set; }
        public Nullable<System.DateTime> BrDeactivationDate { get; set; }
        public Nullable<System.DateTime> PpActivationDate { get; set; }
        public Nullable<System.DateTime> PpDeactivationDate { get; set; }
        public List<ORTBank> Banks { get; set; }
    }
 
    public class TreasuryCreateModel
    {
        public List<ORTBank> Banks { get; set; }
        public List<ORTAccount> Accounts { get; set; }
        public List<ORTContact> Contacts { get; set; }
        public IEnumerable<TreasuryCreateItem> TreasuryCreateItems { get; set; }
    }
}


JavaScript:

<script type="text/javascript">
 
            function onBankChange(e) {
                var BankID;
                var bankDropdown = this;
                var contactGrid = $("#Contacts").data("kendoGrid");
 
                // Set BankId to the selected id of the bankDropDown
                BankID = $.map(this.select(), function (item) {
                    var dataItem = bankDropdown.dataItem(bankDropdown.select()).Id;
                });
 
                // Read the datasource again
                contactGrid.dataSource.read();
            }
 
            function getBankID() {
                return {
                    BankID: $("#BankID").val()
                };
            }
 
            function setPopupDimensions(ev) {
 
                window.setTimeout(function () {
 
                    $(".k-edit-form-container").parent().width(800).height(400).data("kendoWindow").center();
                }, 100);
 
            }
        </script>



7 Answers, 1 is accepted

Sort by
0
Alex
Top achievements
Rank 1
answered on 26 Oct 2012, 06:34 PM
I'm surprised no one else has tried to do this.
0
Rachel
Top achievements
Rank 1
answered on 20 Nov 2014, 01:41 PM
I have this exact same problem!!!! Has no one answered this?
0
Alexander Popov
Telerik team
answered on 25 Nov 2014, 09:25 AM
Hello Rachel

I am not sure I fully understand what the expected behavior is, however you could subscribe to the Grid's edit event. Once the event is triggered you can use the e.model or e.container arguments to perform the necessary operations on the underlying data item or the widgets inside of the popup window. 

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
James
Top achievements
Rank 1
answered on 10 May 2016, 09:07 AM
I would really like to see how you do that Alexander.  A simple example would be great.  I want to populate ahidden field on a popup editor template with data that is not in THAT grid.  (It is in anotyher grids selected row.   
0
Alexander Popov
Telerik team
answered on 12 May 2016, 08:22 AM
Hi James,

Here is a simple example showing how the edit event can be used to replace some values inside the popup editor.

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Matthew
Top achievements
Rank 1
Veteran
answered on 22 Jun 2019, 03:24 AM
Is there a way to do this with the TreeList? The e parameter in the edit event doesn't have a "container" object
0
Tsvetomir
Telerik team
answered on 26 Jun 2019, 02:49 PM
Hi Matthew,

The container property is available for all of the edit modes in the Kendo UI TreeList widget as well. However, in each of the different modes, the container refers to different HTML elements. More specifically:

  • InCell mode - currently edited cell
  • PopUp - the container holding the items
  • InLine - reference to the edited row

The currently edited model is available via the e.model property. Can you share more details on the exact scenario that you are willing to achieve? Then, I would have the opportunity to provide more accurate suggestions.


Kind regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Alex
Top achievements
Rank 1
Answers by
Alex
Top achievements
Rank 1
Rachel
Top achievements
Rank 1
Alexander Popov
Telerik team
James
Top achievements
Rank 1
Matthew
Top achievements
Rank 1
Veteran
Tsvetomir
Telerik team
Share this question
or