8 Answers, 1 is accepted
To automatically sync any changes in the Grid, set the autoSync configuration of the DataSource to true.
For example, check this Dojo: http://dojo.telerik.com/AcEHu
Furthermore, syncing the changes will rebind the Grid thus, the current focus will be lost. To overcome this problem, I would suggest checking the approach outlined in this How To article:
I hope the above helps. Do not hesitate to write back if I can assist you with any further information.
Regards,
Preslav
Progress Telerik
Hi Preslav,
Thanks for the update, however, I know how to configure auto-sync. My question was more specific in that I wanted to auto-sync when leaving the row and not the cell.
Regards,
Tim
Thank you for elaborating on the scenario and please excuse me for misunderstanding the first post.
To achieve the desired functionality, I will suggest:
- Removing the autoSync configuration.
- Handle the edit event of the Grid.
- Get the index of the row.
- Based on the row index, manually invoke the sync method of the data source.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-sync
For example, I used and modified the code from the article from my last reply, now it looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
/>
<title>Kendo UI Snippet</title>
<link rel=
"stylesheet"
href=
"https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css"
/>
<link rel=
"stylesheet"
href=
"https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css"
/>
<link rel=
"stylesheet"
href=
"https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.silver.min.css"
/>
<link rel=
"stylesheet"
href=
"https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css"
/>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js"
></script>
<script src=
"https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"
></script>
</head>
<body>
<div id=
"grid"
></div>
<script>
$(
function
() {
var
crudServiceBaseUrl =
"//demos.telerik.com/kendo-ui/service"
,
dataSource =
new
kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl +
"/Products"
,
dataType:
"jsonp"
},
update: {
url: crudServiceBaseUrl +
"/Products/Update"
,
dataType:
"jsonp"
},
destroy: {
url: crudServiceBaseUrl +
"/Products/Destroy"
,
dataType:
"jsonp"
},
create: {
url: crudServiceBaseUrl +
"/Products/Create"
,
dataType:
"jsonp"
},
parameterMap:
function
(options, operation) {
if
(operation !==
"read"
&& options.models) {
return
{models: kendo.stringify(options.models)};
}
}
},
batch:
true
,
autoSync:
false
,
pageSize: 5,
schema: {
model: {
id:
"ProductID"
,
fields: {
ProductID: { editable:
false
, nullable:
true
},
ProductName: { validation: { required:
true
} },
UnitPrice: { type:
"number"
, validation: { required:
true
, min: 1} },
Discontinued: { type:
"boolean"
},
UnitsInStock: { type:
"number"
, validation: { min: 0, required:
true
} }
}
}
}
});
var
rowIndex =
null
;
var
cellIndex =
null
;
var
saveButtonClicked =
false
;
var
editCell =
false
;
$(
"#grid"
).kendoGrid({
dataSource: dataSource,
navigatable:
true
,
pageable:
true
,
height: 300,
toolbar: [
"create"
,
"save"
,
"cancel"
],
columns: [
"ProductName"
,
{ field:
"UnitPrice"
, title:
"Unit Price"
, format:
"{0:c}"
, width: 120 },
{ field:
"UnitsInStock"
, title:
"Units In Stock"
, width: 120 },
{ field:
"Discontinued"
, width: 120 },
{ command:
"destroy"
, title:
" "
, width: 150 }],
editable:
true
,
saveChanges:
function
(e) {
saveButtonClicked =
true
;
},
dataBinding:
function
(e) {
var
current = e.sender.current() || [];
if
(current[0]) {
cellIndex = current.index();
rowIndex = current.parent().index();
}
},
edit:
function
(e){
var
index = e.sender.current().parent().index();
if
(rowIndex ===
null
){
rowIndex = index;
}
else
{
if
(rowIndex != index){
rowIndex =
null
;
editCell =
true
;
e.sender.dataSource.sync();
}
}
},
dataBound:
function
(e) {
if
(!isNaN(cellIndex)) {
e.sender.current(e.sender.tbody.children().eq(rowIndex).children().eq(cellIndex));
rowIndex = cellIndex =
null
;
// The code below is needed only when the user clicks on the "Save Changes" button.
// Otherwise, focusing the table explicitly and unconditionally can steal the page focus.
if
(saveButtonClicked) {
e.sender.table.focus();
saveButtonClicked =
false
;
}
if
(editCell){
editCell =
false
;
e.sender.editCell(e.sender.current());
}
}
}
});
});
</script>
</body>
</html>
For a runnable example, check this Dojo: https://dojo.telerik.com/AcAQi
I hope this helps.
Regards,
Preslav
Progress Telerik
Hi Preslav,
Superb, it works very well, thank you :)
Regards,
Tim
Hi Preslav,
Superb, it works very well, thank you.
Regards,
Tim
Hi Preslav,
It appears I was a little hasty in my response as I now get some string effects - every time I click in a cell (this cell has a DropDownList) then click another row the grid performs the sync but it also refocuses back to row 1 even though I've applied all the changes you demonstrated.
I am using MVC, would this make any difference?
Could you provide an MVC example?
Regards,
Tim
Using the MVC wrappers should not make any difference. I was not able to replicate the problem with DropDownList editor in an MVC Grid.
For a base, I used the "Grid / Editing custom editor" demo:
Now, the code in the "editing_custom.cshtml" page looks like:
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name(
"grid"
)
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
columns.Bound(p => p.Category).ClientTemplate(
"#=Category.CategoryName#"
).Width(180);
columns.Bound(p => p.UnitPrice).Width(130);
columns.Command(command => command.Destroy()).Width(150);
})
.ToolBar(toolBar =>
{
toolBar.Create();
toolBar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Events(e=> {
e.SaveChanges(
"saveChanges"
);
e.DataBinding(
"dataBinding"
);
e.Edit(
"edit"
);
e.DataBound(
"dataBound"
);
})
.Pageable()
.Sortable()
.Navigatable()
.Scrollable()
.HtmlAttributes(
new
{ style =
"height:550px;"
})
.DataSource(dataSource => dataSource
.Ajax()
.Batch(
true
)
.ServerOperation(
false
)
.Events(events => events.Error(
"error_handler"
))
.Model(model =>
{
model.Id(p => p.ProductID);
model.Field(p => p.ProductID).Editable(
false
);
model.Field(p => p.Category).DefaultValue(
ViewData[
"defaultCategory"
]
as
Kendo.Mvc.Examples.Models.CategoryViewModel);
})
.PageSize(20)
.Read(read => read.Action(
"EditingCustom_Read"
,
"Grid"
))
.Create(create => create.Action(
"EditingCustom_Create"
,
"Grid"
))
.Update(update => update.Action(
"EditingCustom_Update"
,
"Grid"
))
.Destroy(destroy => destroy.Action(
"EditingCustom_Destroy"
,
"Grid"
))
)
)
<script type=
"text/javascript"
>
var rowIndex =
null
;
var cellIndex =
null
;
var saveButtonClicked =
false
;
var editCell =
false
;
function error_handler(e) {
if
(e.errors) {
var message =
"Errors:\n"
;
$.each(e.errors, function (key, value) {
if
(
'errors'
in
value) {
$.each(value.errors, function() {
message +=
this
+
"\n"
;
});
}
});
alert(message);
}
}
function saveChanges(e) {
saveButtonClicked =
true
;
}
function dataBinding(e) {
var current = e.sender.current() || [];
if
(current[0]) {
cellIndex = current.index();
rowIndex = current.parent().index();
}
}
function edit(e){
var index = e.sender.current().parent().index();
if
(rowIndex ===
null
){
rowIndex = index;
}
else
{
if
(rowIndex != index){
rowIndex =
null
;
editCell =
true
;
e.sender.dataSource.sync();
}
}
}
function dataBound(e) {
if
(!isNaN(cellIndex)) {
e.sender.current(e.sender.tbody.children().eq(rowIndex).children().eq(cellIndex));
rowIndex = cellIndex =
null
;
// The code below is needed only when the user clicks on the "Save Changes" button.
// Otherwise, focusing the table explicitly and unconditionally can steal the page focus.
if
(saveButtonClicked) {
e.sender.table.focus();
saveButtonClicked =
false
;
}
if
(editCell){
editCell =
false
;
e.sender.editCell(e.sender.current());
}
}
}
</script>
If the above does not help, in order to continue my investigation, could you please prepare and share an isolated Dojo that clearly replicates the problem? If sending a Dojo is not doable, you can send us an MVC project.
Regards,
Preslav
Progress Telerik
Hi,
this works well when switching rows inside the grid, but unfortunately it doesn't work when leaving the grid, or when using any of the function buttons (NEW, DELETE) inside the grid.
Is there any way we could handle these cases easily too, in the given scenario?
Hi Stefan,
In order to achieve the desired behavior, I would recommend using the "focusout" event for the Telerik UI Grid:
In the event handler, save the Grid changes:
Give a try to the approach above and let me know if this approach is achieving the desired result.
Kind Regards,
Anton Mironov
Hi Anton,
thx, but unfortunately the focusout-event for the grid seems to fire always, even when clicking another cell in the same row. How would we go about using it in this scenario?
Hi Stefan,
Could you please send me a dojo example of your implementation? This way I will have the needed information about the Edit Mode and the configuration of the Grid.
Looking forward to hearing back from you.
Best Regards,
Anton Mironov
Hi Anton,
essentially we have a grid set up like this: https://dojo.telerik.com/IruWuRuM
(We are using Telerik MVC, so I had to convert it to Kendo-UI.)
We're doing some more stuff in the grid, like copying records via button click, but I omit that for now.
The first problem we have here is, that with this the inline edit does not work anymore. When we remove the focusin/focusout events, everything is working fine.
The dojo does not seem to reproduce that problem. Is it because the update doesn't work here?
Hi Stefan,
Thank you for the details provided.
As this is an old thread, started 6 years ago, I decided to open a new ticket thread for the case.
This way the communication will be clear and I will use an MVC project as per the requirements. I will now implement the desired behavior and will send it back to you in the new thread.
Kind Regards,
Anton Mironov