BoldSignEffortlessly integrate e-signatures into your app with the BoldSign API. Create a sandbox account!
Hi Niko,
For your kind information, we can get the actual row with the help of any data returned from the template. Please find the below code snippet to get the actual row details in the template click event.
<head> <style> .TempField { background-image: url(folder-open.png); margin-left: 20px; } </style> </head> <body> <script type="text/x-jsrender" id="customTemplate"> <div unselectable='on'> <img class="{{:#data['TempField']}}" onclick="onclickEvent({{:taskID}});"/> </div> </script> <script type="text/javascript"> function onclickEvent (rowIndex) { var treeObj = $("#TreeGridContainer").data("ejTreeGrid"); var record = $.grep(treeObj.model.flatRecords, function(e) { return e.taskID == rowIndex; }); record[0].taskName = "edited"; var index = treeObj.model.flatRecords.indexOf(record[0]); treeObj.refreshRow(index); } $(function() { $("#TreeGridContainer").ejTreeGrid({ //… }); }); </script> </body> |
We have also prepared a sample based on this and you can find the sample under the following location.
Sample: http://www.syncfusion.com/downloads/support/forum/119562/ze/TemplateColumn1767786163
Is this your requirement? If not please revert back to us with replication procedure alongwith your sample.
Regards,
Mahalakshmi K.
Hi Niko,
For your kind information, we can get the actual row with the help of any data returned from the template. Please find the below code snippet to get the actual row details in the template click event.
<head>
<style>
.TempField {
background-image: url(folder-open.png);
margin-left: 20px;
}
</style>
</head>
<body>
<script type="text/x-jsrender" id="customTemplate">
<div unselectable='on'>
<img class="{{:#data['TempField']}}" onclick="onclickEvent({{:taskID}});"/>
</div>
</script>
<script type="text/javascript">
function onclickEvent (rowIndex) {
var treeObj = $("#TreeGridContainer").data("ejTreeGrid");
var record = $.grep(treeObj.model.flatRecords, function(e) {
return e.taskID == rowIndex;
});
record[0].taskName = "edited";
var index = treeObj.model.flatRecords.indexOf(record[0]);
treeObj.refreshRow(index);
}
$(function() {
$("#TreeGridContainer").ejTreeGrid({
//…
});
});
</script>
</body>
We have also prepared a sample based on this and you can find the sample under the following location.
Sample: http://www.syncfusion.com/downloads/support/forum/119562/ze/TemplateColumn1767786163
Is this your requirement? If not please revert back to us with replication procedure alongwith your sample.
Regards,
Mahalakshmi K.
Hi Niko,
For your kind information, we can get the actual row with the help of any data returned from the template. Please find the below code snippet to get the actual row details in the template click event.
<head>
<style>
.TempField {
background-image: url(folder-open.png);
margin-left: 20px;
}
</style>
</head>
<body>
<script type="text/x-jsrender" id="customTemplate">
<div unselectable='on'>
<img class="{{:#data['TempField']}}" onclick="onclickEvent({{:taskID}});"/>
</div>
</script>
<script type="text/javascript">
function onclickEvent (rowIndex) {
var treeObj = $("#TreeGridContainer").data("ejTreeGrid");
var record = $.grep(treeObj.model.flatRecords, function(e) {
return e.taskID == rowIndex;
});
record[0].taskName = "edited";
var index = treeObj.model.flatRecords.indexOf(record[0]);
treeObj.refreshRow(index);
}
$(function() {
$("#TreeGridContainer").ejTreeGrid({
//…
});
});
</script>
</body>
We have also prepared a sample based on this and you can find the sample under the following location.
Sample: http://www.syncfusion.com/downloads/support/forum/119562/ze/TemplateColumn1767786163
Is this your requirement? If not please revert back to us with replication procedure alongwith your sample.
Regards,
Mahalakshmi K.
As I can apply this example with reactjs? invoking a function within the component/** Dependencias **/var React = require('react');var ReactDOM = require('react-dom');var ejTreeGrid = React.createClass({componentDidMount: function () {var template = '<script type="text/x-jsrender" id="customColumnTemplate">';template += '<button id="btnSelectTree" class="btn ink-reaction btn-raised btn btn-primary" style="height:30px;width:30px;margin:0px;"> ';template += '<span class=" mdi mdi-check"></span>';template += '</button> ';template += '</script>';$(this.refs.templateEJTree).append(template);var columnas=[];columnas.push({field:'Campo1', headerText:'Campo 1'});columnas.push({field:'Campo2', headerText:'Campo 2'});columnas.push({ field: 'ID', headerText: 'Tools', isTemplateColumn: true, templateID: "customColumnTemplate", width: "45" });var datos=this.props.Datos;$(_this.refs.gridData).ejTreeGrid({dataSource: datos,allowColumnResize: true,allowSorting: true,allowSelection: true,childMapping: "Child",enableVirtualization: true,treeColumnIndex: 0,isResponsive: true,columns:columnas,enableAltRow : false});},render: function () {return (<div className="col-md-12"><div className="row grid" ref="gridData"></div><div ref="templateEJTree"></div></div>);}module.exports = ejTreeGrid;