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

[Alex]

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>

[Alex]

I'm surprised no one else has tried to do this.

[Rachel]

I have this exact same problem!!!! Has no one answered this?

[Alexander Popov]

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

 

 

[James]

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.   

[Alexander Popov]

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

 

 

[Matthew]

Is there a way to do this with the TreeList? The e parameter in the edit event doesn't have a "container" object

[Tsvetomir]

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