Question

我对Telerik网格有一个问题，我似乎无法在任何地方找到确切的问题。我正在他们的网站上关注客户端编辑模板的演示。当进入编辑模式时，它立刻就死了，说这个js语句中未定义select方法：

<script type="text/javascript">
    function onEdit(e) {
        $(e.form).find('#PageList').data('tDropDownList').select(function (dataItem) {
            return dataItem.Text == e.dataItem['PageName'];
        });
    }
</script>

以下是我的观点：

<%@ 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>

这是我的控制器动作：

Function GetPageContent() As ActionResult

    Try
        ViewData("PageList") = SharedListDataRepository.PageList()

        Return PartialView()

    Catch ex As Exception
        Throw
    End Try

End Function

这是加载列表数据的助手：

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

这是我的模型：你可以看到它用UIHint装饰，它应该将控件带入视图但是因为错误是“undefined”元素上的js错误告诉我列表控件永远不会进入页面。哪个Firebug同意，它只是在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

最后这是我的列表控件：

<%@ Control Language="vb" Inherits="System.Web.Mvc.ViewUserControl" %>

<% Html.Telerik().DropDownList() _
        .Name("PageList") _
        .BindTo(New SelectList(CType(ViewData("PageList"), IEnumerable), "ID", "PageName"))
%>

所以我的猜测是，select方法的javascript失败了，因为UIHint没有绑定控件权限，所以控件不在那里调用select方法。

我错过了什么？有没有使用Ajax绑定成功实现Telerik网格 - 使用VB.NET和aspx进行编辑，而不是razor？或者我是唯一一个被限制在角落里的人，我必须与之合作？

我使用Telerik演示时遇到了一些问题，它们一直都是不完整的和/或使用支持最终的方法的矛盾说：“哦，你这样做时不能这样做。真的吗？那为什么呢在演示中？

修改

这是我的网格的最终代码，使其正常工作：

 <% 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()
%>

不需要ClientEvents行和JS。下拉列表的“名称”属性必须与其列表所属的属性的名称匹配。在这种情况下，PageID和PageActionID。这是我定义的2 DDL的代码：

<%@ 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()
%>

Answer 1

我完全同意他们的演示。它们的定义不是很明确，但我不能抱怨太多;他们至少有一些文档，而且它是免费的产品。

你是对的：你的select（）失败了，因为UIHint由于某种原因没有得到你的编辑器，所以行：

$(e.form).find('#ProductCategoryName').data('tDropDownList').select(function...

找不到您的DDL。我从来没有得到UIHint来处理客户端绑定。这并不是说它不起作用;也许我只是个白痴。但请尝试使用ClientTemplate / EditorTemplate。它将是一个绑定列，看起来像：

.Columns(Function(c) c.Bound(Function(d) d.ProductCategory)).ClientTemplate("<#= ProductCategory ? ProdcutCategoryName : '' #>").EditorTemplateName("CategorySelector");

.select（）是在这里使用的错误函数。试试这个：

onEdit(e){
    $ddl = $(e.cell).find('#ProductCategoryName');
    if($ddl.length > 0) {
        var ddl = $ddl.data('tDropDownList');
        ddl.fill(function(){
            if (e.dataItem['ProductCategory'] != null){
                    ddl.value(e.dataItem['ProductCategory'].Id)
            }
        });
     }
 }

这将确保ddl确实存在，并确保实际定义了ProductCategory。 ddl.fill（）确保在绑定ddl时选择该项。 ddl.value（''）设置ddl的值，它选择你想要的项目。根据你的模型有多扁平，你可以实际清理一下;我通常让我的ViewModel对象走得很深。它在客户端增加了一点点复杂性，但我别无选择，只能尽可能少地访问服务器。

编辑：如果您因任何原因确实想使用UIHint，请仔细阅读this page?

Answer 2

哪个是正确的OnEdit方法实现？您已粘贴了两个不同的代码段：

function onEdit(e) {
  $(e.form).find('#ProductCategoryName').data('tDropDownList').select(function (dataItem) {
        return dataItem.Text == e.dataItem['ProductCategoryName'];
   });
}

和

function onEdit(e) {
   $(e.form).find('#PageList').data('tDropDownList').select(function (dataItem) {
        return dataItem.Text == e.dataItem['PageName'];
   });
}

第一个不起作用，因为下拉列表的名称是“PageList”而不是“ProductCategoryName”。 jQuery返回空结果，而.data（“tDropDownList”）返回null。这就是没有“选择”方法的原因。

另一方面，我们发布了一个新的代码库项目，可以帮助您实现网格方案中的下拉列表。您可以查看here。

更新：我想我看到了问题所在。您的DropDownList永远不会输出，因为您正在使用＆lt; %%＆gt;阻止而不是＆lt;％：％＆gt;或者调用Render（）;方法。请更改您的代码

<% Html.Telerik().DropDownList() _
        .Name("PageList") _
        .BindTo(New SelectList(CType(ViewData("PageList"), IEnumerable), "ID", "PageName")) _
        .Render()
%>

或者这个：

<%: Html.Telerik().DropDownList() _
        .Name("PageList") _
        .BindTo(New SelectList(CType(ViewData("PageList"), IEnumerable), "ID", "PageName"))
%>

Telerik网格不在列MVC3中呈现下拉列表

2 个答案: