First off, I'm new to igGrid and I'm just doing some general investigation to see if it will meet our needs. We are already Infragistics customers, I'm just looking at IgniteUI for the first time.  I've searched the forums and I don't see anything similar. 

I'm using IgniteUI 17.2 and the latest ignite-uireact.js

I'm trying to show a custom control as the view on a grid.  I know you have this for editors, but the only way I've seen for the view is via the template system.  All the responses I've seen say to use the template system.  So, I want to put a React control into the template.

I grabbed a react control from the web and proved that it works on a general page, and also I embedded it in a different grid control (like I said, we're evaluating).

Then I created an igGrid, populate it with some fake data.  And if you look at the 'countdown' column in the below code, I put xxx in for the template.  This is what I'm trying to figure out.  I tried putting in all different versions of the react control definition as string and it would always error out saying it didn't know what the control was (ie the react-dom engine seems like it was not run on the template).  I also tried creating a function that returned the innerHTML of the control (second block below shows this function and the error I got).

So, Is there a way I can put a custom react control as the view for a cell if the template system doesn't auto-render the react control?

const React = require('react');
const ReactCountdownClock = require('react-countdown-clock');

export default class IgniteGrid extends React.Component {

    constructor(props, context) {
        super(props, context);

        this.state = {};
        this.state.view = this.createRows(1000);
    }

    createRows(numberOfRows) {
        let rows = [];
        for (let i = 1; i < numberOfRows; i++) {
            rows.push({
                id: i,
                icon: ['https://www.google.ca/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png', 'favicon.ico', 'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678085-house-128.png', 'https://littlefrog.shop/data/include/cms/ca.png'][Math.floor((Math.random() * 3) + 1)],
                title: 'Title ' + i,
                count: i * 100,
                countdown: Math.floor(Math.random() * 100),
                priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)],
                issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)],
                startDate: this.getRandomDate(new Date(2016, 3, 1), new Date()),
                endDateTime: this.getRandomDate(new Date(2016, 3, 1, 11, 11, 11), new Date()),
                isAwesome: [true, false][Math.floor((Math.random())*2)]
            });
        }

        return rows;
    }

    getRandomDate (start, end) {
        return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString();
    }
        render() {
        return(
            <IgGrid
                id='grid123'
                ref='grid123'
                dataSource={this.state.view}
                autoGenerateColumns={false}
                primaryKey='id'
                autoCommit={true}
                height='800px'
                width='100%'
                gridHeight= '100%'
                gridWidth='100%'
                virtualization={true}
                virtualizationMode='continuous'
                columns={[
                    { headerText: 'ID', key: 'id', dataType:'number', width: '100px' },
                    { headerText: 'Icon', key: 'icon', dataType:'string', width: '100px', template: '<img style=\'height:50px;\' src=\'${icon}\'/>', readOnly: true },
                    { headerText: 'Title', key: 'title', dataType:'string', width: '200px' },
                    { headerText: 'Count', key: 'count', dataType:'number', width: '200px'},
                    { headerText: 'CountdownTimer', key: 'countdown', dataType:'number', width: '200px', template: ??? },
                    { headerText: 'Priority', key: 'priority', dataType:'string', width: '200px' },
                    { headerText: 'Issue Type', key: 'issueType', dataType:'string', width: '200px' },
                    { headerText: 'Start Date', key: 'startDate', dataType:'date', format: 'date', width: '150px' },
                    { headerText: 'End Date Time', key: 'endDateTime', dataType:'date', format: 'dateTime', width: '250px' },
                    { headerText: 'IsAwesome', key: 'isAwesome', dataType:'bool', format: 'checkbox', columnCssClass: 'checkbox'}
                ]}
                />
        );
    }
}

(Code to render a React control)

    buildTemplateForTimer(countdown) {
        let div = document.createElement('div');
        let bob = ReactDOM.render(<ReactCountdownClock seconds={60}
                                                       color="#535300"
                                                       alpha={1.0}
                                                       size={30}
                                                       paused={false}
                                                       height='30px'
                                                       style={{height: '30px'}}/>, div);


        return bob.innerHTML;
    }

Unfortunately this gave me a "Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded" error in the console.