Actually I figure out how to use it. The solution is shown below:
- Configure infuser to use template path under a common location for templates, and in sub-folder matching page name without extension:
infuser.defaults.templateSuffix = ".tmpl.html"; infuser.defaults.templateUrlRoot = "/templates/modules"; infuser.defaults.templateUrl = infuser.defaults.templateUrlRoot + '/' + window.location.pathname.replace(/\.[^\.\/]+$/, "").substr(1);
- Set the rowTemplate in gridOptions to an ID that does not exists in page on another element
this.gridOptions = { rowTemplate = 'myTemplate' }
Create a file in the folder where the templates are looked up for, and name it as the template name setup in rowTemplate and there just define teh actual template markup, without enclosing ... tags In my case, the template file is /template/modules/mypage1/myTemplate.tmpl.html
VERY IMPORTANT !!! Make sure you don't have any element on page with ID ='myTemplate'. If you do, template engine will consider that element the template and will try to use it, instead of loading the actual template file
That's it.
The problem I faced initially is I had another element on page with same name as template name. That's why the template engine didn't picked up the actual template file.