We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. jQuery
  4. How to update row data manually

How to update row data manually

Hi

I am implementing column templates which include custom data editing features. 

Template:
    <div unselectable='on'>
        <img class="clickable" src="{{*: iconPath}}" onclick="EditorTreeGrid.OnRowClick({{:index}});" title="" alt="" width="16" height="16" style="display: inline-block;" />
        <span style="display: inline-block;">{{:reservedTo}}</span>
    </div>

EventHandler:
TopicTreeGrid.OnRowClick = function (rowIndex) {
    myObj.ejTreeGrid.model.flatRecords[rowIndex].myFoo = myBar;
    myObj.ejTreeGrid.refreshRow(rowIndex);
}

So problem is that the "index" in template refers to "dataSource index". So data is setted to right places. But... "refreshRow" wants index of row in view. If this order match then this works but if rows are ordered by user then not. 

Possible fixes:
-Get "real row index" from template.
-Convert "dataSource row index" to "real row index"
-Or maybe whole start point is wrong (trying to set directly to flatRecords and then refresh). In any case refreshRow is not optimal since it just rerender row but if there is any filtering or ordering by changing column, its not gona effect.

So in big picture I just want change small part of data from code. 
Note that I am using row virtualization.


7 Replies
MK Mahalakshmi Karthikeyan Syncfusion Team July 10, 2015 12:38 PM UTC

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.


AJ Alexander Jimenez replied to Mahalakshmi Karthikeyan July 21, 2016 04:22 PM UTC

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;

JS Jonesherine Stephen Syncfusion Team July 22, 2016 09:43 AM UTC

Hi Alexander, 
At present there is no support for React JS in Tree Grid. For this we have already logged a feature request regarding this. 
A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 
 
Please let us know if you require further assistance on this.
Regards, 
Jone sherine P S 


JG Jeff Geer February 7, 2017 05:36 PM UTC

Mahalakshmi,

I am trying the example with version 14.4.20, but treeObj doesn't appear to have a refreshRow() function to call.  Has the API changed from 13.1.0.21?

Thank you,

Jeff geer

JS Jonesherine Stephen Syncfusion Team February 8, 2017 04:07 PM UTC

Hi Jeff, 
There is no modifications in refreshRow() public method after 13.1.0.21 release. We have prepared the sample in version 14.4.0.20 for your reference. 
Please find the sample from below location 
Still the problem exists at your end please share us your sample along with the replication procedure. This would be helpful for us to serve you better. 
Regards, 
Jone sherine P S 


VI Vincent replied to Alexander Jimenez April 2, 2018 01:09 PM UTC

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;

Hello

PE Punniyamoorthi Elangovan Syncfusion Team April 3, 2018 12:37 PM UTC

Hi Vincent, 
Thank you for your update. 
We have analyzed your attached code snippet and your requirement. We are unable to understand your requirement properly, could you please share more details about the requirements , it will helpful for us to serve you better. We have prepared the simple ReactJS sample with template column support. Please find the sample link below. 
Please let us know if you require further assistance on this. 
Regards, 
Punniyamoorthi 


Loader.
Live Chat Icon For mobile
Up arrow icon