This is a question that has come up before, and its a hard one to answer. As you are aware, we provide API hooks to give you complete control over the contents of each cell. There are some easy way to do this - for example, you can simply return some custom HTML in a labelFunction, and even make it interactive, like we show in this blog post: http://blog.htmltreegrid.com/post/How-to-add-custom-interactive-html-from-a-labelFunction.aspx 

However, the question becomes, how about when you have to use custom third party components. While we cannot guarantee the product will work with every single third party component, nor can we offer support for components that we have not authored, we certainly can show you how this can be done with a sample component. For this example, we are going to use the powerful and very popular select2 jquery auto complete component. 

Let's dive into the code:

/**
 * Flexicious
 * Copyright 2011, Flexicious LLC
 */
(function(window)
{
    "use strict";
    var AutoCompleteRenderer, uiUtil = flexiciousNmsp.UIUtils, flxConstants = flexiciousNmsp.Constants;
    /**
     * A CheckBoxRenderer is a custom item renderer, that defines how to use custom cells with logic that you can control
     * @constructor
     * @namespace flexiciousNmsp
     * @extends UIComponent
     */
    AutoCompleteRenderer=function(){
        //make sure to call constructor
        flexiciousNmsp.UIComponent.apply(this,["div"]);//second parameter is the tag name for the dom element.



        var html='<select class="js-example-basic-single">  <option value="AL">Alabama</option><option value="AL">Alaska</option><option value="CO">Colorado</option></select>';
        this.domElement.innerHTML=html;
        this.select = this.domElement.firstChild;
        var $eventSelect =$(this.select);
        $eventSelect.select2();
        $eventSelect.on("change", this.onChange.bind(this));

        /**
         * This is a getter/setter for the data property. When the cell is created, it belongs to a row
         * The data property points to the item in the grids dataprovider that is being rendered by this cell.
         * @type {*}
         */
        this.data=null;

    };
    flexiciousNmsp.ItemRenderers_AutoCompleteRenderer = AutoCompleteRenderer; //add to name space
    AutoCompleteRenderer.prototype = new flexiciousNmsp.UIComponent(); //setup hierarchy
    AutoCompleteRenderer.prototype.typeName = AutoCompleteRenderer.typeName = 'AutoCompleteRenderer';//for quick inspection
    AutoCompleteRenderer.prototype.getClassNames=function(){
        return ["AutoCompleteRenderer","UIComponent"]; //this is a mechanism to replicate the "is" and "as" keywords of most other OO programming languages
    };

    /**
     * This is important, because the grid looks for a "setData" method on the renderer.
     * In here, we intercept the call to setData, and inject our logic to populate the text input.
     * @param val
     */
    AutoCompleteRenderer.prototype.setData=function(val){
        flexiciousNmsp.UIComponent.prototype.setData.apply(this,[val]);
        var cell = this.parent; //this is an instance of FlexDataGridDataCell (For data rows)
        var column = cell.getColumn();//this is an instance of FlexDataGridColumn.
        if(this.data[column.getDataField()])
            this.select.value=this.data[column.getDataField()];
    };
    /**
     * This event is dispatched when the user clicks on the icon. The event is actually a flexicious event, and has a trigger event
     * property that points back to the original domEvent.
     * @param evt
     */
    AutoCompleteRenderer.prototype.onChange=function(evt){

        //in the renderer, you have the handle to the cell that the renderer belongs to, via the this.parent property that you inherit from flexiciousNmsp.UIComponent.

        var cell = this.parent; //this is an instance of FlexDataGridDataCell (For data rows)
        var column = cell.getColumn();//this is an instance of FlexDataGridColumn.
        console.log('setting value to' + this.select.value)
        this.data[column.getDataField()]=this.select.value;//we use the dom element to wire back the value to the data object.
    };
    //This sets  the inner html, and grid will try to set it. Since we are an input field, IE 8 will complain. So we ignore it since we dont need it anyway.
    AutoCompleteRenderer.prototype.setText=function(val){

    };
}(window));

We are defining an itemRenderer here, that simply wraps a select2 component. In its constructor, we initalize it.

In the set data method, we populate it. And we listen for its change event, where we write the data back to the 

data provider.

Below is the complete running example:

third-party-item-renderer.html (7.22 kb)

And this is what this will look like: