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:
Here's the TreasuryPopup.cshtml:
Here's the HomeController:
Here's the TreasuryCreateModel:
JavaScript:
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>