Do not jump to top of page after editing grid
Hi,
Unfortunately, i cannot provide a sample of the project as it exceeds the 30MB limit for uploads. Basically, it is a normal ASP.NET MVC page. The grid has the EnableAdaptiveUI method set to true. Then I have some javascript to render the grid vertically and set the edit mode to dialog if the browser is a mobile device. Below is my grid page and a little script section to render the grid as above. Also below are some screenshots of the issue:
Code:
<div id = "ControlRegion" class="e-mobile-content">
@Html.EJS().Grid("dataGrid1").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowSorting().AllowFiltering().AllowGrouping().AllowResizing(true).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).MinWidth("120").Width("200").MaxWidth("300").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").MinWidth("8").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("200").EditType("datepickeredit").MinWidth("8").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Freight").HeaderText("Freight").Width("150").MinWidth("8").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").MinWidth("8").Width("300").Add();
col.Field("ShippedDate").HeaderText("Shipped Date").Width("200").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipName").HeaderText("Ship Name").EditType("dropdownedit").MinWidth("8").Width("200").Add();
col.Field("Verified").HeaderText("Verified").EditType("booleanedit").DisplayAsCheckBox(true).Type("boolean").MinWidth("8").Width("200").Add();
}).SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).Aggregates(agg =>
{
agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Freight", Type = "Sum", GroupFooterTemplate = "Total units: ${Sum}" }, new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Verified", Type = "Truecount", GroupFooterTemplate = "Verified: ${Truecount}" }, new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Freight", Type = "Max", GroupCaptionTemplate = "Maximum: ${Max}" } }).Add();
}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Toolbar(new List<string>() { "Search" }).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu); }).EnableAdaptiveUI(true).Load("load").Render()
</div>
<script type="text/javascript">
function load() {
var grid = document.getElementById('dataGrid1').ej2_instances[0];
if (ej.base.Browser.isDevice) {
document.querySelector('.e-mobile-content').classList.add('e-bigger');
grid.rowRenderingMode = "Vertical";
grid.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0];
grid.editSettings.mode = "Dialog";
grid.columns.map((e) => {
if (e.textAlign == "Center") {
e.textAlign = "Left";
}
if (e.headerTextAlign == "Center") {
e.headerTextAlign = "Left";
}
if (e.textAlign == "Right") {
e.textAlign = "Left";
}
});
} else {
grid.rowRenderingMode = "Horizontal";
grid.editSettings.mode = "Normal";
grid.columns.map((e) => {
if (e.textAlign == "Left") {
e.textAlign = "Center";
}
if (e.headerTextAlign == "Left") {
e.headerTextAlign = "Center";
}
});
}
}
</script>
Screenshots:
Start Edit on order id 10004:
Save Changes and go back to grid:
As you can see, after changes are saved on teh selected record, the page goes all the way back to the top.
