Telerik Grid의 팝업 편집기에서 ASCX 템플릿을 사용하여 Raw HTML을 표시 할 수 없습니다.

Question

Telerik MVC3 grid with custom Edit/Insert popup에서 보았는데 거의 보았습니다. 그러나 Grid에서 각 행에 대해 Controller에 의해 생성 된 HTML 텍스트를 표시하는 방법을 알아 내려고 노력하고 있습니다. 그러나 팝업 편집기에서! (I 쉽게 간단하게 내 열 정의에 거짓 .Encoded()를 추가하여 그리드 열에 표시 할 수 있습니다.)

<%= Html.Telerik().Grid<ViewModelProcurementAction>(Model.ProcurementActions) // 
     .Name("ProcurementActionGrid") 
     .Columns(c => 
      { 
       c.Command(commands => 
        { 
         commands.Edit().ButtonType(GridButtonType.ImageAndText); 
         commands.Delete().ButtonType(GridButtonType.ImageAndText); 
         commands.Custom("showHistory") 
           .ButtonType(GridButtonType.ImageAndText) 
           .Text("History") 
           .Action("Show", "ProcurementActions") 
           .DataRouteValues(route => { route.Add(o => o.Id).RouteKey("id"); }); 
        }).Title("Actions").Width(100); 
       c.Bound(e => e.Id).Visible(false); 
       c.Bound(e => e.ActionId).Visible(false); 
       c.Bound(e => e.ContractNumber).HtmlAttributes(new {style = "vertical-align: top"}); 
       c.Bound(e => e.ContractManager).Width(120).HtmlAttributes(new {style = "vertical-align: top"}); 
       c.Bound(e => e.ActualCAResponsible).Width(150).HtmlAttributes(new {style = "vertical-align: top"}); 
       c.Bound(e => e.TitleOfRequirement).HtmlAttributes(new {style = "vertical-align: top"}); 
       c.Bound(e => e.CipOrName).Title("Project Id").HtmlAttributes(new {style = "vertical-align: top"}); 
       c.Bound(e => e.RecordTypeName).Title("Record Type").HtmlAttributes(new {style = "vertical-align: top"}); 
       c.Bound(e => e.ContractTypeName).Title("Contract Type").HtmlAttributes(new { style = "vertical-align: top" }); 
       c.Bound(e => e.ProcurementActionYearDisplayName).Title("Plan FY").HtmlAttributes(new { style = "vertical-align: top" }); 
      }) 
     .DataKeys(keys => keys.Add(o => o.Id)) 
     .DataBinding(dataBinding => 
        dataBinding.Ajax() 
         .OperationMode(GridOperationMode.Client) 
         .Select("AjaxGetAll", "ProcurementActions") 
         .Update("AjaxUpdate", "ProcurementActions") 
         .Delete("AjaxDelete", "ProcurementActions") 
         .Enabled(true) 
     ) 
     .Editable(editing => 
      editing.Mode(GridEditMode.PopUp) 
        .TemplateName("EditProcurementAction") 
      ) 
     .Pageable(paging => paging.PageSize(15)) 
     .Scrollable(scrolling => scrolling.Height(500)) 
     .Filterable() 
     .Sortable() 
%>  

나는 팝업 Editor에 대한 ASCX 템플릿을 가지고있다.

그리드를 채우기 전에 각 필수 필드에 대해 각 행을 스캔하고주의가 필요한 모든 데이터 포인트에 대한 메시지를 삽입해야합니다. 몇 가지 조건부 로직을 고려해야하므로 컨트롤러에서이 작업을 수행합니다. 일단 메시지 < 문자열>을 가지고리스트 < 문자열을 반복하고 간단한 4 열 HTML 테이블을 생성하고이를 내 ViewModel의 일부로 행에 문자열로 저장하십시오. (Model.RowList은 [X] .UpdateMessage)를 HTML 문자열은 다음과 같습니다 TextAreaFor 상자가에 HTML을 표시, 분명히

<fieldset style="width: 1085px"> 
    <legend>Procurement Action</legend> 
    <%= Html.HiddenFor(c => c.Id) %> <=== WORKS === 
    <%= MvcHtmlString.Create(Model.UpdateMessage) %> <=== DOES NOT WORK === 
    <%= Model.UpdateMessage.ToMvcHtmlString() %> <=== DOES NOT WORK === 
    <%= Model.UpdateMessage %> <=== DOES NOT WORK === 
    <%= Html.TextAreaFor(c => c.UpdateMessage) %> <=== WORKS === 

• :

  Model.UpdateMessage = " 
  <table> 
      <tr> 
       <td colspan='4'>The following fields require additional data:</td> 
      </tr> 
      <tr> 
       <td>Award Amount</td> 
       <td>Comments</td> 
       <td>Contract Number</td> 
       <td>Number of Option Years</td> 
      </tr> 
      <tr> 
       <td>Planned CA Responsible</td> 
       <td>Actual CA Responsible</td> 
       <td>Cost Price Analysis Date</td> 
       <td>&nbsp;</td> 
      </tr> 
  </table>"; 
  

  내 팝업 템플릿은 기본적으로 시작합니다 추악하고 내가 원한/원하지 않는 것.

• 문자열을 MvcHtmlString로 변환하려고 시도하는 모든 버전이 테이블을 렌더링하지 않습니다! < Grrrrr! />
• 이것은 정말 간단해야합니다!

어떤 아이디어 ???

TIA

-kb는

Answer 1

이 그 Telerik 그리드는 부하를 보인다 빈/기본 모델, 팝업 편집기 템플릿을 한 번 렌더링합니다. 이후의 팝업 "편집"명령마다 그리드가 이라는 자체 바인딩 (클라이언트 측)을 편집기 템플릿에있는 양식 필드으로 나타납니다. 이는 TextArea 및 숨겨진 필드가 작동하지만 인라인 HTML을 포함하지 않는 이유를 설명합니다.

이 문제를 해결하려면 OnEdit에 Telerik 클라이언트 (JavaScript) 이벤트를 선언하고 해당 JavaScript 이벤트 처리기를 사용하여 DIV 또는 다른 컨테이너의 내용을 동적으로 채우는 것이 유일한 방법이라고 생각합니다.

그리드 뷰의 선언에 :보기에서 <script> 블록에서

.ClientEvents(e => e.OnEdit("ProcurementActionGrid_onEdit") 

또는 포함의 .js 파일 :

function ProcurementActionGrid_onEdit(e) { 
    var targetDiv = $(e.form).find('.injectUpdateMsgHtmlHere'); 
    targetDiv.html(e.dataItem.UpdateMessage); 
} 

(참고 : 위의 내용은 jQuery 단축키를 사용하여 표시되지만 원하는 경우 jQuery없이 수행 할 수 있습니다.

마지막으로ASCX의 EditorTemplate는 :

<div class="injectUpdateMsgHtmlHere"></div>