포지셔닝 편집 - 양식 telerik mvc 그리드 용 팝업

Question

mvc 그리드의 편집 팝업 팝업을 화면 중앙에 정렬하는 방법이 있는지 알려 줄 수 있습니까?

Answer 1

내 친구가 telerik 격자

 var popup = $("#" + e.currentTarget.id + "PopUp"); 
     //get the data window contained by the popup 
     var popupDataWin = popup.data("tWindow"); 

     //change popup title by calling the title 
     popupDataWin.title("Custom Title");    
     //center the window by calling the method center 
     popupDataWin.center(); 

넣어 그리드의 클라이언트 측 on_edit API의 코드이 조각의 노출되지 않은 붙박이 기능 중 하나를 사용하여 수행하는 가장 쉬운 방법을 발견하고 마법을 볼 수

Answer 2

구성 옵션을 사용하여 자동으로 수행 할 수 있는지 여부는 확실하지 않습니다. 이제 실시간 데모에서 팝업이 그리드의 중앙에 오게됩니다. 내 야생 추측은 자바 스크립트로 화면의 중앙에 배치 할 수 있다는 것입니다 ...

Answer 3

별도로 정의 된 Telerik Mvc 창을 사용하여 사용자 지정 팝업을 사용하기 전에이 작업을 수행했습니다. 내 샘플 코드는 다음과 같습니다.

<%= Html.Telerik().Window() 
    .Name("CompanyWindow") 
    .Title("Company Details") 
    .Buttons(b => b.Maximize().Close()) 
    .Visible(false) 
    .Modal(true) 
    .Width(600) 
    .Height(600) 
    .Draggable(true) 
    .Resizable() 
%> 

<% Html.Telerik().Grid<Vigilaris.Booking.Services.CompanySummaryDTO>() 
    .Name("CompaniesGrid") 
    .ToolBar(tb => tb.Template(() => { %> 
     <a href ="#" onclick="createCompany()" >Insert</a> 
     <% })) 
    .Columns(col => 
     { 
      col.Bound(c => c.Id).Width(20); 
      col.Bound(c => c.CompanyName).Width(120); 
      col.Bound(c => c.ResponsiblePersonFullName).Width(160); 
      col.Bound(c => c.ResponsiblePersonUserName).Width(160); 
      col.Bound(c => c.ResponsiblePersonEmail).Width(160); 
      col.Command(cmd => 
       { 
        cmd.Edit().ButtonType(GridButtonType.Image); 
       }).Title("Edit"); 
     }) 
    .DataKeys(keys => keys.Add(c => c.Id)) 
    .DataBinding(binding => binding.Ajax() 
     .Select("_IndexAjax", "Company") 
     .Insert("_InsertAjax", "Company") 
     .Update("_UpdateAjax", "Company") 
    ) 
    .Sortable() 
    .Render(); 
%> 

<script type="text/javascript"> 
    function createCompany() { 
     var url = '<%= Url.Action("New", "Company") %>' 
     $.post(url, function (data) { 
      var window = $('#CompanyWindow').data('tWindow'); 
      window.content(data); 
      window.center().open(); 
     }); 
    } 
</script> 

createCompany 함수에서 window.center(). open()을 호출합니다. 이것은 명시 적으로 팝업을 집중시킵니다.

그러나 나는 이것이 당신이 원하는 것과 정확히 같지 않다고 생각하지만 올바른 방향으로 어떤 조언을 줄 수 있습니다. 나는 그것이 도움이되기를 바랍니다.

Answer 4

유효한 답변을 주셔서 감사합니다. 커스텀 팝업 윈도우를 배치 할 수는 있지만 편집 모드 윈도우에 내장 된 것은 아닙니다. 나는 클라이언트 측에서 jQuery로 위치 를 조작 그러나

는 telerik 그리드의 API를 on_edit.

var popup = $("#" + e.currentTarget.id + "PopUp"); 

popup.css({ "left": ($(window).width()/2 - $(popup).width()/2) + "px", "top": ($(window).height()/2 - $(popup).height()/2) + "px" }); 

는 e.currentTarget.id는 gridname을 제공합니다.

Answer 5

@(Html.Telerik().Grid() 
.Name("FormFildGrid") 
.ClientEvents(events => events.OnEdit("Grid_onEdit")) 

)

가

function Grid_onEdit(e) { 
    var popup = $("#" + e.currentTarget.id + "PopUp"); 
    var popupDataWin = popup.data("tWindow"); 
    var l = ($(window).width()/2 - $(popup).width()/2); 
    popup.css({ "left": l + "px", "margin-left": "0", "width": $(popup).width() }); 
} 

가