Strike selected row

[Neo]

Hi all,

I am using ej2 Grid for represent my data. Accordingly I want to Strike current selected row with some highlighted color when clicking on a button (vice versa). After the strike of the particular row I need to capture that row using another button click. I'm currently deleting the row and capture deleted row by below code,

-- Deleting --

this.myGrid.deleteRecord("rowId", rowId);

-- Capturing --

beforeBatchSave(args: BeforeBatchSaveArgs) {

let changedRecords = args.batchChanges["changedRecords"];

let deletedRecords = args.batchChanges["deletedRecords"];

// Other logics goes here

}

Thank you.

[Thavasianand Sankaranarayanan]

Hi Isanka, 

Greetings from Syncfusion support. 

We can get the selected row data in the rowSelected event of Grid. 

[app.component.html] 

<ejs-grid [dataSource]='data' height='350' [allowPaging]=true (rowSelected)='rowSelected($event)'> 

        <e-columns> 

                 ---- 

        </e-columns> 

    </ejs-grid> 

----------------------------------------------------------------------------------------------------- 

[app.component.ts] 

export class AppComponent { 

    public data: Object[] = []; 

    ngOnInit(): void { 

        this.data = orderDetails; 

    } 

    rowSelected(args){ 

      console.log(args.data);  // you can get the selected record in the below argument 

    } 

} 

We have prepared a simple sample in the following link. 

Link: https://stackblitz.com/edit/angular-cejvp5-cjry2m?file=main.ts 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#rowselected 

If we misunderstood your query then please get back to us. 

Regards, 

Thavasianand S. 

[Neo]

Hi Isanka, 

Greetings from Syncfusion support. 

We can get the selected row data in the rowSelected event of Grid. 

[app.component.html] 

<ejs-grid [dataSource]='data' height='350' [allowPaging]=true (rowSelected)='rowSelected($event)'> 

        <e-columns> 

                 ---- 

        </e-columns> 

    </ejs-grid> 

----------------------------------------------------------------------------------------------------- 

[app.component.ts] 

export class AppComponent { 

    public data: Object[] = []; 

    ngOnInit(): void { 

        this.data = orderDetails; 

    } 

    rowSelected(args){ 

      console.log(args.data);  // you can get the selected record in the below argument 

    } 

} 

We have prepared a simple sample in the following link. 

Link: https://stackblitz.com/edit/angular-cejvp5-cjry2m?file=main.ts 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#rowselected 

If we misunderstood your query then please get back to us. 

Regards, 

Thavasianand S. 

Hi Thavasianand,

That is not the requirement I expected. Please see the example below,

