Category / Section
How to focus the updated record after dialog close
1 min read
This Knowledge base explains how to maintain the focus on the edited record while saving the records in Dialog Edit mode without paging.
Solution:
We have achieved this using actionComplete event of ejGrid. By default, when edit dialog is opened then the grid is focused to the center position, so while saving the records the current view does not contain the edited record.
The following code example demonstrates how to maintain the focus on the edited record while saving the records in Dialog Edit.
1.Render the Grid control.
HTML
<div id="Grid"></div>
JavaScript
<script>
$(function () {
$("#Grid").ejGrid({
dataSource: window.gridData,
actionComplete:"complete",
editSettings:{allowEditing : true, allowAdding : true, allowDeleting : true, editMode : "dialog"},
columns: [
{ field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 80, textAlign: ej.TextAlign.Right },
{ field: "CustomerID", headerText: "Customer ID",textAlign: ej.TextAlign.Right, width: 80 },
{ field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 80 },
{ field: "ShipCity", headerText: "ShipCity",textAlign: ej.TextAlign.Right, width: 100 },
]
});
});
</script>
MVC
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.ClientSideEvents(eve => eve.ActionComplete("complete"))
.EditSettings(edit => edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).EditMode(EditMode.Dialog))
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(80).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width(80).Add();
col.Field("ShipCity").HeaderText("ShipCity").Width(100).Add();
}))
ASPX
<ej:Grid runat="server" ID="Grid" > <ClientSideEvents ActionComplete="complete"/> <EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" EditMode="Dialog" /> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey=”true" Width="80" TextAlign="Right" /> <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80" /> <ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="80" TextAlign="Right" /> <ej:Column Field="ShipCity" HeaderText="ShipCity" Width="100" TextAlign="Right" /> </Columns> </ej:Grid>
ASP.NET CORE
<ej-grid id="FlatGrid" datasource="ViewBag.datasource" action-complete="complete"> <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="Dialog"></e-edit-settings> <e-columns> <e-column field="OrderID" header-text="Order ID" text-align="Right" width="80" is-primary-key="true"></e-column> <e-column field="CustomerID" header-text="Customer ID" width="80"></e-column> <e-column field="EmployeeID" header-text="EmployeeID" width="80"></e-column> <e-column field="ShipCity" header-text="ShipCity" width="100"></e-column> </e-columns> </ej-grid>
Angular
HTML
<ej-grid #grid [dataSource]="gridData" [editSettings]="editSettings" (actionComplete)="onActionComplete($event)"> <e-columns> <e-column field= "OrderID" headerText="OrderID" [isPrimaryKey]="true" width=80></e-column> <e-column field= "CustomerID" headerText="CustomerID" width=80></e-column> <e-column field= "EmployeeID" headerText="EmployeeID" width=80></e-column> <e-column field= "ShipCity" headerText="ShipCity" width=100></e-column> </e-columns> </ej-grid>
TS
export class GridComponent {
public gridData;
constructor()
{
this.gridData = window.gridData;
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true,editMode : "dialog" };
}
onActionComplete(args: any){
if (args.requestType == "save" || args.requestType == "cancel") {
var obj = $(".e-grid").ejGrid("instance");
$(window).scrollTop(obj.getSelectedRows().offset().top - ($(window).height() / 2));
}
}
}
2. In the actionComplete event we have scrolled the content of the Grid based on the window height and the selected row offset value.
JS
<script>
function complete (args) {
if (args.requestType == "save" || args.requestType == "cancel") {
$(window).scrollTop(this.getSelectedRows().offset().top - ($(window).height() / 2));
}
}
</script>
Result:
Figure 1:Before Editing
Figure 2: Editing
Figure 3:Output
