Telerik 그리드에서 MVC3 열의 드롭 다운 목록을 렌더링하지 않습니다.

Question

어디서나 정확한 문제를 발견 할 수없는 Telerik 그리드에 문제가 있습니다. 나는 클라이언트 사이드 편집 템플릿을위한 그들의 사이트에서 데모를 따라 가고있다. 편집 모드로 전환하면 즉시 select 방법이에서 정의되지 말 다이 것은 문 JS :

Function GetPageContent() As ActionResult 

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

     Return PartialView() 

    Catch ex As Exception 
     Throw 
    End Try 

End Function 

: 여기

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

내 컨트롤러 액션입니다 : 여기

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

내이다 다음은 목록 데이터를로드하는 도우미입니다.

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 

여기 내 모델입니다 : 당신이 볼 수 있듯이, 뷰에 컨트롤을 가져 오려고하지만 에러는 "정의되지 않은"엘리먼트에 js 에러가 있기 때문에 UIHint으로 장식되어 있습니다. 그것을 페이지에 표시합니다. 어떤 방화범이 끌려는 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")) 
%> 

그래서 내 생각 엔이 선택 방법에 대한 자바 스크립트 오류가 발생되는 것을

UIHint ISN '때문에 컨트롤을 바인딩하여 컨트롤이 select 메서드를 호출하지 못하게합니다.

무엇이 누락 되었습니까? 면도기가 아닌 VB.NET과 aspx를 사용하여 Ajax 바인딩이 포함 된 Telerik 그리드를 성공적으로 구현 했습니까? 아니면 내가 작업해야하는 제한 사항이있는 구석에 페인트 칠 된 유일한 사람입니까?

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는 "이름"필요하지 않습니다. 재산 드롭 다운 목록의 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

을 읽었다면?

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으로 확인할 수 있습니다.

업데이트 : 문제가 무엇인지 알 것 같습니다. < % : %> 대신 < %%> 블록을 사용 중이거나 Render()를 호출했기 때문에 DropDownList가 출력되지 않습니다. 방법. 이

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

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를 사용하려면 오른쪽은 onEdit 메소드 구현은 this page?