我正在尋找一種方法來同時使用Kendo Grid的「In-Cell」和「Popup」編輯

我想要在添加新記錄時發生「Popup」編輯，併爲「InCell」適用於所有其他編輯。我在這裏看到了使用「Popup」和「InLine」來實現這個目標的例子，但是沒有看到如何實現我想要做的事情的任何解決方案。我的Kendo網格位於Kendo彈出窗口中，我可以在打開父窗口彈出窗口之前打開「彈出窗口」編輯器，但只需要很短的時間。我讀過這個被調用，因爲子彈出窗口正在更新父彈出窗口。我的思考過程是將Kendo read（）作爲子窗口的onClose事件來更新父窗口。如果有人能指出我的方向，我將不勝感激。這是我在父彈出窗口中的網格。我正在尋找一種方法來同時使用Kendo Grid的「In-Cell」和「Popup」編輯

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

           ) 
)

這裏是我的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(); 
}

我已經看到了這個成就與「彈出」和「內聯」。不知道爲什麼這個替代組合的所有困難。如果有什麼辦法可以禁用父Popup上的所有監聽器，那麼也許我可以成功地允許用戶填寫新記錄，然後再調用read（）...

來源

2015-07-20 MattParra

我終於提交了支持票與Telerik和響應是...

「網格只能使用其內置編輯模式之一，並不支持動態切換它們，除非你使用setOptions（），這不是一個真正的選擇在這種情況下，它會在不適當的時候重新創建Grid。「

，並達到我正嘗試的唯一辦法是....

「黑客網格同時使用兩種編輯模式，我會告訴你如何做到這一點，但要請注意，我們不會聲稱這將適用於所有場景或未來的Kendo UI版本，並且您可能會使用此方法，風險自負。「

然後我得到了下面的算法...

設置的編輯模式，以「內聯」
使用自定義工具欄按鈕「添加新記錄」命令 - 你已經擁有它。
自定義按鈕將打開一個通用的Kendo UI窗口，裏面有一個自定義編輯窗體。
表單提交時，使用Grid數據源API添加/插入新的DataItem
執行Grid的SaveChanges方法

我曾嘗試類似的東西，但都選擇了實現這一功能的我由於未來更新的情況與我的工作相沖突。希望這可以幫助那些可能會遇到同樣情況的人。

來源

2015-07-23 12:41:10 MattParra

我正在尋找一種方法來同時使用Kendo Grid的「In-Cell」和「Popup」編輯

回答

相關問題