Something like above example, I want to strike the selected row by button click and get the selected row data by another button click. Assume we have two separate buttons in the form. (If you don't have option to enable strike, use row color)

Thank you.

[Thavasianand Sankaranarayanan]

Hi Isanka, 

We have prepared a sample with your mentioned requirement in the following link. 

Link: https://stackblitz.com/edit/angular-s7teej-4cxprg?file=app.component.ts 

Refer the below code example. 

[app.component.html] 

<button id="strikerow">Strike out the selected row</button> 

<button id="getselectedrow">Get the selected record</button> 

 

<ejs-grid [dataSource]='data' #grid height='350' [selectionSettings]='selectionOptions'> 

  <e-columns> 

    <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 

    <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column> 

    <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'></e-column> 

    <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 

    <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'></e-column> 

    <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 

  </e-columns> 

</ejs-grid> 

 

-------------------------------------------------------------- 

[app.component.ts] 

export class AppComponent { 

  public data: Object[] = []; 

  public selectionOptions: SelectionSettingsModel; 

 

 

  ngOnInit(): void { 

    this.data = orderDetails; 

    this.selectionOptions = { type: 'Multiple', enableSimpleMultiRowSelection: true }; 

 

    document.getElementById('strikerow').addEventListener('click', function (args) { 

      var gridObj = document.getElementsByClassName('e-grid')[0]['ej2_instances'][0]; 

      var rows = gridObj.getSelectedRows(); 

      for (var i = 0; i < rows.length; i++) { 

        var tr = rows[i]; 

        for (var j = 0; j < tr['childElementCount']; j++) { 

          tr.children[j].classList.add('strikeOut'); 

        } 

      } 

    }); 

 

    document.getElementById('getselectedrow').addEventListener('click', function (args) { 

      var gridObj = document.getElementsByClassName('e-grid')[0]['ej2_instances'][0]; 

      var selectedrecord = gridObj.getSelectedRecords(); 

      console.log(selectedrecord); 

    }) 

  } 

} 

 

----------------------------------------------------- 

[index.html] 

<style> 

 

  .e-grid .strikeOut { 

 

    text-decoration: line-through; 

 

  } 

 

</style> 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/angular/documentation/api/grid#getselectedrecords 

Link: https://ej2.syncfusion.com/angular/documentation/api/grid#getselectedrows 

Regards, 

Thavasianand S. 

[Neo]

Hi Isanka, 

We have prepared a sample with your mentioned requirement in the following link. 

Link: https://stackblitz.com/edit/angular-s7teej-4cxprg?file=app.component.ts 

Refer the below code example. 

[app.component.html] 

<button id="strikerow">Strike out the selected row</button> 

<button id="getselectedrow">Get the selected record</button> 

 

<ejs-grid [dataSource]='data' #grid height='350' [selectionSettings]='selectionOptions'> 

  <e-columns> 

    <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 

    <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column> 

    <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'></e-column> 

    <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 

    <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'></e-column> 

    <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 

  </e-columns> 

</ejs-grid> 

 

-------------------------------------------------------------- 

[app.component.ts] 

export class AppComponent { 

  public data: Object[] = []; 

  public selectionOptions: SelectionSettingsModel; 

 

 

  ngOnInit(): void { 

    this.data = orderDetails; 

    this.selectionOptions = { type: 'Multiple', enableSimpleMultiRowSelection: true }; 

 

    document.getElementById('strikerow').addEventListener('click', function (args) { 

      var gridObj = document.getElementsByClassName('e-grid')[0]['ej2_instances'][0]; 

      var rows = gridObj.getSelectedRows(); 

      for (var i = 0; i < rows.length; i++) { 

        var tr = rows[i]; 

        for (var j = 0; j < tr['childElementCount']; j++) { 

          tr.children[j].classList.add('strikeOut'); 

        } 

      } 

    }); 

 

    document.getElementById('getselectedrow').addEventListener('click', function (args) { 

      var gridObj = document.getElementsByClassName('e-grid')[0]['ej2_instances'][0]; 

      var selectedrecord = gridObj.getSelectedRecords(); 

      console.log(selectedrecord); 

    }) 

  } 

} 

 

----------------------------------------------------- 

[index.html] 

<style> 

 

  .e-grid .strikeOut { 

 

    text-decoration: line-through; 

 

  } 

 

</style> 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/angular/documentation/api/grid#getselectedrecords 

Link: https://ej2.syncfusion.com/angular/documentation/api/grid#getselectedrows 

Regards, 

Thavasianand S. 

Your answer is most relevant to my requirement. But there are small improvements.

     1. I want to get striked records only.

     2. Another button for unstrike selected records.

Thank you very much.

[Thavasianand Sankaranarayanan]

Hi Isanka, 

As per your suggestion we have prepared a sample, which can able to do strike out, remove strike out and get the strike rows operation using the external button and sample can be viewed in the following link. 

Link: https://stackblitz.com/edit/angular-s7teej-4cxprg?file=app.component.ts 

Regards, 

Thavasianand S. 

[Neo]

Hi Isanka, 

As per your suggestion we have prepared a sample, which can able to do strike out, remove strike out and get the strike rows operation using the external button and sample can be viewed in the following link. 

Link: https://stackblitz.com/edit/angular-s7teej-4cxprg?file=app.component.ts 

Regards, 

Thavasianand S. 

There is a bug when performing second time after the 'Get the Striked Record'

Thank you.

[Thavasianand Sankaranarayanan]

Hi Isanka, 

Thanks for your update. 

We are able to reproduce the issue in the sample. So, We have modified the sample in the following ink. 

Link: https://stackblitz.com/edit/angular-s7teej-4cxprg?file=app.component.ts 

Regards, 

Thavasianand S. 

[Neo]

Hi Isanka, 

Thanks for your update. 

We are able to reproduce the issue in the sample. So, We have modified the sample in the following ink. 

Link: https://stackblitz.com/edit/angular-s7teej-4cxprg?file=app.component.ts 

Regards, 

Thavasianand S. 

Not working. I tried following code. Nothing striked but can see ''class="e-rowcell e-lastrowcell e-selectionbackground e-active strikeOut" class in the html source. I used direct Grid object. It is not the way, please let me know how to get grid by class name. (My view has more than one gird components)

@ViewChild('dataGrid') public dataGrid: Grid;

private findGridTdElement(strikeFlag, getStrikedFlag): any[] {

//var gridObj = document.getElementsByClassName('e-grid')[0]['ej2_instances'][0];

var strikedRows = [];

if (getStrikedFlag)

var rows = this.dataGrid.getRows();

else

var rows = this.dataGrid.getSelectedRows();

for (var i = 0; i < rows.length; i++) {

var tr = rows[i];

for (var j = 0; j < tr['childElementCount']; j++) {

if (tr.children[j].classList.contains('strikeOut') && strikeFlag) {

tr.children[j].classList.remove('strikeOut'); // Remove the strike row

}

else if (getStrikedFlag) {

if (tr.children[j].classList.contains('strikeOut')) {

strikedRows.push(this.dataGrid.currentViewData[i]); // Get the strike row detail

break;

}

else

break;

}

else if (!strikeFlag)

tr.children[j].classList.add('strikeOut'); // Enable strike row for selected record

}

}

this.dataGrid.dataBind();

return strikedRows;

}

[Thavasianand Sankaranarayanan]

Hi Isanka, 

 

Query 1: Nothing strike but can see “strikeOut" class in the html source 

 

We suspect that you may not add the CSS style for strikeout in the HTML page. So, please ensure on your end for the CSS style. 

 

 

<style>  

  

  .e-grid .strikeOut {  

  

    text-decoration: line-through;  

  

  }  

 

</style> 

 

  

Query 2: How to get grid by class name. (My view has more than one gird components) 

 

We have modified the sample in the following link. 

 

Link: https://stackblitz.com/edit/angular-s7teej-4cxprg?file=app.component.ts 

Refer the below code example. 

[app.component.ts] 

export class AppComponent { 

    public data: Object[] = []; 

    public selectionOptions: SelectionSettingsModel; 

    public flag; 

    public getstrikedflag = false; // 

    @ViewChild("grid") public grid: GridComponent; 

 

    ngOnInit(): void { 

 

        this.data = orderDetails; 

        this.selectionOptions = { type: 'Multiple', enableSimpleMultiRowSelection: true }; 

 

        //Get teh striked row detail from Grid 

        document.getElementById('getstrikedrow').addEventListener('click', function (args) { 

            this.getstrikedflag = true; 

            var strikerow = tdelementfind(this); 

            console.log(strikerow); 

            this.getstrikedflag = false; 

        }.bind(this)); 

 

        //Enable strike row for selected row in Grid 

        document.getElementById('strikerow').addEventListener('click', function (args) { 

            this.flag = false; 

            tdelementfind(this); 

        }.bind(this)); 

 

        // Remove the strike row in selected row in Grid 

        document.getElementById('removestrikerow').addEventListener('click', function (args) { 

            this.flag = true; 

            tdelementfind(this); 

            this.flag = false; 

        }.bind(this)); 

 

        // Common method for looping tr td elements of Grid 

        function tdelementfind(proxy) { 

             

            var strikedRows = []; 

 

            if (proxy.getstrikedflag) 

                var rows = proxy.grid.getRows(); 

            else 

                var rows = proxy.grid.getSelectedRows(); 

 

            for (var i = 0; i < rows.length; i++) { 

                var tr = rows[i]; 

                for (var j = 0; j < tr['childElementCount']; j++) { 

                    if (tr.children[j].classList.contains('strikeOut') && proxy.flag) { 

                        tr.children[j].classList.remove('strikeOut'); // Remove the strike row  

                    } 

                    else if (proxy.getstrikedflag) { 

                        if (tr.children[j].classList.contains('strikeOut')) { 

                            strikedRows.push(proxy.grid.currentViewData[i]); // Get the strike row detail 

                            break; 

                        } 

                        else 

                            break; 

                    } 

                    else if (!proxy.flag) 

                        tr.children[j].classList.add('strikeOut'); // Enable strike row for selected record 

                } 

            } 

            return strikedRows; 

        } 

 

    } 

} 

 

Regards, 

Thavasianand S. 

[Neo]

Hi Thavasianand,

I apologize for my fault. Now working perfectly. I have another queries to ask. In my gird, has checkbox column which is used as ng-template, 

<ng-template #gridCheckBoxTemplate let-data>

<ejs-checkbox [disabled]='apprColumnDisabled' [checked]='data.approval'

(change)="apprCheckBoxChanged($event, data)">

</ejs-checkbox>

</ng-template>

Query 1 :- In my scenario that striked record will change to non editable row. It can be done using 'CellEdit' event finding particular row and set to 'cancel = true'. But in the checkbox column, It can not be done. I want to know the way of doing the non editalbe to that checkbox cell.

Query 2 :- When we using the strike method to display as record has deleted that 'Update' tool bar button won't active (Because no changes has been done). I want to enable that 'Update' button.

Note: I'm using Batch Edit mode in the gird.

Highly appreciate your support.

Thank you.

[Thavasianand Sankaranarayanan]

Hi Neo, 

Query 1 : I want to know the way of doing the non editalbe to that checkbox cell. 

We have analyzed your query. Based on your requirement, you can disable editing for a particular column, by specifying columns.allowEditing to false. Please refer the code below, 

 

            <e-column width='120' [allowEditing]='false' textAlign='Right'></e-column> 

 

Documentation :  

https://ej2.syncfusion.com/angular/documentation/grid/edit/ 

https://ej2.syncfusion.com/angular/documentation/api/grid/editSettingsModel/#allowediting 

 

Query 2 : I want to enable that 'Update' button. 

To enable the ‘Update’ button, we suggest you to remove the “e-overlay” class from that div element. In the below code, we have enabled the ‘Update’ button in a button click. We suggest you to use the same codes to enable the ‘Update’ button whenever you needed. Please refer the code below, 

 

       <button (click)="click()">Enable Update</button> 

 

click(args){ 

  this.grid.toolbarModule.element.querySelector("div[title|='Update']").classList.remove("e-overlay") 

} 

 

 

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S. 

[Neo]

Hi Thavasianand,

My requirement has been achieved. Thank you for the support.

[Thavasianand Sankaranarayanan]

Hi Isanka, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.