редактирование позиционирования всплывающего окна для telerik mvc grid - PullRequest
Новая
       30

редактирование позиционирования всплывающего окна для telerik mvc grid

2 голосов
/ 01 декабря 2010

Может кто-нибудь сказать мне, если есть способ разместить всплывающее окно редактирования формы для сетки MVC, чтобы выровнять по центру экрана?

Ответы [ 5 ]

3 голосов
/ 14 января 2011

Мой друг нашел самый простой способ сделать это, используя одну из неэкспонированных встроенных функций Telerik Grid 

        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 сетки, и вы увидите магию

3 голосов
/ 24 декабря 2010

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

Однако я манипулировал позицией с jquery на стороне клиента on_edit 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 дает имя сетки.

0 голосов
/ 08 мая 2013 
@(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() });
}
0 голосов
/ 09 декабря 2010

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

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

0 голосов
/ 02 декабря 2010

Не уверен, что это можно сделать автоматически с помощью опции конфигурации - теперь на живых демонстрациях всплывающее окно центрируется в сетке.Мое дикое предположение, что вы можете расположить его в центре экрана с помощью JavaScript ...

...