Render different control on ext:column

  1. #1

    Render different control on ext:column

    Hi all,

    I have couple question:

    1. how can I render different control on a grid panel column? My scenario is I have a data type property on my data source object, and I want to control the rendering based on data type control, i.e integer will be rendering text box, selection will be rendering combobox, date will be rendering calendar etc.

    From my understanding, it can be done using renderer functionality, but the next question is, renderer return a string value, not the control itself, so how can I achieve such behavior?

    2. When store data source is changed, what event I should catch to re-render the control?

    Here what I've tried so far:
    <ext:Column ID="colData" runat="server" DataIndex="Data" Text="Data RDR">
    <Renderer Fn="specialRender">
    var stringTemplate = new Ext.XTemplate('code to render {name} for string items');
            specialRender = function (value, metadata, record) {
                var data;
                data = Ext.apply({},, record.getAssociatedData());
                if (data.Type == "text") {
                    return stringTemplate.apply(data);;
                } else if (data.Type == "number") {
                    // add a css selector to the td html class attribute we can use it after grid is ready 
                    // to render the slider
                    metadata.tdCls = metadata.tdCls + 'slider-target';
                    return '';
                } else {
                    return ("Unknown data.type");
            Ext.onReady(function () {
                onGridViewReady = function () {
                    var recordIdx,
                    for (recordIdx = 0; recordIdx < ; recordIdx++) {
                        record =;
                        sliderHolder ='.slider-target', grid.view.getNode(recordIdx));
                        if (sliderHolder.length) {
                            colEl = sliderHolder[0];
                            // remove div generated by grid template - alternative is to use a new template in the col
                            colEl.innerHTML = '';
                            // get the value to be used in the slider from the record and column
                            colVal = 5; // record.get('change');
                            // render the slider - pass in the full record in case record data may be needed by change handlers
                            renderNumericFilter(colEl, colVal, record);
                var grid = Ext.getCmp('gridview-1016');
                // when the grids view is ready, render sliders to it
                grid.on('viewready', onGridViewReady, this);
                renderNumericFilter = function (el, val, record) {
                    var filterPanel = Ext.widget('slider', {
                        width: 200,
                        value: val,
                        record: record,
                        minValue: 0,
                        maxValue: 10,
                        renderTo: el
  2. #2
    Hello @paramadharmika!

    I'm pretty sure this subject has already been discussed in several threads in the forums.

    Here are some:
    - Dynamic Editor in GridPanel
    - How to dynamically add either Combobox or DateField to Gridpanel Column Editor from code behind
    - Dynamically change column editor with row editor plugin

    I'm pretty confident one of these threads will lead your way into making the behavior you want work.
    There's also these two examples that might help:
    - TreeGrid with custom editors row-level
    - Component column with multiple editors

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabio,

    Thank you for your explanation, due to tight schedule, I decide to work with my initial solution. Soon when I get the chance I will look at the links you provided, based on quick view it seems very promising.

    Best Regards

Similar Threads

  1. [CLOSED] render dynamic control
    By miltonfoti in forum 3.x Legacy Premium Help
    Replies: 6
    Last Post: Sep 04, 2015, 6:46 PM
  2. Render Dynamic Control in View
    By ehmdb in forum 3.x Help
    Replies: 1
    Last Post: Jun 17, 2015, 2:02 PM
  3. Replies: 0
    Last Post: Aug 23, 2013, 12:16 PM
  4. [CLOSED] Render third party control
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 29, 2011, 7:41 PM
  5. Partially Render a user control in MVC
    By alighaddar in forum 1.x Help
    Replies: 0
    Last Post: Oct 20, 2009, 2:11 PM

Tags for this Thread

Posting Permissions