位置編集フォームtelerik mvcグリッドのポップアップ

Question

mvcグリッドの編集フォームポップアップを画面の中央に揃える方法がある場合は誰にでも教えていただけますか？

Answer 1

私の友人は、グリッドのクライアント側on_edit APIのコードのこの部分を入れて、あなたは魔法が表示されますtelerikグリッドの未露光作り付けの機能の1

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

を使用して行うための最も簡単な方法を見つけました

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> 

あなたは、私がwindow.center（）を呼び出しcreateCompany機能に気づくでしょう開きました（）。これは明示的にポップアップを中央に配置します。

しかし、私はこれがまさにあなたがしたいことだとは思わないが、正しい方向にいくつかの指針を与えるかもしれない。私はそれが助けて欲しい

Answer 4

有効な回答をいただきありがとうございます。カスタムポップアップウィンドウを配置することはできますが、編集モードウィンドウは組み込まれていないことがわかります。私はtelerikグリッドの API on_editクライアント側でjQueryを使って位置 を操作するしかし

。

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