positionnement edit-form Popup pour telerik mvc grid

Question

Quelqu'un peut-il me dire s'il existe un moyen de positionner le popup d'édition pour une grille mvc à aligner avec le centre de l'écran?

Answer 1

Mon ami a trouvé la meilleure façon de faire en utilisant l'une de la fonction intégrée non exposée du réseau 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(); 

de mettre ce morceau de code côté client on_edit api de la grille et vous verrez la magie

Answer 2

Vous ne savez pas si cela peut être fait automatiquement avec l'option de configuration - maintenant, sur les démos en direct, la fenêtre contextuelle est centrée dans la grille. Ma conjecture sauvage est que vous pouvez le positionner au centre de l'écran avec javascript ...

Answer 3

Je l'ai fait avant d'utiliser un popup personnalisé en utilisant une fenêtre Telerik Mvc définie séparément. Mon code d'échantillon ressemblait à ceci:.

<%= 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> 

Vous remarquerez dans la fonction createCompany que j'appelle window.center() open(). Ceci centre explicitement le popup. Cependant, je ne pense pas que ce soit exactement ce que vous voulez faire, mais cela peut vous donner des indications dans la bonne direction. J'espère que ça aide.

Answer 4

merci les gars pour les réponses valides. Je sais que nous pouvons positionner une fenêtre contextuelle personnalisée, mais pas pour les fenêtres intégrées en mode édition.

Cependant, je manoeuvré la position avec jquery sur le côté client on_edit API de réseau 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 donne la 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() }); 
}