I am looking for a way to use both "In-Cell" and "Popup" to edit Kendo Grid
I would like the Popup edit to happen when a new record is added, and for InCell any other edit. I have seen examples of how to do this using Popup and InLine, but have not seen solutions on how to achieve what I am trying to do. My Kendo Grid is in the Kendo popup window and I can open the Popup editor, but only for a quick second before the parent popup is called. I read that this is caused because the child popup is updating the parent popup. My thought process was to call Kendo read () as the onClose event of the child window in order to update the parent window. I would appreciate any help or anyone could point me in the right direction.Here is my grid in the parent dropdown.
@(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))
)
)
Here is my javascript function:
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();
}
I've seen this with "Popup" and "InLine". Not sure why all the difficulties with this alternative combination. If there is any way to disable all listeners in the parent popup, maybe I can manage to allow the user to populate a new record and then call read () afterwards ....
source to share
Finally, I applied for Telerik support and the answer was ...
"The grid can only use one of the built-in editing modes, and enabling them on the fly is not supported unless you use setOptions (), which is not an option in this case as it recreates the Grid at the wrong time."
and the only way to achieve what I was trying is ...
"Take the Grid to use two editing modes at the same time. I'll show you how to do this, but keep in mind that we are not claiming that this will work in all scenarios or future versions of the Kendo interface, but you can use this approach on your own risk ".
Then I was asked the following algorithm ...
- set editable mode to "inline"
- use the custom toolbar button for the Add New Entry command - you already have one.
- a custom button will open a general Kendo UI window with a custom edit form inside.
- when the form is submitted, use the Data Grid API to add / insert a new dataItem
- execute Grid saveChanges method
I tried something similar, but gave up implementing this feature in my situation due to future updates conflicting with my work. Hope this helps someone who might find themselves in the same situation.
source to share