$(function () { $("#Grid").ejGrid({ // the datasource "window.gridData" is referred from jsondata.min.js dataSource: window.gridData, allowScrolling: true, scrollSettings: { width: 886, height: 300 }, actionComplete:"actioncomplete", editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, columns: [ { field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 90 }, { field: "CustomerID", headerText: "Customer ID", width: 100 }, { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 100 }, { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, width: 90, format: "{0:C}" }, { field: "ShipCity", headerText: "Ship City", width: 110 }, { field: "ShipName", headerText: "Ship Name", width: 170 }, { field: "OrderDate", headerText: "Order Date", textAlign: ej.TextAlign.Right, format: "{0:MM/dd/yyyy}", width: 100 }, { field: "ShipCountry", headerText: "Ship Country", width: 110 }, { field: "ShipPostalCode", headerText: "Postal Code", textAlign: ej.TextAlign.Right, width: 140 }, { field: "Verified", headerText: "Verified", width: 100 } ] });
}); function actioncomplete(args){ if(args.requestType == "beginedit") var left = this.getScrollObject().model.scrollLeft; var inputelement= this.element.find('form').find('input.e-field:visible') .filter(function() { return $(this).offset().left> left; }); inputelement.eq(0).focus();
|
Hi Omar,
Thanks for the update.
We have analyzed your requirement with the attached video and need following clarifications before proceeding further.
1. Do you want not to move the Grid content left while editing?
2. Otherwise do you want to move both scrollbar and content to left while editing?
Regards,
Jayaprakash K.
Hi Omar,
Please follow the incident that has been created under your account to track the status of this requirement. Please log on to our support website to check further updates.
https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents
Regards,
Jayaprakash K.
...
let grid: Grid = new Grid({
dataSource: data,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
columns: [
{ field: 'OrderID', headerText: 'OrderID', isPrimaryKey: true, width: 150 },
...
{ field: 'ShipCountry', headerText: 'ShipCountry', width: 150 }
],
height: 350,
actionBegin: actionbegin,
actionComplete : actioncomplete
});
grid.appendTo('#Grid');
var scrollLeft;
function actionbegin(args){
var grid = document.getElementById('Grid').ej2_instances[0];
scrollLeft = grid.getContent().querySelector('.e-content').scrollLeft; //getting initial scrollbar value
}
function actioncomplete(args){
var grid = document.getElementById('Grid').ej2_instances[0];
grid.getContent().querySelector('.e-content').scrollLeft = scrollLeft; //setting the scrollbar value back
} |