Telerik的格列MVC3未呈现的DropDownList [英] Telerik grid not rendering dropdownlist in column MVC3
问题描述
我与Telerik的网格，我似乎无法找到任何地方相当确切的问题一个问题。我下面从他们的网站客户端编辑模板演示。当进入编辑模式，它会立即死亡话说选方法是不明确的，从这个js语句：
＆LT;脚本类型=文/ JavaScript的＆GT;
功能onEdit（五）{
$（e.form）.find（'＃分页'）。数据（tDropDownList'）。选择（功能（DataItem的）{
返回dataItem.Text == e.dataItem ['页面名称'];
}）;
}
＆LT; / SCRIPT＆GT;
下面是我的看法：
＆LT;％@控制语言=VB继承=System.Web.Mvc.ViewUserControl％GT;
＆LT;％@导入命名空间=Community_Portal_Admin％GT;＆LT; DIV CLASS =gridFrame＆GT; ＆LT;％Html.Telerik（）网格（中IndustryPageContent）（）_。
。名称（IndustryPageContent）_
.DataKeys（功能（K）k.Add（功能（D）d.ID））_
.DataBinding（功能（DB）db.Ajax（）_
。选择（_ GetPageContent，工业）_
.Update（_ SetPageContent，工业））_
.Columns（功能（C）c.Bound（功能（D）d.IndustryID））_
.Columns（功能（C）c.Bound（功能（D）d.PageID））_
.Columns（功能（C）c.Bound（功能（D）d.PageActionID））_
.Columns（功能（C）c.Bound（功能（D）d.Content1））_
.Columns（功能（C）c.Bound（功能（D）d.Content2））_
.Columns（功能（C）c.Bound（功能（D）d.Content3））_
.Columns（功能（C）c.Bound（功能（D）d.Content4））_
.Columns（功能（C）c.Bound（功能（D）d.Content5））_
.Columns（功能（C）c.Command（功能（D）d.Edit（）。按钮类型（GridButtonType.Image））。宽度（60））_
.Columns（功能（C）c.Bound（功能（D）d.ID）.Hidden（））_
.ClientEvents（功能（E）e.OnEdit（onEdit））_
.Editable（功能（C）c.Mode（GridEditMode.InForm）.Enabled（真））_
.Scrollable（功能（S）s.Height（350像素））_
.Pageable（）_
.Selectable（）_
.Render（）
％GT; ＆LT; BR /＆GT; ＆LT;％：Html.ActionLink（关闭，索引，配置，没有新带{的.class =T-按钮，.Style =FONT-SIZE：12px的;}）％GT;＆LT; / DIV＆GT;＆LT;脚本类型=文/ JavaScript的＆GT; 功能onEdit（五）{ $（e.form）.find（'＃分页'）。数据（tDropDownList'）。选择（功能（DataItem的）{
返回dataItem.Text == e.dataItem ['页面名称'];
}）;
}＆LT; / SCRIPT＆GT;
下面是我的控制器操作：
功能GetPageContent（）为的ActionResult 尝试
ViewData的（分页）= SharedListDataRepository.PageList（） 返回PartialView（） 抓住EX为例外
扔
结束Try结束功能
下面是我的帮助加载列表数据：
公共共享功能分页（）为IEnumerable（中ApplicationPage） 昏暗l由于IEnumerable的（中ApplicationPage） 尝试
L =（自d。在新AdminIndustrySetupDataContext（TripleDESSecurity.Decrypt（SharedData.PortalCnx））。AdminApplicationPages顺序按d.ID选择新ApplicationPage随着{
.ID = d.ID，
.PageName = d.PageName
}）。AsEnumerable RETURN L 抓住EX为例外
扔
最后
如果不是L是没有那么
L =没什么
万一
结束Try结束功能
下面是我的模型：你可以看到它是装饰用 UIHint 是应该把控制到视图，而是因为错误是一个js错误一个未定义元素，它告诉我，该列表控件从未使它到页面上。这Firebug的赞同，它只是不存在于HTML
导入System.ComponentModel.DataAnnotations
进口System.Runtime.Serialization＆LT; KnownType（的GetType（IndustryPageContent））＆GT; _
公共类IndustryPageContent ＆LT; ScaffoldColumn（假）＆GT; _
公共属性ID为整数= 0
公共属性IndustryID为整数= 0
＆LT; UIHint（分页），要求（）＆GT; _
公共属性PAGEID为整数= 0
公共属性PageActionID为整数= 0
公共属性内容1作为字符串=的String.Empty
公共属性内容2作为字符串=的String.Empty
公共属性Content3作为字符串=的String.Empty
公共属性Content4作为字符串=的String.Empty
公共属性Content5作为字符串=的String.Empty 的Public Sub New（）
MyBase.New（）
结束小组末级
和最后这里是我的列表控件：
＆LT;％@控制语言=VB继承=System.Web.Mvc.ViewUserControl％GT;＆LT;％Html.Telerik（）的DropDownList（）_。
。名称（分页）_
.BindTo（新的SelectList（CTYPE（ViewData的（分页）的IEnumerable），ID，页面名称））
％GT;
所以我的猜测是，对于选择方法的JavaScript失败，因为 UIHint 不具约束力的控制权因此控制不存在对调用该方法选择
我在想什么？是否有Telerik的在电网与阿贾克斯结合的任何成功的实现 - 与编辑，使用VB.NET和ASPX，不是剃刀？还是我画到一个角落里与我有合作的限制只有一个？
我有什么，但使用Telerik的演示问题，他们始终不完整和/或使用方法的矛盾，支持最终会说噢，你不能这样做，这样做的时候真的吗？那么为什么在演示??
修改
这是最后的code为我网格，得到它的工作：
＆LT;％Html.Telerik（）网格（中IndustryPageContent）（）_。
。名称（IndustryPageContent）_
.DataKeys（功能（K）k.Add（功能（D）d.ID））_
.DataBinding（功能（DB）db.Ajax（）_
。选择（_ GetPageContent，工业）_
.Update（_ SetPageContent，工业））_
.Columns（功能（C）c.Bound（功能（D）d.IndustryID））_
.Columns（功能（C）c.Bound（功能（D）d.PageID））_
.Columns（功能（C）c.Bound（功能（D）d.PageActionID））_
.Columns（功能（C）c.Bound（功能（D）d.Content1））_
.Columns（功能（C）c.Bound（功能（D）d.Content2））_
.Columns（功能（C）c.Bound（功能（D）d.Content3））_
.Columns（功能（C）c.Bound（功能（D）d.Content4））_
.Columns（功能（C）c.Bound（功能（D）d.Content5））_
.Columns（功能（C）c.Command（功能（D）d.Edit（）。按钮类型（GridButtonType.Image））。宽度（60））_
.Columns（功能（C）c.Bound（功能（D）d.ID）.Hidden（））_
.Editable（功能（C）c.Mode（GridEditMode.InForm）.Enabled（真））_
.Scrollable（功能（S）s.Height（350像素））_
.Pageable（）_
.Selectable（）_
.Render（）
％GT;
的 ClientEvents 不需要线和JS。将DropDownList的名称属性必须，这将是该列表中属性的名称相匹配。在这种情况下， PAGEID 和 PageActionID 。这是code为我所定义的工作2 DDL：
＆LT;％@控制语言=VB继承=System.Web.Mvc.ViewUserControl％GT;＆LT;％Html.Telerik（）的DropDownList（）_。
。名称（PAGEID）_
.BindTo（新的SelectList（CTYPE（ViewData的（分页）的IEnumerable），ID，PageIDandName））_
.Render（）
％GT;＆LT;％@控制语言=VB继承=System.Web.Mvc.ViewUserControl％GT;＆LT;％Html.Telerik（）的DropDownList（）_。
。名称（PageActionID）_
.BindTo（新的SelectList（CTYPE（ViewData的（PageActionList），IEnumerable的），PageActionID，PageActionIDandAction））_
.Render（）
％GT;
这是正确的OnEdit方法实现？您粘贴两种不同的code片段：
函数onEdit（五）{
$（e.form）.find（'＃ProductCategoryName'）。数据（tDropDownList'）。选择（功能（DataItem的）{
返回dataItem.Text == e.dataItem ['ProductCategoryName'];
}）;
}
和
函数onEdit（五）{
$（e.form）.find（'＃分页'）。数据（tDropDownList'）。选择（功能（DataItem的）{
返回dataItem.Text == e.dataItem ['页面名称'];
}）;
}
第一个将无法工作，因为DropDownList的名称是分页而不是ProductCategoryName。 jQuery的返回空的结果，。数据（tDropDownList）将返回null。这就是为什么没有选择的方法。
在一个侧面说明，我们已经发布了一个新的code库项目，它可以帮助你实现电网的情况下拉。您可以检查它的这里。
更新：
我想我看到的问题是什么。你的DropDownList是从来没有输出，因为你使用的是＆LT;％％>块代替＆LT;％：％>或调用渲染（）;方法。请更改您的code这样的
＆LT;％Html.Telerik（）的DropDownList（）_。
。名称（分页）_
.BindTo（新的SelectList（CTYPE（ViewData的（分页）的IEnumerable），ID，页面名称））_
.Render（）
％GT;
或本
＆LT;％：Html.Telerik（）的DropDownList（）_
。名称（分页）_
.BindTo（新的SelectList（CTYPE（ViewData的（分页）的IEnumerable），ID，页面名称））
％GT;
I have a problem with the Telerik grid that I can't seem to find quite the exact problem anywhere. I'm following the demo from their site for Client Side Edit Templates. When going into edit mode it immediately dies saying select method is undefined from this js statement:
<script type="text/javascript">
function onEdit(e) {
$(e.form).find('#PageList').data('tDropDownList').select(function (dataItem) {
return dataItem.Text == e.dataItem['PageName'];
});
}
</script>
Here is my view:
<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl" %>
<%@ Import Namespace="Community_Portal_Admin" %>
<div class="gridFrame">
<% Html.Telerik().Grid(Of IndustryPageContent)() _
.Name("IndustryPageContent") _
.DataKeys(Function(k) k.Add(Function(d) d.ID)) _
.DataBinding(Function(db) db.Ajax() _
.Select("_GetPageContent", "Industry") _
.Update("_SetPageContent", "Industry")) _
.Columns(Function(c) c.Bound(Function(d) d.IndustryID)) _
.Columns(Function(c) c.Bound(Function(d) d.PageID)) _
.Columns(Function(c) c.Bound(Function(d) d.PageActionID)) _
.Columns(Function(c) c.Bound(Function(d) d.Content1)) _
.Columns(Function(c) c.Bound(Function(d) d.Content2)) _
.Columns(Function(c) c.Bound(Function(d) d.Content3)) _
.Columns(Function(c) c.Bound(Function(d) d.Content4)) _
.Columns(Function(c) c.Bound(Function(d) d.Content5)) _
.Columns(Function(c) c.Command(Function(d) d.Edit().ButtonType(GridButtonType.Image)).Width(60)) _
.Columns(Function(c) c.Bound(Function(d) d.ID).Hidden()) _
.ClientEvents(Function(e) e.OnEdit("onEdit")) _
.Editable(Function(c) c.Mode(GridEditMode.InForm).Enabled(True)) _
.Scrollable(Function(s) s.Height("350px")) _
.Pageable() _
.Selectable() _
.Render()
%>
<br />
<%: Html.ActionLink("Close", "Index", "Configuration", Nothing, New With {.class = "t-button", .Style = "font-size:12px;"})%>
</div>
<script type="text/javascript">
function onEdit(e) {
$(e.form).find('#PageList').data('tDropDownList').select(function (dataItem) {
return dataItem.Text == e.dataItem['PageName'];
});
}
</script>
Here is my controller action:
Function GetPageContent() As ActionResult
Try
ViewData("PageList") = SharedListDataRepository.PageList()
Return PartialView()
Catch ex As Exception
Throw
End Try
End Function
Here is my helper to load the list data:
Public Shared Function PageList() As IEnumerable(Of ApplicationPage)
Dim l As IEnumerable(Of ApplicationPage)
Try
l = (From d In New AdminIndustrySetupDataContext(TripleDESSecurity.Decrypt(SharedData.PortalCnx)).AdminApplicationPages Order By d.ID Select New ApplicationPage With {
.ID = d.ID,
.PageName = d.PageName
}).AsEnumerable
Return l
Catch ex As Exception
Throw
Finally
If Not l Is Nothing Then
l = Nothing
End If
End Try
End Function
Here is my model: as you can see it is decorated with the UIHint that is supposed to bring the control into the view but because the error is a js error on an "undefined" element that tells me that the list control never makes it onto the page. Which Firebug concurs with, it's just not there in the HTML
Imports System.ComponentModel.DataAnnotations
Imports System.Runtime.Serialization
<KnownType(GetType(IndustryPageContent))> _
Public Class IndustryPageContent
<ScaffoldColumn(False)> _
Public Property ID As Integer = 0
Public Property IndustryID As Integer = 0
<UIHint("PageList"), Required()> _
Public Property PageID As Integer = 0
Public Property PageActionID As Integer = 0
Public Property Content1 As String = String.Empty
Public Property Content2 As String = String.Empty
Public Property Content3 As String = String.Empty
Public Property Content4 As String = String.Empty
Public Property Content5 As String = String.Empty
Public Sub New()
MyBase.New()
End Sub
End Class
And lastly here is my list control:
<%@ Control Language="vb" Inherits="System.Web.Mvc.ViewUserControl" %>
<% Html.Telerik().DropDownList() _
.Name("PageList") _
.BindTo(New SelectList(CType(ViewData("PageList"), IEnumerable), "ID", "PageName"))
%>
So my guess is that the javascript for select method fails because the UIHint isn't binding the control right so the control isn't there to call the select method on.
What am I missing? Are there any successful implementations of the Telerik grid with Ajax binding - with editing, using VB.NET and aspx, not razor? Or am I the only one painted into a corner with the restrictions I have to work with?
I've had nothing but problems using the Telerik demos, they're consistently incomplete and/or using a contradiction of methods that support eventually says "Oh you can't do that when doing this. Really? So why is it in the demo??
EDIT
This is final code for my grid that got it working:
<% Html.Telerik().Grid(Of IndustryPageContent)() _
.Name("IndustryPageContent") _
.DataKeys(Function(k) k.Add(Function(d) d.ID)) _
.DataBinding(Function(db) db.Ajax() _
.Select("_GetPageContent", "Industry") _
.Update("_SetPageContent", "Industry")) _
.Columns(Function(c) c.Bound(Function(d) d.IndustryID)) _
.Columns(Function(c) c.Bound(Function(d) d.PageID)) _
.Columns(Function(c) c.Bound(Function(d) d.PageActionID)) _
.Columns(Function(c) c.Bound(Function(d) d.Content1)) _
.Columns(Function(c) c.Bound(Function(d) d.Content2)) _
.Columns(Function(c) c.Bound(Function(d) d.Content3)) _
.Columns(Function(c) c.Bound(Function(d) d.Content4)) _
.Columns(Function(c) c.Bound(Function(d) d.Content5)) _
.Columns(Function(c) c.Command(Function(d) d.Edit().ButtonType(GridButtonType.Image)).Width(60)) _
.Columns(Function(c) c.Bound(Function(d) d.ID).Hidden()) _
.Editable(Function(c) c.Mode(GridEditMode.InForm).Enabled(True)) _
.Scrollable(Function(s) s.Height("350px")) _
.Pageable() _
.Selectable() _
.Render()
%>
The ClientEvents line and the JS is not needed. The "Name" property of the dropdownlist must match the name of the property that it will be the list for. In this case, PageID and PageActionID. This is the code for 2 DDL that I have defined that work:
<%@ Control Language="vb" Inherits="System.Web.Mvc.ViewUserControl" %>
<% Html.Telerik().DropDownList() _
.Name("PageID") _
.BindTo(New SelectList(CType(ViewData("PageList"), IEnumerable), "ID", "PageIDandName")) _
.Render()
%>
<%@ Control Language="vb" Inherits="System.Web.Mvc.ViewUserControl" %>
<% Html.Telerik().DropDownList() _
.Name("PageActionID") _
.BindTo(New SelectList(CType(ViewData("PageActionList"), IEnumerable), "PageActionID", "PageActionIDandAction")) _
.Render()
%>
Which is the right OnEdit method implementation? You have pasted two different code snippets:
function onEdit(e) {
$(e.form).find('#ProductCategoryName').data('tDropDownList').select(function (dataItem) {
return dataItem.Text == e.dataItem['ProductCategoryName'];
});
}
and
function onEdit(e) {
$(e.form).find('#PageList').data('tDropDownList').select(function (dataItem) {
return dataItem.Text == e.dataItem['PageName'];
});
}
The first will not work because the dropdownlist's name is "PageList" not "ProductCategoryName". jQuery returns empty result and .data("tDropDownList") returns null. That's why there is no "select" method.
On a side note we have released a new code library project which may help you implement the dropdown in grid scenario. You can check it here.
UPDATE: I think I saw what the problem is. Your DropDownList is never output because you are using a <% %> block instead of <%: %> or calling the Render(); method. Please change your code like this
<% Html.Telerik().DropDownList() _
.Name("PageList") _
.BindTo(New SelectList(CType(ViewData("PageList"), IEnumerable), "ID", "PageName")) _
.Render()
%>
or this:
<%: Html.Telerik().DropDownList() _
.Name("PageList") _
.BindTo(New SelectList(CType(ViewData("PageList"), IEnumerable), "ID", "PageName"))
%>
这篇关于Telerik的格列MVC3未呈现的DropDownList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
