定位編輯窗體彈出的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

不確定是否可以使用配置選項自動完成 - 現在在現場演示彈出窗口在網格中居中。我瘋狂的猜測是，你可以將它放在屏幕的中心與JavaScript ...

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 on_edit Telerik的網格的 API。

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() }); 
}