如何在Kendo网格上的PopUp Edit窗口中访问项目？ [英] How can I access items on PopUp Edit window on Kendo grid?
本文介绍了如何在Kendo网格上的PopUp Edit窗口中访问项目？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个联系页面，用户可以在其中维护它。使用Kendo网格，我在初始网格上列出了只有几列的联系人。当用户单击编辑按钮时，会出现一个PopUp，因此可以执行编辑/删除。但是，联系表有3个外键（AccountId，StateProvinceId，CountryRegionId），它们在主网格上显示为下拉列表，但在PopUp窗口中不显示。我怎么能这样做？
下面是cshtml代码..
@ model Humana.Billings.Web.Models.ContactModel
@using Humana.Billings.Web.Helpers;
@using System.Collections;
< div > ;
@（Html.Kendo（）。网格< ContactModel < span class =code-keyword>> （）
.Name（Constants.ContactGridId）
.EnableCustomBinding（true）
.Sortable（）
。列（c =>
{
c.Bound（e => e.ContactId）.Width（50）;
c.ForeignKey（e => e.AccountId，（ IEnumerable）ViewData [Account]，AccountId，Name）。Title（Account）;
c.Bound（e => e.PrimaryContact）;
c.Bound（ e => e.ReceivesNotifications）;
c.Bound（e => e.FirstName）;
c.Bound（e => e.LastName）;
c.Bound （e => e.Department）.Hidden（）;
c.Bound（e => e.Address1）.Hidden（）;
c.Bound（e => e.Address2 ）.Hidden（）;
c.Bound（e => e.City）.Hidden（）;
c.ForeignKey（e => e.StateProvinceId，（IEnumerable）ViewData [StateProvinces]，StateProvinceId，StateAbbName）。Title（State Province）。Hidden（）;
c.Bound（e => e.Zip）.Hidden（）;
c.ForeignKey（e => e.CountryRegionId，（IEnumerable）ViewData [CountryRegions]，CountryRegionId，CountryCode）。Title（Country Region）。Hidden（）;
c.Bound（e => e.Phone）.Hidden（）;
c.Bound（e => e.PhoneExtension）.Hidden（）;
c.Bound（e => e.Fax）.Hidden（）;
c.Bound（e => e.Email）.Hidden（）;
c.Command（command => {command.Edit（）; command.Destroy（）;}）。Width（155）;
}）
。活动（events =>
{
events.Cancel（Helpers.HideNotificationArea）;
}）
.Sortable（ ）
.Selectable（）
.Editable（editable => editable.Mode（GridEditMode.PopUp）.TemplateName（EditContact））
.Pageable （）
.Filterable（）
.ToolBar（items =>
{
items.Create（）。Text（Add New Contact）;
} ）
.DataSource（d => d
.Ajax（）
.ServerOperation（true）
.PageSize（15）
.Model（model =>
{
model.Id（m => m.ContactId）;
model.Field（m => m.ContactId）.Editable（false）;
model。字段（m => m.AccountId）.DefaultValue（-1）;
model.Field（m => m.PrimaryContact）.DefaultValue（false）;
mo del.Field（m => m.ReceivesNotifications）.DefaultValue（假）;
model.Field（m => m.FirstName）;
model.Field（m => m.LastName）;
model.Field（m => m.Department）;
model.Field（m => m.Address1）;
model.Field（m => m.Address2）;
model.Field（m => m.City）;
model.Field（m => m.StateProvinceId）.DefaultValue（-1）;
model.Field（m => m.Zip）;
model.Field（m => m.CountryRegionId）.DefaultValue（-1）;
model.Field（m => m.Phone）;
model.Field（m => m.PhoneExtension）;
model.Field（m => m.Fax）;
model.Field（m => m.Email）;
}）
。阅读（read => read.Action（Read_Contacts，Constants.ContactController））
.Create（create => create.Action（创建，Constants.ContactController）
.Update（update => update.Action（Update，Constants.ContactController））
.Destroy（destroy => destroy.Action（Delete） ，Constants.ContactController））
.Events（events =>
{
events.Error（function（e）{Helpers.GridError（e，'+ Constants.ContactGridId + '）}）;
events.Change（@ < text >
function（e）{
Helpers.HideNotificationArea（e）;
Helpers.OnChangeForeignKeyRead（e，['AccountId']，[' StateProvinceId']，['CountryRegionId']）;
}
< / text > ）;
}）
）
）
< / div >
解决方案
所以经过一些研究，我发现自定义Kendo PopUp编辑器的最佳方法是创建一个自定义编辑器模板并将其放在你的〜Views / Shared / EditorTemplates文件夹中。一旦你在主网格cshtml上提供模板的名称，就像这样：
。可编辑（editable => editable.Mode（GridEditMode.PopUp）
.TemplateName（_ EditContact）
一旦我想出来，下拉列表中的另一个问题是没有显示来自表格，但它填充确定。这花了一些时间来弄清楚，因为没有很多关于剑道的文档。解决方法是删除.Name（ColumnName）属性
。HtmlAttributes（new {@ColumnNameId =ColumnName}）
这是_EditContact.cshtml的完整代码
@ model Humana.Billings.Web.Models.ContactModel
@using Humana.Billings.Web.Helpers;
@using System.Collections;
< div class = editor-label >
@ Html.LabelFor（model => model.ContactId）
< / div >
< div class = editor-field >
@（Html.Kendo（）。TextBoxFor（model => model.ContactId）
.Enable（false ）
）
< / div >
< div class = 编辑标签 >
@ Html.LabelFor（model => model.PrimaryContact）
< / div >
< div class = editor-field >
@ Html.CheckBoxFor（model => model.PrimaryContact）
< / div >
< div class = 编辑标签 >
@ Html.LabelFor（model => model.ReceivesNotifications）
< / div >
< div class = editor-field >
@ Html.CheckBoxFor（model => model.ReceivesNotifications）
< / div >
< div < span class =code-attribute> class = editor-label >
@ Html.LabelFor（model => model.FirstName）
< / div >
< div class = editor-field >
@ Html.EditorFor（model => model.FirstName）
@ Html.ValidationMessageFor（model => model.FirstName）
< / div >
< div class = 编辑标签 >
@ Html.LabelFor（model => ; model.LastName）
< / div >
< div class = editor-field >
@ Html.EditorFor（model => model.LastName）
@ Html.ValidationMessageFor（model => model.LastName）
< / div >
< div class = 编辑标签 >
@ Html.LabelFor（model => m odel.Department）
< / div >
< div class = editor-field >
@ Html.EditorFor（model => model.Department）
@ Html.ValidationMessageFor（model => model.Department）
< / div >
< div class = editor-label >
@ Html.LabelFor（ model => model.Address1）
< / div >
< div class = 编辑字段 >
@ Html.EditorFor（model =&g吨; model.Address1）
@ Html.ValidationMessageFor（model => model.Address1）
< / div >
< div class = editor-label >
@ Html.LabelFor（ model => model.Address2）
< / div >
< div class = 编辑字段 >
@ Html.EditorFor（model => m odel.Address2）
@ Html.ValidationMessageFor（model => model.Address2）
< / div >
< div class = 编辑标签 >
@ Html.LabelFor（model => model.City）
< / div >
< div class = editor-field >
@ Html.EditorFor（model => model.City）
@ Html.ValidationMessageFor（model => model.Cit y）
< / div >
< div class = editor-标签 >
@ Html.LabelFor（model => model.StateProvinceId）
< / div >
< div class = editor-dropdown >
@（Html.Kendo（）。DropDownListFor（model => model.StateProvinceId）
//.Name （StateProvince）
.HtmlAttributes（new {@StateProvinceId =StateProvince}）
.Filter（startswith）
.DataValueField（StateProvinceId）
.DataTextField （StateAbbName）
.BindTo（（System.Collections.IEnumerable）ViewData [StateProvinces]）
）
< / div > ;
< div class = editor -label >
@ Html.LabelFor（model => model.Zip）
< / div >
< div class = editor-field >
@ Html.EditorFor（model => model.Zip）
@ Html.ValidationMessageFor（model => model.Zip）
< / div >
< div class = 编辑标签 >
@ Html.LabelFor（model => model.CountryReg ionId）
< / div >
< div class = editor-下拉列表 >
@（Html.Kendo（）。DropDownListFor（model => model.CountryRegionId）
//.Name(\"CountryRegion）
.HtmlAttributes（new {@CountryRegionId =CountryRegion}）
//.Filter (\"startswith）
.DataValueField（CountryRegionId）
.DataTextField（CountryCode）
//.AutoBind(true)
.BindTo（（System.Collections.IEnumerable）ViewData [CountryRegions] ）
//。ToClientTemplate（）
）
< / div >
< div class = editor-label >
@ Html.LabelFor（model => model.Phone）
< / div >
< div class = editor-field >
@ Html.EditorFor（model = > model.Phone）
@ Html.ValidationMessageFor（model => model.Phone）
< / div >
< div class = editor-label >
@ Html.LabelFor（ model => model.PhoneExtension）
< / div >
< div class = 编辑字段 >
@ Html.EditorFor（model => m odel.PhoneExtension）
@ Html.ValidationMessageFor（model => model.PhoneExtension）
< / div >
< div class = 编辑标签 >
@ Html.LabelFor（model => model.Fax）
< / div >
< div class = editor-field >
@ Html.EditorFor（model => model.Fax）
@ Html.ValidationMessageFor（model => model .Fax）
< / div > ;
< div class = editor -label >
@ Html.LabelFor（model => model.Email）
< / div >
< div class = editor-field >
@ Html.EditorFor（model => model.Email）
@ Html.ValidationMessageFor（model => model.Email）
< / div >
I've a Contact page, where a user can maintain it. Using Kendo grid, I listed the contact on my initial grid with only few columns. When the user clicks edit button, a PopUp comes up so edit/delete can be performed. However, the contact table has 3 foreign keys (AccountId, StateProvinceId, CountryRegionId) that show up as dropdown list on the main grid but not on the PopUp window. How can I do this?
Below is the cshtml code..
@model Humana.Billings.Web.Models.ContactModel
@using Humana.Billings.Web.Helpers;
@using System.Collections;
<div>
@(Html.Kendo().Grid<ContactModel>()
.Name(Constants.ContactGridId)
.EnableCustomBinding(true)
.Sortable()
.Columns(c =>
{
c.Bound(e => e.ContactId).Width(50);
c.ForeignKey(e => e.AccountId, (IEnumerable)ViewData["Account"], "AccountId", "Name").Title("Account");
c.Bound(e => e.PrimaryContact);
c.Bound(e => e.ReceivesNotifications);
c.Bound(e => e.FirstName);
c.Bound(e => e.LastName);
c.Bound(e => e.Department).Hidden();
c.Bound(e => e.Address1).Hidden();
c.Bound(e => e.Address2).Hidden();
c.Bound(e => e.City).Hidden();
c.ForeignKey(e => e.StateProvinceId, (IEnumerable)ViewData["StateProvinces"], "StateProvinceId", "StateAbbName").Title("State Province").Hidden();
c.Bound(e => e.Zip).Hidden();
c.ForeignKey(e => e.CountryRegionId, (IEnumerable)ViewData["CountryRegions"], "CountryRegionId", "CountryCode").Title("Country Region").Hidden();
c.Bound(e => e.Phone).Hidden();
c.Bound(e => e.PhoneExtension).Hidden();
c.Bound(e => e.Fax).Hidden();
c.Bound(e => e.Email).Hidden();
c.Command(command => { command.Edit(); command.Destroy(); }).Width(155);
})
.Events(events =>
{
events.Cancel("Helpers.HideNotificationArea");
})
.Sortable()
.Selectable()
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditContact"))
.Pageable()
.Filterable()
.ToolBar(items =>
{
items.Create().Text("Add New Contact");
})
.DataSource(d => d
.Ajax()
.ServerOperation(true)
.PageSize(15)
.Model(model =>
{
model.Id(m => m.ContactId);
model.Field(m => m.ContactId).Editable(false);
model.Field(m => m.AccountId).DefaultValue(-1);
model.Field(m => m.PrimaryContact).DefaultValue(false);
model.Field(m => m.ReceivesNotifications).DefaultValue(false);
model.Field(m => m.FirstName);
model.Field(m => m.LastName);
model.Field(m => m.Department);
model.Field(m => m.Address1);
model.Field(m => m.Address2);
model.Field(m => m.City);
model.Field(m => m.StateProvinceId).DefaultValue(-1);
model.Field(m => m.Zip);
model.Field(m => m.CountryRegionId).DefaultValue(-1);
model.Field(m => m.Phone);
model.Field(m => m.PhoneExtension);
model.Field(m => m.Fax);
model.Field(m => m.Email);
})
.Read(read => read.Action("Read_Contacts", Constants.ContactController))
.Create(create => create.Action("Create", Constants.ContactController))
.Update(update => update.Action("Update", Constants.ContactController))
.Destroy(destroy => destroy.Action("Delete", Constants.ContactController))
.Events(events =>
{
events.Error("function(e){Helpers.GridError(e, '" + Constants.ContactGridId + "')}");
events.Change(@<text>
function(e) {
Helpers.HideNotificationArea(e);
Helpers.OnChangeForeignKeyRead(e, ['AccountId'],['StateProvinceId'],['CountryRegionId']);
}
</text>);
})
)
)
</div> 解决方案
So after doing some research, I found out the best way to customize the Kendo PopUp Editor is creating a custom editor template and place it on you ~Views/Shared/EditorTemplates folder. Once you provide the name of the template on you main grid cshtml like this:
.Editable(editable => editable.Mode(GridEditMode.PopUp) .TemplateName("_EditContact")
Once I figured that out, there was another issue with the dropdownlist not showing the value from the table but it was populating ok. This took some time to figure out since there's not a lot of documentation on Kendo. The workaround for this was removing the .Name("ColumnName") property with
.HtmlAttributes(new { @ColumnNameId = "ColumnName" } )
Here's the full code for _EditContact.cshtml
@model Humana.Billings.Web.Models.ContactModel @using Humana.Billings.Web.Helpers; @using System.Collections; <div class="editor-label"> @Html.LabelFor(model => model.ContactId) </div> <div class="editor-field"> @(Html.Kendo().TextBoxFor(model => model.ContactId) .Enable(false) ) </div> <div class="editor-label"> @Html.LabelFor(model => model.PrimaryContact) </div> <div class="editor-field"> @Html.CheckBoxFor(model => model.PrimaryContact) </div> <div class="editor-label"> @Html.LabelFor(model => model.ReceivesNotifications) </div> <div class="editor-field"> @Html.CheckBoxFor(model => model.ReceivesNotifications) </div> <div class="editor-label"> @Html.LabelFor(model => model.FirstName) </div> <div class="editor-field"> @Html.EditorFor(model => model.FirstName) @Html.ValidationMessageFor(model => model.FirstName) </div> <div class="editor-label"> @Html.LabelFor(model => model.LastName) </div> <div class="editor-field"> @Html.EditorFor(model => model.LastName) @Html.ValidationMessageFor(model => model.LastName) </div> <div class="editor-label"> @Html.LabelFor(model => model.Department) </div> <div class="editor-field"> @Html.EditorFor(model => model.Department) @Html.ValidationMessageFor(model => model.Department) </div> <div class="editor-label"> @Html.LabelFor(model => model.Address1) </div> <div class="editor-field"> @Html.EditorFor(model => model.Address1) @Html.ValidationMessageFor(model => model.Address1) </div> <div class="editor-label"> @Html.LabelFor(model => model.Address2) </div> <div class="editor-field"> @Html.EditorFor(model => model.Address2) @Html.ValidationMessageFor(model => model.Address2) </div> <div class="editor-label"> @Html.LabelFor(model => model.City) </div> <div class="editor-field"> @Html.EditorFor(model => model.City) @Html.ValidationMessageFor(model => model.City) </div> <div class="editor-label"> @Html.LabelFor(model => model.StateProvinceId) </div> <div class="editor-dropdown"> @(Html.Kendo().DropDownListFor(model => model.StateProvinceId) //.Name("StateProvince") .HtmlAttributes(new { @StateProvinceId = "StateProvince" }) .Filter("startswith") .DataValueField("StateProvinceId") .DataTextField("StateAbbName") .BindTo((System.Collections.IEnumerable)ViewData["StateProvinces"]) ) </div> <div class="editor-label"> @Html.LabelFor(model => model.Zip) </div> <div class="editor-field"> @Html.EditorFor(model => model.Zip) @Html.ValidationMessageFor(model => model.Zip) </div> <div class="editor-label"> @Html.LabelFor(model => model.CountryRegionId) </div> <div class="editor-dropdown"> @(Html.Kendo().DropDownListFor(model => model.CountryRegionId) //.Name("CountryRegion") .HtmlAttributes(new { @CountryRegionId = "CountryRegion" }) //.Filter("startswith") .DataValueField("CountryRegionId") .DataTextField("CountryCode") //.AutoBind(true) .BindTo((System.Collections.IEnumerable)ViewData["CountryRegions"]) //.ToClientTemplate() ) </div> <div class="editor-label"> @Html.LabelFor(model => model.Phone) </div> <div class="editor-field"> @Html.EditorFor(model => model.Phone) @Html.ValidationMessageFor(model => model.Phone) </div> <div class="editor-label"> @Html.LabelFor(model => model.PhoneExtension) </div> <div class="editor-field"> @Html.EditorFor(model => model.PhoneExtension) @Html.ValidationMessageFor(model => model.PhoneExtension) </div> <div class="editor-label"> @Html.LabelFor(model => model.Fax) </div> <div class="editor-field"> @Html.EditorFor(model => model.Fax) @Html.ValidationMessageFor(model => model.Fax) </div> <div class="editor-label"> @Html.LabelFor(model => model.Email) </div> <div class="editor-field"> @Html.EditorFor(model => model.Email) @Html.ValidationMessageFor(model => model.Email) </div>
这篇关于如何在Kendo网格上的PopUp Edit窗口中访问项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
