Telerik網格不渲染列中的dropdownlist MVC3

Question

我有一個Telerik電網的問題，我似乎無法在任何地方找到確切的問題。我正在從他們的網站演示客戶端編輯模板。當進入編輯模式，它會立即模說select方法是從這個不確定的js語句：

<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，它應該將控件帶入視圖，但是因爲錯誤是一個「未定義」元素的js錯誤，它告訴我列表控件從不使其進入頁面。這螢火蟲在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")) 
%> 

所以我的猜測是，對於選擇方法的JavaScript將失敗，因爲UIHint ISN」 t綁定控件權限，因此控件不在那裏調用select方法。

我錯過了什麼？ Telerik網格是否有成功的Ajax綁定實現 - 使用VB.NET和aspx編輯，而不是剃鬚刀？或者，我是唯一一個在角落裏塗上了我必須與之合作的限制嗎？

我只有使用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「名稱」。 PROPERT下拉列表中的y必須與它將作爲列表的屬性的名稱匹配。在這種情況下，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

哪個是正確的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']; 
    }); 
} 

第一個將無法工作，因爲下拉列表的名稱是「分頁」而不是「ProductCategoryName」。 jQuery返回空結果並且.data（「tDropDownList」）返回null。這就是爲什麼沒有「選擇」方法。

在旁註中，我們發佈了一個新的代碼庫項目，可以幫助您實現網格場景中的下拉菜單。你可以檢查它here。

更新： 我想我看到了什麼問題。 DropDownList從來沒有輸出，因爲您正在使用<％>塊而不是<％：％>或調用Render（）;方法。請更改您這樣的代碼

​​

或本：

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

Answer 2

我完全同意他們的演示。他們沒有很好的定義，但我不能抱怨太多;他們至少有一些文件，而且是免費的產品。

你是正確的：你的選擇（）失敗，因爲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?