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.
Unfortunately, activation email could not send to your email. Please try again.

How to update row data manually

Thread ID:

Created:

Updated:

Platform:

Replies:

119562 Jul 9,2015 07:32 AM Apr 3,2018 08:37 AM JavaScript 7
loading
Tags: ejTreeGrid
Niko Autio
Asked On July 9, 2015 07:32 AM

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.


Mahalakshmi Karthikeyan [Syncfusion]
Replied On July 10, 2015 08:38 AM

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.


Alexander Jimenez
Replied On July 21, 2016 12:22 PM

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;

Jonesherine Stephen [Syncfusion]
Replied On July 22, 2016 05:43 AM

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 


Jeff Geer
Replied On February 7, 2017 12:36 PM

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

Jonesherine Stephen [Syncfusion]
Replied On February 8, 2017 11:07 AM

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 


Vincent
Replied On April 2, 2018 09:09 AM

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

Punniyamoorthi Elangovan [Syncfusion]
Replied On April 3, 2018 08:37 AM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;