How to focus the updated record after refreshing a Syncfusion GridSyncfusion Grid Grouping Control Extendhow to load template for add or edit record in for syncfusion grid in partial viewsyncfusion Grid is not displayed on screenSyncfusion : How to install only Grid component from Syncfusion for Angularsyncfusion ej grid javascript methodSyncfusion mvc grid control filtering on hyperlink columnSyncfusion Angular Grid - delete selected rowHow to add tooltips to command buttons in a Syncfusion Grid for AngularHow to hide grid spinner in syncfusion Grid componentHow to expand a cell in a Syncfusion Angular Grid?
When editor does not respond to the request for withdrawal
Why is the concept of the Null hypothesis associated with the student's t distribution?
Recording Spectral Lines at Home
Am I being scammed by a sugar daddy?
How can I list the different hex characters between two files?
Should I explain the reasons for gaslighting?
That's not my X, its Y is too Z
Are skill challenges an official option or homebrewed?
What is the use of declare with option -t
Is fission/fusion to Iron the most efficient way to convert mass to energy?
Nth term of Van Eck Sequence
What did the 8086 (and 8088) do upon encountering an illegal instruction?
Placement of positioning lights on A320 winglets
What would the consequences be of a high number of solar systems being within close proximity to one another?
Is Jesus the last Prophet?
Savage Road Signs
Print "N NE E SE S SW W NW"
My mom's return ticket is 3 days after I-94 expires
What do you call the action of "describing events as they happen" like sports anchors do?
How can you estimate a spike story?
Fixed-Do Solfege in A Major scale with accidentals
Has Mathematica 12 gotten worse at solving simple equations?
Is it possible to have battery technology that can't be duplicated?
What do I need to do, tax-wise, for a sudden windfall?
How to focus the updated record after refreshing a Syncfusion Grid
Syncfusion Grid Grouping Control Extendhow to load template for add or edit record in for syncfusion grid in partial viewsyncfusion Grid is not displayed on screenSyncfusion : How to install only Grid component from Syncfusion for Angularsyncfusion ej grid javascript methodSyncfusion mvc grid control filtering on hyperlink columnSyncfusion Angular Grid - delete selected rowHow to add tooltips to command buttons in a Syncfusion Grid for AngularHow to hide grid spinner in syncfusion Grid componentHow to expand a cell in a Syncfusion Angular Grid?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I have been using a Syncfusion grid in my angular (v.6.0.8) project. In one of the pages, users can mark months as completed by checkboxes.
It causes to some of the status changes in the model. Hence, I update the model using "splice", after the backend call is completed. In order to reflect the changes on the grid, I have to call this.deliveryItemsGrid.refresh(); but, this cause to lose the position where the user is working on (grid scrolls up to the top).
Is there a way that I could use to refresh the grid without changing the scroll bar position?
[HTML]
<!-- JAN -->
<e-column headerText="JAN" [customAttributes]="class: 'textAlignment'">
<ng-template #template let-data>
<div> <i class="fa fa-wrench fa-2x" [style.color]="getMonthColorRM(data, 0)"></i></div>
<div *ngIf="!isReadOnlyUser" class="custom-control custom-checkbox">
<input id="chkChangeStatusRMdata.rmDetailId + 'JAN'" type="checkbox" class="custom-control-input"
[checked]="getMonthCompletionStatus(data, 0)" (change)="saveStatusRM(data,'0')" aria-label="Complete Task" />
<label *ngIf="getMonthCompletionStatus(data, 0)" class="custom-control-label rm-month" for="chkChangeStatusRMdata.rmDetailId + 'JAN'" data-toggle="tooltip" data-placement="top" title="Mark as not complete"></label>
<label *ngIf="!getMonthCompletionStatus(data, 0)" class="custom-control-label rm-month" for="chkChangeStatusRMdata.rmDetailId + 'JAN'" data-toggle="tooltip" data-placement="top" title="Mark as complete"></label>
</div>
<div *ngIf="data.type != 'RM' && ((data?.plannedDate?.getMonth()) == 0)"> <i id="'JAN'+ data.type + data.id" class="fa fa-wrench fa-2x" [style.color]="getMonthColorCM(data)"></i></div>
</ng-template>
</e-column>
[ts file]
private saveStatusRM(row: DeliveryPlanModel, monthId)
if (row && row.rmYears)
let selectedRmYear: IYearModel = row.rmYears.filter(y => y.year == this.selectedYear.toString())[0];
selectedRmYear.schoolNumber = this.schoolNumber;
selectedRmYear.completedMonthsList.filter(m => m.month == monthId)[0].completed = !selectedRmYear.completedMonthsList.filter(m => m.month == monthId)[0].completed;
selectedRmYear.completed = selectedRmYear.completedMonthsList.every(m => m.completed);
if (selectedRmYear.completed)
row.statusDisplay = "Completed";
else
if (selectedRmYear.completedMonthsList.some(m => m.completed))
row.statusDisplay = "In progress";
else
row.statusDisplay = "Planned";
// Set the color of the spanners (This is only for front-end use)
selectedRmYear.completedMonthsList.forEach(x =>
let color: string = "";
if (x.completed)
color = "green";
else
let dueOn: Date = new Date(+selectedRmYear.year, +x.month + 1, 1);
let currentDate: Date = new Date();
color = currentDate < dueOn ? "black" : "red";
x.color = color;
)
// Update the record on the Database.
this.deliveryPlanService.updateStatusRM(selectedRmYear).subscribe(
data =>
if (data)
// Replace the updated record in 'gridRows'
var selectedRow = this.gridRows.filter(x => x.rmDetailId == row.rmDetailId)[0]
var selectedRecordIndex = this.gridRows.indexOf(selectedRow);
this.gridRows.splice(selectedRecordIndex, 1, row);
this.calculateRmProgress(this.gridRows);
//this.deliveryItemsGrid.refresh();
);
private getMonthCompletionStatus(row: DeliveryPlanModel, monthId): boolean
if (row && row.rmYears)
let selectedRmYear: IYearModel = row.rmYears.filter(y => y.year == this.selectedYear.toString())[0];
if (selectedRmYear && selectedRmYear.completedMonthsList)
var month = selectedRmYear.completedMonthsList.filter(m => m.month == monthId)[0];
return month ? month.completed : null;
else
return null;
angular typescript syncfusion
add a comment |
I have been using a Syncfusion grid in my angular (v.6.0.8) project. In one of the pages, users can mark months as completed by checkboxes.
It causes to some of the status changes in the model. Hence, I update the model using "splice", after the backend call is completed. In order to reflect the changes on the grid, I have to call this.deliveryItemsGrid.refresh(); but, this cause to lose the position where the user is working on (grid scrolls up to the top).
Is there a way that I could use to refresh the grid without changing the scroll bar position?
[HTML]
<!-- JAN -->
<e-column headerText="JAN" [customAttributes]="class: 'textAlignment'">
<ng-template #template let-data>
<div> <i class="fa fa-wrench fa-2x" [style.color]="getMonthColorRM(data, 0)"></i></div>
<div *ngIf="!isReadOnlyUser" class="custom-control custom-checkbox">
<input id="chkChangeStatusRMdata.rmDetailId + 'JAN'" type="checkbox" class="custom-control-input"
[checked]="getMonthCompletionStatus(data, 0)" (change)="saveStatusRM(data,'0')" aria-label="Complete Task" />
<label *ngIf="getMonthCompletionStatus(data, 0)" class="custom-control-label rm-month" for="chkChangeStatusRMdata.rmDetailId + 'JAN'" data-toggle="tooltip" data-placement="top" title="Mark as not complete"></label>
<label *ngIf="!getMonthCompletionStatus(data, 0)" class="custom-control-label rm-month" for="chkChangeStatusRMdata.rmDetailId + 'JAN'" data-toggle="tooltip" data-placement="top" title="Mark as complete"></label>
</div>
<div *ngIf="data.type != 'RM' && ((data?.plannedDate?.getMonth()) == 0)"> <i id="'JAN'+ data.type + data.id" class="fa fa-wrench fa-2x" [style.color]="getMonthColorCM(data)"></i></div>
</ng-template>
</e-column>
[ts file]
private saveStatusRM(row: DeliveryPlanModel, monthId)
if (row && row.rmYears)
let selectedRmYear: IYearModel = row.rmYears.filter(y => y.year == this.selectedYear.toString())[0];
selectedRmYear.schoolNumber = this.schoolNumber;
selectedRmYear.completedMonthsList.filter(m => m.month == monthId)[0].completed = !selectedRmYear.completedMonthsList.filter(m => m.month == monthId)[0].completed;
selectedRmYear.completed = selectedRmYear.completedMonthsList.every(m => m.completed);
if (selectedRmYear.completed)
row.statusDisplay = "Completed";
else
if (selectedRmYear.completedMonthsList.some(m => m.completed))
row.statusDisplay = "In progress";
else
row.statusDisplay = "Planned";
// Set the color of the spanners (This is only for front-end use)
selectedRmYear.completedMonthsList.forEach(x =>
let color: string = "";
if (x.completed)
color = "green";
else
let dueOn: Date = new Date(+selectedRmYear.year, +x.month + 1, 1);
let currentDate: Date = new Date();
color = currentDate < dueOn ? "black" : "red";
x.color = color;
)
// Update the record on the Database.
this.deliveryPlanService.updateStatusRM(selectedRmYear).subscribe(
data =>
if (data)
// Replace the updated record in 'gridRows'
var selectedRow = this.gridRows.filter(x => x.rmDetailId == row.rmDetailId)[0]
var selectedRecordIndex = this.gridRows.indexOf(selectedRow);
this.gridRows.splice(selectedRecordIndex, 1, row);
this.calculateRmProgress(this.gridRows);
//this.deliveryItemsGrid.refresh();
);
private getMonthCompletionStatus(row: DeliveryPlanModel, monthId): boolean
if (row && row.rmYears)
let selectedRmYear: IYearModel = row.rmYears.filter(y => y.year == this.selectedYear.toString())[0];
if (selectedRmYear && selectedRmYear.completedMonthsList)
var month = selectedRmYear.completedMonthsList.filter(m => m.month == monthId)[0];
return month ? month.completed : null;
else
return null;
angular typescript syncfusion
add a comment |
I have been using a Syncfusion grid in my angular (v.6.0.8) project. In one of the pages, users can mark months as completed by checkboxes.
It causes to some of the status changes in the model. Hence, I update the model using "splice", after the backend call is completed. In order to reflect the changes on the grid, I have to call this.deliveryItemsGrid.refresh(); but, this cause to lose the position where the user is working on (grid scrolls up to the top).
Is there a way that I could use to refresh the grid without changing the scroll bar position?
[HTML]
<!-- JAN -->
<e-column headerText="JAN" [customAttributes]="class: 'textAlignment'">
<ng-template #template let-data>
<div> <i class="fa fa-wrench fa-2x" [style.color]="getMonthColorRM(data, 0)"></i></div>
<div *ngIf="!isReadOnlyUser" class="custom-control custom-checkbox">
<input id="chkChangeStatusRMdata.rmDetailId + 'JAN'" type="checkbox" class="custom-control-input"
[checked]="getMonthCompletionStatus(data, 0)" (change)="saveStatusRM(data,'0')" aria-label="Complete Task" />
<label *ngIf="getMonthCompletionStatus(data, 0)" class="custom-control-label rm-month" for="chkChangeStatusRMdata.rmDetailId + 'JAN'" data-toggle="tooltip" data-placement="top" title="Mark as not complete"></label>
<label *ngIf="!getMonthCompletionStatus(data, 0)" class="custom-control-label rm-month" for="chkChangeStatusRMdata.rmDetailId + 'JAN'" data-toggle="tooltip" data-placement="top" title="Mark as complete"></label>
</div>
<div *ngIf="data.type != 'RM' && ((data?.plannedDate?.getMonth()) == 0)"> <i id="'JAN'+ data.type + data.id" class="fa fa-wrench fa-2x" [style.color]="getMonthColorCM(data)"></i></div>
</ng-template>
</e-column>
[ts file]
private saveStatusRM(row: DeliveryPlanModel, monthId)
if (row && row.rmYears)
let selectedRmYear: IYearModel = row.rmYears.filter(y => y.year == this.selectedYear.toString())[0];
selectedRmYear.schoolNumber = this.schoolNumber;
selectedRmYear.completedMonthsList.filter(m => m.month == monthId)[0].completed = !selectedRmYear.completedMonthsList.filter(m => m.month == monthId)[0].completed;
selectedRmYear.completed = selectedRmYear.completedMonthsList.every(m => m.completed);
if (selectedRmYear.completed)
row.statusDisplay = "Completed";
else
if (selectedRmYear.completedMonthsList.some(m => m.completed))
row.statusDisplay = "In progress";
else
row.statusDisplay = "Planned";
// Set the color of the spanners (This is only for front-end use)
selectedRmYear.completedMonthsList.forEach(x =>
let color: string = "";
if (x.completed)
color = "green";
else
let dueOn: Date = new Date(+selectedRmYear.year, +x.month + 1, 1);
let currentDate: Date = new Date();
color = currentDate < dueOn ? "black" : "red";
x.color = color;
)
// Update the record on the Database.
this.deliveryPlanService.updateStatusRM(selectedRmYear).subscribe(
data =>
if (data)
// Replace the updated record in 'gridRows'
var selectedRow = this.gridRows.filter(x => x.rmDetailId == row.rmDetailId)[0]
var selectedRecordIndex = this.gridRows.indexOf(selectedRow);
this.gridRows.splice(selectedRecordIndex, 1, row);
this.calculateRmProgress(this.gridRows);
//this.deliveryItemsGrid.refresh();
);
private getMonthCompletionStatus(row: DeliveryPlanModel, monthId): boolean
if (row && row.rmYears)
let selectedRmYear: IYearModel = row.rmYears.filter(y => y.year == this.selectedYear.toString())[0];
if (selectedRmYear && selectedRmYear.completedMonthsList)
var month = selectedRmYear.completedMonthsList.filter(m => m.month == monthId)[0];
return month ? month.completed : null;
else
return null;
angular typescript syncfusion
I have been using a Syncfusion grid in my angular (v.6.0.8) project. In one of the pages, users can mark months as completed by checkboxes.
It causes to some of the status changes in the model. Hence, I update the model using "splice", after the backend call is completed. In order to reflect the changes on the grid, I have to call this.deliveryItemsGrid.refresh(); but, this cause to lose the position where the user is working on (grid scrolls up to the top).
Is there a way that I could use to refresh the grid without changing the scroll bar position?
[HTML]
<!-- JAN -->
<e-column headerText="JAN" [customAttributes]="class: 'textAlignment'">
<ng-template #template let-data>
<div> <i class="fa fa-wrench fa-2x" [style.color]="getMonthColorRM(data, 0)"></i></div>
<div *ngIf="!isReadOnlyUser" class="custom-control custom-checkbox">
<input id="chkChangeStatusRMdata.rmDetailId + 'JAN'" type="checkbox" class="custom-control-input"
[checked]="getMonthCompletionStatus(data, 0)" (change)="saveStatusRM(data,'0')" aria-label="Complete Task" />
<label *ngIf="getMonthCompletionStatus(data, 0)" class="custom-control-label rm-month" for="chkChangeStatusRMdata.rmDetailId + 'JAN'" data-toggle="tooltip" data-placement="top" title="Mark as not complete"></label>
<label *ngIf="!getMonthCompletionStatus(data, 0)" class="custom-control-label rm-month" for="chkChangeStatusRMdata.rmDetailId + 'JAN'" data-toggle="tooltip" data-placement="top" title="Mark as complete"></label>
</div>
<div *ngIf="data.type != 'RM' && ((data?.plannedDate?.getMonth()) == 0)"> <i id="'JAN'+ data.type + data.id" class="fa fa-wrench fa-2x" [style.color]="getMonthColorCM(data)"></i></div>
</ng-template>
</e-column>
[ts file]
private saveStatusRM(row: DeliveryPlanModel, monthId)
if (row && row.rmYears)
let selectedRmYear: IYearModel = row.rmYears.filter(y => y.year == this.selectedYear.toString())[0];
selectedRmYear.schoolNumber = this.schoolNumber;
selectedRmYear.completedMonthsList.filter(m => m.month == monthId)[0].completed = !selectedRmYear.completedMonthsList.filter(m => m.month == monthId)[0].completed;
selectedRmYear.completed = selectedRmYear.completedMonthsList.every(m => m.completed);
if (selectedRmYear.completed)
row.statusDisplay = "Completed";
else
if (selectedRmYear.completedMonthsList.some(m => m.completed))
row.statusDisplay = "In progress";
else
row.statusDisplay = "Planned";
// Set the color of the spanners (This is only for front-end use)
selectedRmYear.completedMonthsList.forEach(x =>
let color: string = "";
if (x.completed)
color = "green";
else
let dueOn: Date = new Date(+selectedRmYear.year, +x.month + 1, 1);
let currentDate: Date = new Date();
color = currentDate < dueOn ? "black" : "red";
x.color = color;
)
// Update the record on the Database.
this.deliveryPlanService.updateStatusRM(selectedRmYear).subscribe(
data =>
if (data)
// Replace the updated record in 'gridRows'
var selectedRow = this.gridRows.filter(x => x.rmDetailId == row.rmDetailId)[0]
var selectedRecordIndex = this.gridRows.indexOf(selectedRow);
this.gridRows.splice(selectedRecordIndex, 1, row);
this.calculateRmProgress(this.gridRows);
//this.deliveryItemsGrid.refresh();
);
private getMonthCompletionStatus(row: DeliveryPlanModel, monthId): boolean
if (row && row.rmYears)
let selectedRmYear: IYearModel = row.rmYears.filter(y => y.year == this.selectedYear.toString())[0];
if (selectedRmYear && selectedRmYear.completedMonthsList)
var month = selectedRmYear.completedMonthsList.filter(m => m.month == monthId)[0];
return month ? month.completed : null;
else
return null;
angular typescript syncfusion
angular typescript syncfusion
edited Mar 26 at 1:40
Kushan Randima
asked Mar 24 at 23:52
Kushan RandimaKushan Randima
68821439
68821439
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
We have analyzed your query and we suggest to get the scrollTop value before the refresh method invoke and bind it to the grid scroll bar after the refresh operation completed using actionComplete event. Please refer to the below sample and documentation for your reference,
complete(args)
if(args.requestType == 'refresh' && this.scrollVal)
this.grid.getContent().firstElementChild.scrollTop = this.scrollVal;
this.scrollVal = 0;
refresh()
this.scrollVal = this.grid.getContent().firstElementChild.scrollTop;
this.grid.refresh();
Sample: https://stackblitz.com/edit/angular-gg4hgd-hrxcwr?file=default.component.ts
Documentation: https://ej2.syncfusion.com/documentation/api/grid/#actioncomplete
Please get back to us for further assistance.
Regards,
Thavasianand S.
I appreciate for your prompt reply and support. I went with my own solution in the end because it's a more succinct way of achieving the same thing. Just for info I'm using this update function in two separate five kinds of rows in the grid. I checked your solution too and it works perfectly fine for me. Thanks!
– Kushan Randima
Mar 26 at 23:00
add a comment |
I was able to find a solution to the issue. I used "rowDataBound"
and "dataBound"
events to achieve that. Please refer to the code below.
[HTML]
<ejs-grid #deliveryItemsGrid id="deliveryItemsGrid"
[dataSource]="gridRows"
[gridLines]="componentVariables.gridLines"
[allowPaging]="componentVariables.allowPaging"
[allowGrouping]="componentVariables.allowGrouping"
[allowSorting]="componentVariables.allowSorting"
[allowSelection]="componentVariables.allowSelection"
[allowTextWrap]="componentVariables.allowTextWrap"
[allowFiltering]="componentVariables.allowFiltering"
[pageSettings]="componentVariables.pageSettings"
[filterSettings]="componentVariables.filterOptions"
[selectedRowIndex]="selectedRowIndex"
[selectionSettings]="selectionOptions"
[toolbar]="componentVariables.toolbarOptions"
(toolbarClick)="toolbarClick($event)"
(rowDataBound)="rowDataBound($event)"
(dataBound)="dataBound($event)">
[ts]
I created two global variables, to store the selected indexes.
selectedIndexes: number[] = [];
justNowUpdatedId = 0;
Then, in all the update functions, before calling the refresh()
method, I keep the relevant id in the 'justNowUpdatedId'
variable.
Finally, I implement "rowDataBound"
and "dataBound"
events in order to preserve the position which the user was working before.
public rowDataBound(args): void args.data['type'] == 'DP'
public dataBound(args): void
if (this.selectedIndexes.length)
this.deliveryItemsGrid.selectRows(this.selectedIndexes);
this.selectedIndexes = [];
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55329689%2fhow-to-focus-the-updated-record-after-refreshing-a-syncfusion-grid%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
We have analyzed your query and we suggest to get the scrollTop value before the refresh method invoke and bind it to the grid scroll bar after the refresh operation completed using actionComplete event. Please refer to the below sample and documentation for your reference,
complete(args)
if(args.requestType == 'refresh' && this.scrollVal)
this.grid.getContent().firstElementChild.scrollTop = this.scrollVal;
this.scrollVal = 0;
refresh()
this.scrollVal = this.grid.getContent().firstElementChild.scrollTop;
this.grid.refresh();
Sample: https://stackblitz.com/edit/angular-gg4hgd-hrxcwr?file=default.component.ts
Documentation: https://ej2.syncfusion.com/documentation/api/grid/#actioncomplete
Please get back to us for further assistance.
Regards,
Thavasianand S.
I appreciate for your prompt reply and support. I went with my own solution in the end because it's a more succinct way of achieving the same thing. Just for info I'm using this update function in two separate five kinds of rows in the grid. I checked your solution too and it works perfectly fine for me. Thanks!
– Kushan Randima
Mar 26 at 23:00
add a comment |
We have analyzed your query and we suggest to get the scrollTop value before the refresh method invoke and bind it to the grid scroll bar after the refresh operation completed using actionComplete event. Please refer to the below sample and documentation for your reference,
complete(args)
if(args.requestType == 'refresh' && this.scrollVal)
this.grid.getContent().firstElementChild.scrollTop = this.scrollVal;
this.scrollVal = 0;
refresh()
this.scrollVal = this.grid.getContent().firstElementChild.scrollTop;
this.grid.refresh();
Sample: https://stackblitz.com/edit/angular-gg4hgd-hrxcwr?file=default.component.ts
Documentation: https://ej2.syncfusion.com/documentation/api/grid/#actioncomplete
Please get back to us for further assistance.
Regards,
Thavasianand S.
I appreciate for your prompt reply and support. I went with my own solution in the end because it's a more succinct way of achieving the same thing. Just for info I'm using this update function in two separate five kinds of rows in the grid. I checked your solution too and it works perfectly fine for me. Thanks!
– Kushan Randima
Mar 26 at 23:00
add a comment |
We have analyzed your query and we suggest to get the scrollTop value before the refresh method invoke and bind it to the grid scroll bar after the refresh operation completed using actionComplete event. Please refer to the below sample and documentation for your reference,
complete(args)
if(args.requestType == 'refresh' && this.scrollVal)
this.grid.getContent().firstElementChild.scrollTop = this.scrollVal;
this.scrollVal = 0;
refresh()
this.scrollVal = this.grid.getContent().firstElementChild.scrollTop;
this.grid.refresh();
Sample: https://stackblitz.com/edit/angular-gg4hgd-hrxcwr?file=default.component.ts
Documentation: https://ej2.syncfusion.com/documentation/api/grid/#actioncomplete
Please get back to us for further assistance.
Regards,
Thavasianand S.
We have analyzed your query and we suggest to get the scrollTop value before the refresh method invoke and bind it to the grid scroll bar after the refresh operation completed using actionComplete event. Please refer to the below sample and documentation for your reference,
complete(args)
if(args.requestType == 'refresh' && this.scrollVal)
this.grid.getContent().firstElementChild.scrollTop = this.scrollVal;
this.scrollVal = 0;
refresh()
this.scrollVal = this.grid.getContent().firstElementChild.scrollTop;
this.grid.refresh();
Sample: https://stackblitz.com/edit/angular-gg4hgd-hrxcwr?file=default.component.ts
Documentation: https://ej2.syncfusion.com/documentation/api/grid/#actioncomplete
Please get back to us for further assistance.
Regards,
Thavasianand S.
answered Mar 26 at 5:25
S.T AnandS.T Anand
111
111
I appreciate for your prompt reply and support. I went with my own solution in the end because it's a more succinct way of achieving the same thing. Just for info I'm using this update function in two separate five kinds of rows in the grid. I checked your solution too and it works perfectly fine for me. Thanks!
– Kushan Randima
Mar 26 at 23:00
add a comment |
I appreciate for your prompt reply and support. I went with my own solution in the end because it's a more succinct way of achieving the same thing. Just for info I'm using this update function in two separate five kinds of rows in the grid. I checked your solution too and it works perfectly fine for me. Thanks!
– Kushan Randima
Mar 26 at 23:00
I appreciate for your prompt reply and support. I went with my own solution in the end because it's a more succinct way of achieving the same thing. Just for info I'm using this update function in two separate five kinds of rows in the grid. I checked your solution too and it works perfectly fine for me. Thanks!
– Kushan Randima
Mar 26 at 23:00
I appreciate for your prompt reply and support. I went with my own solution in the end because it's a more succinct way of achieving the same thing. Just for info I'm using this update function in two separate five kinds of rows in the grid. I checked your solution too and it works perfectly fine for me. Thanks!
– Kushan Randima
Mar 26 at 23:00
add a comment |
I was able to find a solution to the issue. I used "rowDataBound"
and "dataBound"
events to achieve that. Please refer to the code below.
[HTML]
<ejs-grid #deliveryItemsGrid id="deliveryItemsGrid"
[dataSource]="gridRows"
[gridLines]="componentVariables.gridLines"
[allowPaging]="componentVariables.allowPaging"
[allowGrouping]="componentVariables.allowGrouping"
[allowSorting]="componentVariables.allowSorting"
[allowSelection]="componentVariables.allowSelection"
[allowTextWrap]="componentVariables.allowTextWrap"
[allowFiltering]="componentVariables.allowFiltering"
[pageSettings]="componentVariables.pageSettings"
[filterSettings]="componentVariables.filterOptions"
[selectedRowIndex]="selectedRowIndex"
[selectionSettings]="selectionOptions"
[toolbar]="componentVariables.toolbarOptions"
(toolbarClick)="toolbarClick($event)"
(rowDataBound)="rowDataBound($event)"
(dataBound)="dataBound($event)">
[ts]
I created two global variables, to store the selected indexes.
selectedIndexes: number[] = [];
justNowUpdatedId = 0;
Then, in all the update functions, before calling the refresh()
method, I keep the relevant id in the 'justNowUpdatedId'
variable.
Finally, I implement "rowDataBound"
and "dataBound"
events in order to preserve the position which the user was working before.
public rowDataBound(args): void args.data['type'] == 'DP'
public dataBound(args): void
if (this.selectedIndexes.length)
this.deliveryItemsGrid.selectRows(this.selectedIndexes);
this.selectedIndexes = [];
add a comment |
I was able to find a solution to the issue. I used "rowDataBound"
and "dataBound"
events to achieve that. Please refer to the code below.
[HTML]
<ejs-grid #deliveryItemsGrid id="deliveryItemsGrid"
[dataSource]="gridRows"
[gridLines]="componentVariables.gridLines"
[allowPaging]="componentVariables.allowPaging"
[allowGrouping]="componentVariables.allowGrouping"
[allowSorting]="componentVariables.allowSorting"
[allowSelection]="componentVariables.allowSelection"
[allowTextWrap]="componentVariables.allowTextWrap"
[allowFiltering]="componentVariables.allowFiltering"
[pageSettings]="componentVariables.pageSettings"
[filterSettings]="componentVariables.filterOptions"
[selectedRowIndex]="selectedRowIndex"
[selectionSettings]="selectionOptions"
[toolbar]="componentVariables.toolbarOptions"
(toolbarClick)="toolbarClick($event)"
(rowDataBound)="rowDataBound($event)"
(dataBound)="dataBound($event)">
[ts]
I created two global variables, to store the selected indexes.
selectedIndexes: number[] = [];
justNowUpdatedId = 0;
Then, in all the update functions, before calling the refresh()
method, I keep the relevant id in the 'justNowUpdatedId'
variable.
Finally, I implement "rowDataBound"
and "dataBound"
events in order to preserve the position which the user was working before.
public rowDataBound(args): void args.data['type'] == 'DP'
public dataBound(args): void
if (this.selectedIndexes.length)
this.deliveryItemsGrid.selectRows(this.selectedIndexes);
this.selectedIndexes = [];
add a comment |
I was able to find a solution to the issue. I used "rowDataBound"
and "dataBound"
events to achieve that. Please refer to the code below.
[HTML]
<ejs-grid #deliveryItemsGrid id="deliveryItemsGrid"
[dataSource]="gridRows"
[gridLines]="componentVariables.gridLines"
[allowPaging]="componentVariables.allowPaging"
[allowGrouping]="componentVariables.allowGrouping"
[allowSorting]="componentVariables.allowSorting"
[allowSelection]="componentVariables.allowSelection"
[allowTextWrap]="componentVariables.allowTextWrap"
[allowFiltering]="componentVariables.allowFiltering"
[pageSettings]="componentVariables.pageSettings"
[filterSettings]="componentVariables.filterOptions"
[selectedRowIndex]="selectedRowIndex"
[selectionSettings]="selectionOptions"
[toolbar]="componentVariables.toolbarOptions"
(toolbarClick)="toolbarClick($event)"
(rowDataBound)="rowDataBound($event)"
(dataBound)="dataBound($event)">
[ts]
I created two global variables, to store the selected indexes.
selectedIndexes: number[] = [];
justNowUpdatedId = 0;
Then, in all the update functions, before calling the refresh()
method, I keep the relevant id in the 'justNowUpdatedId'
variable.
Finally, I implement "rowDataBound"
and "dataBound"
events in order to preserve the position which the user was working before.
public rowDataBound(args): void args.data['type'] == 'DP'
public dataBound(args): void
if (this.selectedIndexes.length)
this.deliveryItemsGrid.selectRows(this.selectedIndexes);
this.selectedIndexes = [];
I was able to find a solution to the issue. I used "rowDataBound"
and "dataBound"
events to achieve that. Please refer to the code below.
[HTML]
<ejs-grid #deliveryItemsGrid id="deliveryItemsGrid"
[dataSource]="gridRows"
[gridLines]="componentVariables.gridLines"
[allowPaging]="componentVariables.allowPaging"
[allowGrouping]="componentVariables.allowGrouping"
[allowSorting]="componentVariables.allowSorting"
[allowSelection]="componentVariables.allowSelection"
[allowTextWrap]="componentVariables.allowTextWrap"
[allowFiltering]="componentVariables.allowFiltering"
[pageSettings]="componentVariables.pageSettings"
[filterSettings]="componentVariables.filterOptions"
[selectedRowIndex]="selectedRowIndex"
[selectionSettings]="selectionOptions"
[toolbar]="componentVariables.toolbarOptions"
(toolbarClick)="toolbarClick($event)"
(rowDataBound)="rowDataBound($event)"
(dataBound)="dataBound($event)">
[ts]
I created two global variables, to store the selected indexes.
selectedIndexes: number[] = [];
justNowUpdatedId = 0;
Then, in all the update functions, before calling the refresh()
method, I keep the relevant id in the 'justNowUpdatedId'
variable.
Finally, I implement "rowDataBound"
and "dataBound"
events in order to preserve the position which the user was working before.
public rowDataBound(args): void args.data['type'] == 'DP'
public dataBound(args): void
if (this.selectedIndexes.length)
this.deliveryItemsGrid.selectRows(this.selectedIndexes);
this.selectedIndexes = [];
answered Mar 26 at 22:59
Kushan RandimaKushan Randima
68821439
68821439
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55329689%2fhow-to-focus-the-updated-record-after-refreshing-a-syncfusion-grid%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown