Enabling Multiple Rows Selection in Grid using Row Template

Owned by Lakshminarayanan1 S CTOO (Unlicensed)
Last updated: Sept 23, 2020


  • The view type of the widget must be Live Scroll Grid (List), Live Scroll Grid with Cache (Paging), Classic (Simple Grid) or Group (Single Level) grid. The template does not apply for Advanced Group (multi-level) grid.
  • The following steps must be performed for customizing rows per your preference. Only the code for the template configuration will change per your requirements.

Perform the following steps to create a Row Template:

  1. On the home page of Canvas Studio, click Create > Template.



  2. In the Template form, provide the following information:



Screen ItemWhat to provide
Template IDProvide a unique ID for the Template. For example, ACCOUNT_ROW_TEMPLATE.
Template DescriptionSmall description about the Template. For example, ACCOUNT ROW TEMPLATE.
Channel Id

Indicates for which channel the template is applicable for. The options available are:

Do you wish to configure a common template for all channels?

Yes: This template is applicable to all the following channels.

  • Desktop
  • Mobile
  • Tablet

No: Appropriate channel must be selected for the template. 

Channel can be selected for each Template Config within the same Template ID.

Template Config

You can directly enter the HTML DOM (codes) of the template in this field. Alternatively, define the HTML/CTTPL file of the template in the WAR folder (e.g. ctmodelhouse/templates) and provide the path to the template in this field.

If you apply the row template on a grid app (widget) and to use a checkbox for enabling the selection of all the rows present in the grid app, provide the following code in the Template Config field: 

<span 
   data-ct-input="rowselection-col">
<input 
     type="checkbox" 
     data-itemAll-checker="true"/>
</span>

If you apply the row template on a grid app (widget) and to use a checkbox for enabling individual row selection in the grid app, provide the following code in the Template Config field:

On enabling individual row selection, each and every row will have a checkbox, adjacent to its left side. 

<input 
    type="checkbox" 
    data-item-id="ct_rowSelector" 
    data-item-checker="true" />

Example for HTML DOM:

<TABLE 
      class="responsive">
      <span 
         data-ct-input="rowselection-col"> 
      <input 
          type="checkbox" 
          data-itemAll-checker="true"/> 
      </span>

      {{#each record}}

      <TR>
	  <TH colspan="8">
		
      <input 
          type="checkbox" 
          data-item-id="ct_rowSelector" 
          data-item-checker="true" /> 

       <U> rowIndex :{{inc rowIndex}} </U>
		  totalRecords:{{totalRecords}}
	   </TH>
       </TR>
       <TR>
       <TH>COL_ID </TH>
       <TD>{{COL_ID}} </TD>
       <TH>FLD_GROUPABLE_IND </TH>
       <TD>{{FLD_GROUPABLE_IND}} </TD>
       <TH>POSITION_FIXED </TH>
       <TD>{{POSITION_FIXED}} </TD>
       <TH>cssClass </TH>
       <TD>{{cssClass}} </TD>
       </TR>
       <TR>
       <TH>VALUE </TH>
       <TD>{{VALUE}}</TD>
       <TH>VISIBLE_IND </TH>
       <TD>{{VISIBLE_IND}} </TD>
       <TH>colIndex </TH>
       <TD>{{colIndex}} </TD>
       <TH>key </TH>
       <TD>{{key}} </TD>
       </TR>
       {{/each}}
</TABLE>

Example for template path:

templates/account_row_template_code.cttpl 
# The CTTPL file must contain the code given in the example for HTML DOM.
SubmitSubmit the configuration of Template.

Apply the Row Template to the Grid App (Widget)

Open the grid app (widget) in the App Designer and navigate to the row configuration and select the Row Template you want to apply as shown in the following screen shot (Row Template > Enable Row Template toggle > Select the Row Template):



  1. After applying the ACCOUNT_ROW_TEMPLATE to the ACCOUNT SUMMARY DETAILS grid app (widget), clickicon to save the app. 



Let's assume that the ACCOUNT SUMMARY DETAILS app is mapped to the ACCOUNT SUMMARY workspace. By clicking the checkbox, on the left side, beneath the app title, all the rows of the grid app will get selected. The following screen shot serves as a good illustration of the output in the functional application, Modelhouse:Â