Grid checkbox selection how to display in custom ng-template #rowTemplate

I'm working with Angular Grid for some UI design I've to add the custom row-template. 

Question: How do I add checkbox selection functionality to a custom rowTemplate? 


Normally it'll just be:

<ejs-grid [dataSource]='data' height='315px'>
   <e-columns>
     <e-column type='checkbox' width='50'></e-column>
     <e-column field='OrderID' headerText='Order ID' textAlign='Right'></e-column>
            ...
     <e-column field='lastColumn' headerText='Actions' textAlign='Right'></e-column>
   <e-columns>
</ejs-grid>

And this will display a checkbox in each of the row. Clicking on the main column would select all the row checkboxes and the entire functionality that it carries.


But in my case this is a summary of my code: 

<ejs-grid [dataSource]='data'>
   <e-columns>
     <e-column type='checkbox' width='50'></e-column>
     <e-column field='OrderID' headerText='Order ID' textAlign='Right'></e-column>
            ...
     <e-column field='lastColumn' headerText='Actions' textAlign='Right'></e-column>
   </e-columns>
  <ng-template #rowTemplate let-data>
    <tr>
      <td>//the checkbox needs to appear here</td>
      <td>//html ui for order id</td>
       ...  
     <td>//html for last column</td>
    </tr>
  </ng-template>
 </ejs-grid>

So, how can I add up checkbox in the custom <ng-template #rowTemlate> with its functionality of selection/deselection when the header checkbox is selected.


1 Reply

HS Hemanthkumar S Syncfusion Team November 6, 2023 03:02 PM UTC

Hi Moiz,


Greetings from Syncfusion support.


From your shared information, we understand that you want to select the row template based on the header checkbox. Currently, the Syncfusion EJ2 Grid Row template feature doesn’t have support in combination with selection. You can find more information about this limitation in the Row template feature documentation.


Row template feature limitations: https://ej2.syncfusion.com/angular/documentation/grid/row/row-template#limitations


Regards,

Hemanth Kumar S


Loader.
Up arrow icon