We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Strike selected row

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.

13 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team June 28, 2019 01:06 PM UTC

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. 


Refer the help documentation. 


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

Regards, 
Thavasianand S. 



NE Neo replied to Thavasianand Sankaranarayanan July 1, 2019 05:21 AM UTC

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. 


Refer the help documentation. 


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,

https://cdn.extendoffice.com/images/stories/doc-excel/auto-strikethrough/doc-auto-strikethrough-5.png

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.


TS Thavasianand Sankaranarayanan Syncfusion Team July 2, 2019 08:59 AM UTC

Hi Isanka, 

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


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. 



Regards, 
Thavasianand S. 



NE Neo replied to Thavasianand Sankaranarayanan July 2, 2019 12:16 PM UTC

Hi Isanka, 

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


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. 



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.



TS Thavasianand Sankaranarayanan Syncfusion Team July 3, 2019 01:38 PM UTC

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. 


Regards, 
Thavasianand S. 



NE Neo replied to Thavasianand Sankaranarayanan July 3, 2019 01:44 PM UTC

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. 


Regards, 
Thavasianand S. 


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

Thank you.


TS Thavasianand Sankaranarayanan Syncfusion Team July 4, 2019 05:46 AM UTC

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. 


Regards, 
Thavasianand S. 



NE Neo replied to Thavasianand Sankaranarayanan July 4, 2019 07:22 AM UTC

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. 


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;
}


TS Thavasianand Sankaranarayanan Syncfusion Team July 5, 2019 12:48 PM UTC

Hi Isanka, 
 
Query 1: Nothing strike but can seestrikeOut" 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. 
 

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. 



NE Neo July 8, 2019 12:30 PM UTC

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.


TS Thavasianand Sankaranarayanan Syncfusion Team July 9, 2019 09:03 AM UTC

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 :  
 
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. 



NE Neo July 17, 2019 08:45 AM UTC

Hi Thavasianand,

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


TS Thavasianand Sankaranarayanan Syncfusion Team July 18, 2019 08:47 AM UTC

Hi Isanka, 
 
Thanks for your update. 
 
We are happy that the problem has been resolved at your end. 
 
Regards, 
Thavasianand S.  


Loader.
Live Chat Icon For mobile
Up arrow icon