Je cherche un moyen d'utiliser les deux « Incell » et « Popup » pour une édition Kendo Grille

Question

Je voudrais que l'édition de se produire lorsqu'un nouvel enregistrement « Popup » est ajoutée et pour le « Incell » à être pour tout autre montage. J'ai vu des exemples sur ici des moyens d'y parvenir avec « Popup » et « inline », mais ne l'ai pas vu de solutions de la façon d'atteindre ce que je suis en train de faire. Mon Kendo Grille est situé dans une fenêtre et Kendo Popup je peux obtenir l'éditeur « Popup » pour ouvrir mais seulement pour une deuxième rapide avant la fenêtre parent est appelé. J'ai lu que cela est appelé parce que la fenêtre contextuelle enfant met à jour la fenêtre contextuelle parent. Mon processus de pensée consistait à appeler le Kendo read() comme un événement onClose de la fenêtre enfant pour mettre à jour la fenêtre parente. J'apprécierais n'importe quelle aide ou si n'importe qui pourrait me diriger dans la bonne direction. Voici ma grille dans la fenêtre contextuelle parent.

 @(Html.Kendo().Grid<DAX.Models.CsvSubmittal>() 
      .Name("CsvGrid") 
      .HtmlAttributes(new { style = "height:800px; margin-top:-90px" }) 
      .Columns(column => 
      { 
       column.Bound(p => p.CsvSubmittalID).Hidden(); 
       column.Bound(p => p.SpecSection).Title("Spec Section").Width(100).Format("{0:000000}"); 
       column.Bound(p => p.SpecTitle).Title("Spec Title").Width(150); 
       column.Bound(p => p.SubmittalDescription).Title("Submittal Description").Width(200); 
       column.Bound(p => p.Subcontractor).Title("Subcontractor").Width(150); 

       column.Bound(p => p.SubmissionDueDate).Title("Due Date").Width(100) 
        .ClientTemplate("#= SubmissionDueDateTemplate(SubmissionDueDate) #"); 

       column.Bound(p => p.ReviewCompleteDate).Title("Complete Date").Width(100) 
        .ClientTemplate("#= ReviewDateTemplate(ReviewCompleteDate) #").Format("{0:MM/dd/yyyy}"); 

       column 
        .Template(@<text></text>).Width(90) 

        .ClientTemplate("<div style='text-align:center; cursor:pointer '><a class=ActionbuttonDelete onclick=\"MyDeleteTemplate('#=CsvSubmittalID#')\">[Delete]</a></div>"); 
      }) 

       .Reorderable(reorder => reorder.Columns(false)) 
       .Resizable(resize => resize.Columns(true)) 
       .Scrollable(scrolling => scrolling.Enabled(true)) 
       .Navigatable() 
       .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom)) 
        .ToolBar(toolbar => 
        { 
         toolbar.Custom().Text("Add New Record").Name("popup").HtmlAttributes(new { style = "font-size: 0.95em", id="popup" })/*.Url(Url.Action("CreateRow", "Project", new { projID = Model.ProjectID }))*/; 
         toolbar.Save(); 
        }) 

      .DataSource(datasource => datasource 
           .Ajax() 
           .ServerOperation(false) 

           //.Create(create => create.Action("CreateCsvRow", "Project", new { id = @Model.ProjectID })) 

           .Read(read => read.Action("GetCsvFileData", "Project", new { projectID = @Model.ProjectID }).Type(HttpVerbs.Get)) 
           .Update(update => update.Action("UpdateCsvFileData", "Project", new { csvSubmittalID = @Model.CsvSubmittalID })) 
           //.Destroy(destroy => destroy.Action("DeleteCsvRow", "Project", new { csvSubmittalID = @Model.CsvSubmittalID })) 
           .Model(model => model.Id(p => p.CsvSubmittalID)) 

           ) 
) 

Voici ma fonction javascript:

var myGrid = $('#CsvGrid').data('kendoGrid').dataSource; 

$("#popup").on("click", function() { 

    var grid = $("#CsvGrid").data("kendoGrid"); 

    $(".k-grid-popup", grid.element).on("click", function() { 
     debugger; 
     grid.options.editable = "popup"; 
     grid.addRow(); 
     grid.options.editable = "incell"; 
    }); 
}); 


function onClose(e) 
{ 
    myGrid.read(); 
} 

J'ai vu cela accompli avec "Popup" et "inline". Je ne sais pas pourquoi toute la difficulté avec cette combinaison alternative. S'il y a un moyen de désactiver tous les écouteurs sur le Popup parent alors peut-être je pourrais réussir à permettre à l'utilisateur de remplir le nouvel enregistrement et ensuite appeler le read() après ...

Answer 1

J'ai finalement soumis un ticket de support avec Telerik et la réponse était ...

"La grille ne peut utiliser qu'un seul de ses modes d'édition intégrés et les changer à la volée n'est pas supporté, sauf si vous utilisez setOptions(), ce qui n'est pas vraiment une option dans ce cas, car il va recréer la grille à un moment inapproprié. "

et la seule façon d'obtenir ce que je tentais était de ....

« Hack de la grille d'utiliser deux modes d'édition en même temps. Je vais vous montrer comment le faire, mais gardez à l'esprit que nous ne prétendons pas que cela fonctionnera dans tous les scénarios ou par les futures versions UI Kendo, et vous pouvez utiliser cette approche à vos propres risques « .

On m'a ensuite donné l'algorithme suivant ...

• régler le mode éditable à « en ligne »
• utiliser un bouton de barre d'outils personnalisée pour la commande « Ajouter un nouveau record » - vous l'avez déjà.
• le bouton personnalisé ouvrira une fenêtre générique interface utilisateur Kendo avec une forme d'édition personnalisée à l'intérieur.
• lorsque le formulaire est soumis, utilisez l'API Grille dataSource pour ajouter/insérer la nouvelle DataItem
• exécuter la méthode SaveChanges de la grille

J'ai essayé quelque chose de similaire, mais ont choisi de ne pas mettre en œuvre cette fonctionnalité dans mon situation en raison de mises à jour futures en conflit avec mon travail autour. Espérons que cela aidera quelqu'un qui pourrait se retrouver dans la même situation.