I am using laravel blade to render syncfusion grid , getting issues with column template

[Abhijit]

My Code 

<script type="text/javascript">
	$.ajaxSetup({
	headers: {
	'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	}
	});
	$(function () {
	jsonurl = 'http://admin.prakalpmitram.in/jsondata/rolelist'
	var roleGrid_editSettings = 'allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "batch", showConfirmDialog: false' ;
	var roleGrid_jsondata = [];
	$.ajax({
	'async': false,
	'type': "GET",
	'global': false,
	'dataType': 'json',
	'url': jsonurl ,
	'success': function (data) {
	roleGrid_jsondata = data;
	}
	});
	$('#roleGrid').ejGrid({
	dataSource: roleGrid_jsondata ,
	allowPaging: true,
	allowSorting: true,
	isResponsive: true,
	allowFiltering: true,
	gridLines: 'Horizontal',
	showColumnChooser: false,
	selectionType: "single",
	allowGrouping: false,
	pageSettings: { pageSize : 15 },
	editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "batch", showDeleteConfirmDialog:true },
	toolbarSettings: { showToolbar: true,
	toolbarItems: [ ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel, ej.Grid.ToolBarItems.ExcelExport , ej.Grid.ToolBarItems.PrintGrid, 'search' ] },
	filterSettings: { type: 'Menu' },
	filterSettings: { filterType: "excel" },
	create: "ejgridcreate",
	columns: [
	{ field: 'id', headerText: 'ID' , isPrimaryKey: true , width: 5},
	{ field: 'name', headerText: 'Name' , width: 15 },
	{ field: 'users_count', headerText: 'Users in Role' , width: 15 , isPrimaryKey: true ,
	template:
	"<a rel='nofollow' href='a'></a> ${users_count}"
	, textAlign: 'Center' },
	{ field: 'premission_count', headerText: 'Permissions in Role' , width: 15 , template: "#permissionTemplate" , textAlign: 'Center'},
	],
	<script id="userTemplate" type="text/x-template"> <div > <a rel='nofollow' href="https://www.google.com/search?q=${users_count}" target="_blank" > ${users_count} </a> </div> </script>

Attachment: gridissue.jpg_d0a59ab2.zip

[Sivaranjani Rajasekaran]

Hi Abhijit,

Greetings from Syncfusion support,

We reviewed your query, and the code sample provided. We found that in your Grid column definition, you are using two different templates for users_count and permission_count.

In the users_count template, the URL was not specified correctly, and the permission_count template was missing the corresponding script. Additionally, there was a mismatch in the script ID for the permission_count template. You mentioned the script ID as userTemplate instead of permissionTemplate.

Code Snippet : 

{ field: 'premission_count', headerText: 'Permissions in Role' , width: 15 , template: "#permissionTemplate" , textAlign: 'Center'},

<script id="userTemplate" type="text/x-template">

           <div >

                       <a rel='nofollow' href="https://www.google.com/search?q=${users_count}" target="_blank"  >

                         ${users_count}

                       </a>

                   </div>

                 </script>

Please ensure that the template reference matches the script ID. This mismatch is the reason the template did not render properly. The script ID and the template reference must be the same.

Code Snippet : 

{ field: 'premission_count', headerText: 'Permissions in Role' , width: 15 , template: "#permissionTemplate" , textAlign: 'Center'},

<script id="permissionTemplate" type="text/x-template">

           <div >

                       <a rel='nofollow' href="https://www.google.com/search?q=${users_count}" target="_blank"  >

                         ${users_count}

                       </a>

                   </div>

                 </script>

For more detailed information about the colum rempalte please visit the documentation link below:

Documentation Link : Column template in EJ2 JavaScript Grid control | Syncfusion

Please feel free to reach out if you need further assistance.

Regards,

Sivaranjani R.

[Abhijit]

Now the rel='nofollow' href link is working but the value of email is not getting passed.

<script id="LinkTemplate" type="text/x-template">
	<div >
	<a rel='nofollow' rel='nofollow' href="https://www.google.com/search?q=${email}" target="_blank" >
	${email}
	</a>
	</div>
	</script>
	<div id="empGrid"></div>

<script type="text/javascript">
	$.ajaxSetup({
	headers: {
	'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	}
	});
	$(function () {
	jsonurl = 'http://admin.prakalpmitram.in/jsondata/userlist'
	var empGrid_editSettings = 'allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "batch", showConfirmDialog: false' ;
	var empGrid_jsondata = [];
	$.ajax({
	'async': false,
	'type': "GET",
	'global': false,
	'dataType': 'json',
	'url': jsonurl ,
	'success': function (data) {
	empGrid_jsondata = data;
	}
	});
	$('#empGrid').ejGrid({
	dataSource: empGrid_jsondata ,
	allowPaging: true,
	allowSorting: true,
	isResponsive: true,
	allowFiltering: true,
	gridLines: 'Horizontal',
	showColumnChooser: false,
	selectionType: "single",
	allowGrouping: false,
	pageSettings: { pageSize : 15 },
	editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "batch", showDeleteConfirmDialog:true },
	toolbarSettings: { showToolbar: true,
	toolbarItems: [ ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel, ej.Grid.ToolBarItems.ExcelExport , ej.Grid.ToolBarItems.PrintGrid, 'search' ] },
	filterSettings: { type: 'Menu' },
	filterSettings: { filterType: "excel" },
	create: "ejgridcreate",
	columns: [
	{ field: 'id', headerText: 'ID' , isPrimaryKey: true , width: 5},
	{ field: 'name', headerText: 'Name' , width: 15 },
	{ field: 'email', headerText: 'Email' , width: 15 },
	{ field: 'email', headerText: 'Permissions in Role' , width: 15 , textAlign: 'Center' ,template: "#LinkTemplate" },
	{ field: 'user_status', headerText: 'Status' , width: 20 , editType: "dropdownedit" , dataSource : [ { text: "active", value: "active" }, { text: "disabled", value: "disabled" }] }
	],
	recordDoubleClick: function (args) {
	} ,
	queryCellInfo: function (args) {
	//Add attributes to cells in queryCellInfo
	$(args.cell).attr({
	"data-toggle": "tooltip",
	"data-container": "body",
	"title": args.data[args.column.field],
	"data-value": args.data[args.column.field]
	});
	},
	dataBound: function (args) {
	//Render tooltip in dataBound event.
	// $("[data-toggle=tooltip]").tooltip();
	},
	rowSelected: function (args) {
	},
	beforeBatchDelete: function (args) {
	var delete_url = 'http://admin.prakalpmitram.in/user' + '/' + args.rowData['id'] ;
	grid_delete(delete_url);
	refreshGrid('empGrid',jsonurl);
	},
	beforeBatchSave : function (args) {
	addedLines = args.batchChanges.added ;
	for (var i = 0; i < addedLines.length; i++)
	{
	grid_insert(addedLines[i],'http://admin.prakalpmitram.in/user')
	refreshGrid('empGrid',jsonurl);
	}
	updatedLines = args.batchChanges.changed ;
	for (var i = 0; i < updatedLines.length; i++)
	{
	var update_url = 'http://admin.prakalpmitram.in/user' + '/' + updatedLines[i]['id'] ;
	grid_update(updatedLines[i],update_url)
	refreshGrid('empGrid',jsonurl);
	}
	refreshGrid('empGrid',jsonurl);
	} ,
	actionComplete: function(args){
	if(args.requestType ==='batchsave'){
	// refreshGrid('empGrid',jsonurl) ;
	}
	} ,
	toolbarClick: function (e) {
	this.exportGrid = this["export"];
	if (e.itemName == "Excel Export") {
	var gridObj = $("#empGrid").data("ejGrid");
	JSONToCSVConvertor(gridObj._dataManager.dataSource.json,'export_csv', true);
	e.cancel = true;
	}
	else if (e.itemName == "Word Export") {
	this.exportGrid(window.baseurl + 'api/grid/WordExport')
	e.cancel = true;
	}
	else if (e.itemName == "PDF Export") {
	this.exportGrid(window.baseurl + 'api/grid/PdfExport')
	e.cancel = true;
	}
	}
	});
	});
	</script>

[Abhijit]

Screen 

Attachment: abc_5c0ee336.zip

[Pon Selva Jeganathan]

Hi Abhijit,

We are able to replicate the issue(value of email is not showing, when using hyper link in a template column) at our end when using your shared code example. To resolve this issue, we recommend using the following code snippet, which will ensure that the email value is displayed correctly:

 

Your code:

 

<script id="LinkTemplate" type="text/x-template">

<div >

<a rel='nofollow' rel='nofollow' href=https://www.google.com/search?q=${email} target="_blank" >

${email}

</a>

</div>

</script>

 

Modified code:

 

<script id="LinkTemplate" type="text/x-template">

 

<div >

<a rel='nofollow'  rel='nofollow' href=https://www.google.com/search?q={{:email}} target="_blank" >

{{:email}}

</a>

</div>

</script>

Kindly get back to us for further assistance.

Regards,

Pon selva

[Abhijit]

Hi,

Updated code 

<script id="LinkTemplate" type="text/x-template">

<div >

<a rel='nofollow' rel='nofollow' href="https://www.google.com/search?q=email" target="_blank" >

{{:email}}</a>

</div>

</script>

Error

[previous exception] [object] (ParseError(code: 0): syntax error, unexpected token \":\" at /var/www/prakalpmitram.eproplus.in/storage/framework/views/041f5be03db6b86a7480cef4529d5a6d.php:47)

[stacktrace]

Is there any javascript library I need to include ?

[Pon Selva Jeganathan]

Hi Abhijit,

We have created a sample using column templates, but we were unable to replicate the issue you reported.

Refer to the below sample,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Ej1col_template851260292

In the meantime, we would like to inform you about our EJ1 products. Since the EJ1 product is retired, we have limited support for it.

We have deprecated our EJ1 products with its Nugets and NPM Packages. So, we don't publish any new builds & packages for this product here after. We would like to let you know EJ1 is now considered a retired product. Unfortunately, we will no longer be able to provide development support for this product. This means that we cannot offer bug fixes or feature implementations for EJ1 Please refer to the following link for a list of our retired products: https://help.syncfusion.com/common/essential-studio/essential-studio-retired-products

We retire products in order to maintain industry standards. It is highly recommended that you migrate to next generation JS controls. We also would like to let you know about our next generation JavaScript product - Essential JS 2, in case if you are not aware of it. Essential JS 2 is fully re-written to be modular, responsive. This new-generation data grid control offers several benefits over our existing EJ1 Grid control like better performance, touch friendliness, light weight, and much more. JS2 DataGrid offers 2–3x improved performance in many scenarios.  The Essential JS 2 documentation is regularly updated and maintained.

     

We suggest you look into our following product page for more details.    

https://www.syncfusion.com/products/essential-js2     

     

Demo page for ej2 Grid    

https://ej2.syncfusion.com/demos/#/material/grid/grid-overview

Refer to the below ej2 Grid column template documentation,

https://ej2.syncfusion.com/documentation/grid/columns/column-template

Kindly get back to us for further assistance.

Regards,

Pon selva