Hi Sanjay Singh,
Thanks for the patience.
We have analyzed your query, you want to disable the row
data in Grid. We have achieved your requirement using rowDataBound event
and rowSelecting event.
On rowDataBound event, we get particular
data(OrderID) in the Grid and add the CSS class (‘e-disabled’) to disable the
particular row. Also to prevent checkbox selection in the disabled checkbox
while clicking the header checkbox, we have used the rowSelecting event
using this event we have selected only the rows which does not contain the
(‘e-disabled’) CSS class.
Kindly refer the below code and sample for your reference.
|
[app.component.ts]
rowDataBound(args) {
if (args.data['OrderID'] === 10248 || args.data['OrderID'] === 10256) {
args.row.classList.add('e-disabled');
}
rowSelecting(args) {
if (args.data['OrderID'] === 10248 || args.data['OrderID'] === 10256) {
args.cancel = true;
}
if (args.rowIndexes.length > 1) {
var index = [];
args.rowIndexes.filter((rowIndex) => {
if (
this.grid.getRowByIndex(rowIndex).classList.contains('e-disabled')
) {
index.push(rowIndex);
}
});
index.forEach((p) =>
args.rowIndexes.splice(args.rowIndexes.indexOf(p), 1)
);
}
}
|
Sample link : https://stackblitz.com/edit/angular-x29sey?file=app.component.ts,app.component.html,data.ts
Documentation link : https://ej2.syncfusion.com/documentation/api/grid/#rowdatabound
https://ej2.syncfusion.com/documentation/api/grid/#rowselecting
Please get back to us if you need further assistance on
this.
Regards,
Vinitha Balasubramanian
