On checking a checkbox select the row and also on clicking a row redirect to another page

[sunithra]

Hi

Two operation need to be done on the same GRID

1.on checking a checkbox in a grid select the row to delete the row 2. on clicking a row of the grid redirect to another page.

I have attached the screenshot of the requirement below

Thanks in Advance.

Thanks & Regards,

Sunithra.C

Attachment: screenshot_d229ffe9.zip

[Hariharan J V]

Hi Sunithra, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and prepared a sample based on it. Please find the below sample 

Sample: https://stackblitz.com/edit/angular-jntuwa?file=app.component.ts 

Query1: on checking a checkbox in a Grid select the row to delete the row 

 

We have invoked deleteRecord method in checkBoxChange  event of the Grid to achieve your requirement. You can delete the record by invoking deleteRecord method of the Grid. 

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

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

Query2: on clicking a row of the Grid redirect to another page 

We have achieved this requirement in rowSelecting event of the Grid. In that event we have opened the link for another page. 

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

Please get back to us if you need further assistance 

Regards, 

Hariharan 

[sunithra]

Hi 

Thanks and Now it is working fine.

Regards,

Sunithra.C

[Hariharan J V]

Hi Sunithra, 

Thanks for your update.  

  

We are happy to hear that the provided solution helped you.   

  

Please contact us if you need any further assistance. As always, we will be happy to assist you.   

  

Regards, 

Hariharan 

[sunithra]

Hi

(rowSelecting) = select(event) function is not working only in IPAD   

Regards ,

Sunithra.C

[Hariharan J V]

Hi sunithra, 

We have validated your query and tried to reproduce the reported issue with our end(chrome and safari browser tested). Please find the below details 

IPad version: 9.3.5(13G36) 

Model:  MC769HN/A 

Chrome version: 63.0.3239.73 

But it is unsuccessful and working in fine in our end. Could you please share the following details: 

1) share the full Grid code 

2) Share the EJ2 version details. 

3) Share the browser and IPad details. 

4) If possible, please reproduce the issue in our given sample. 

Please get back to us with the above details so that it will help us provide you a solution as early as possible. 

Regards, 

Hariharan 

[sunithra]

Hi

Everything is working fine onlything is onclicking anywhere in row except checkbox column the checkbox should not checked. 

we are showing a popup on selecting a row at that time the checkbox is checked

can you please help us to fix this

I have attached image with this kindly look at it

Thanks in advance

Regards

Sunithra.C

Attachment: screenshotlocalhost42002019.06.03112833.jpg_3f7d3eaa.zip

[Manivel Sellamuthu]

Hi Sunithra, 

Thanks for your update. 

We have validated your requirement. You can prevent the rowselect by giving “args.cancel” as true in rowSelecting event of the Grid. 

Please find the below code snippet and sample for more information. 

App.cmponent.html 

<div class="control-section"> 

    <ejs-grid [dataSource]='data' allowPaging='true' [enableHover]="false" [allowSelection]="true" [selectionSettings]="selectOptions" (rowSelecting)="select($event)"> 

    . . . 

    </ejs-grid> 

</div> 

 

App.component.ts         

select (args) { 

        if(parentsUntil(args.target, 'e-row')&&!(parentsUntil(args.target as Element, 'e-gridchkbox'))){   //checking the target is checkbox column or not 

          args.cancel = true; 

        window.open("https://www.syncfusion.com", "_self"); 

      } 

    } 

Sample: https://stackblitz.com/edit/angular-143733?file=app.component.ts 

Documentation: https://ej2.syncfusion.com/angular/documentation/api/grid/#rowselecting 

Please get back to us if you need further assistance. 

Regards, 

Manivel