Rank 1
Iron
Hi,
I have made a kendo grid with the select checkbox so the user can pick the rows required.
I have everything working that I need except users would like to sort the selected rows so they appear at the top (allows them to check easily what has been selected).
I cannot figure out how to do this, it doesn't seem like I can bind the checkbox to a field. At the moment the only way I can think of is to use the "selectedKeysChange" event to set a boolean variable to true for each selected row and then make a custom button a manual sort (although not gone down this route just yet so not sure it will work)
Is there a built in way to sort selected rows / kendo-grid-checkbox-column?
Many Thanks
1 Answer, 1 is accepted
Hi Richard,
There are two possible approaches that are custom to achieve the requirement as there isn't a built-in option that can help in such a scenario.
The first approach would be to map the Grid collection and add a boolean property to mark which item is selected or not selected and sort them by that property.
The second option would be to check the selectedKeys collection array and sort the Grid based on the keys. However, if sorting is used in the Grid, the developer would need to handle the sorting operations to not mix with the selectedKeys sorting.
I hope this helps. Please let me know if I can provide any further assistance on this matter.
Regards,
Yanmario
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Hi Yanmario,
Thank you for taking the time to reply. I now have something which seems to be performing as I want it:
I do not use the built in select but made a custom column as below:
<kendo-grid-column field="selected" title="Selected">
<ng-template kendoGridCellTemplate let-dataItem let-idx="rowIndex">
<input
type="checkbox"
(change)="checkboxEdit($event.target.checked, dataItem.uid)"
[checked]="dataItem.selected"
kendoCheckBox
/>
</ng-template>
</kendo-grid-column>where checkboxEdit does:
public checkboxEdit(newValue, rowUID) {
const matchRow = this.myTable.rowData.find((x) => x.uid === rowUID);
if (matchRow) {
matchRow.uiSelected = newValue;
if (newValue) {
this.mySelection = [...this.mySelection, rowUID];
} else {
this.mySelection = this.mySelection.filter((e) => e !== rowUID);
}
}
}I then have
[(selectedKeys)]="mySelection"
set on my table.
This still allows the selection styling and for me to sort the selected column. I have had to make a button for the ability to select all filtered items but that is pretty easy using Kendo's filterBy function and the kendoGridToolbarTemplate component.
public selectFiltered() {
const ableToCheck = filterBy(this.myTable.rowData, this.filter);
ableToCheck.forEach((rowItem) => {
if (!rowItem.uiSelected) {
rowItem.uiSelected = true;
this.mySelection = [...this.mySelection, rowItem.uid];
}
});
}I am not 100% if this is the kind of solution you were hinting towards?! But I am leaving it here encase either you foresee any issues or anyone else stumbles upon the same issue.
Thanks again for you help,.
Edit:
for styling you need the below in the table component
[rowSelected]="isRowSelected"
with the following variable / function
public isRowSelected = (e: RowArgs): boolean =>
this.mySelection.indexOf(e.dataItem.uid) >= 0;
Hi Richard,
The taken approach looks valid.
What I could also recommend is checking the following example which creates an entirely custom checkbox column along with the select all checkbox in the header (supporting 'indeterminate' state).
It might be found helpful to adjust your Grid as necessary:
https://stackblitz.com/edit/angular-f6fywv