positioning edit-form Popup для telerik mvc grid

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 апи сетки, и вы увидите волшебство

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() открыт(). Это явно центрирует всплывающее окно.

Однако я не думаю, что это именно то, что вы хотите сделать, но это может дать вам несколько указателей в правильном направлении. Я надеюсь, что это помогает.

Answer 4

благодарит парней за действительные ответы. Я знаю, что мы можем позиционировать пользовательское всплывающее окно, но не для встроенных окон режима редактирования.

Однако я манипулировал позицию с JQuery на стороне клиента on_edit API из Telerik сетки.

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