Dynamic Grid

10 posts, 0 answers
  1. Vijay
    Vijay avatar
    5 posts
    Member since:
    Apr 2012

    Posted 14 May 2012 Link to this post

    Hello All, 

    we are binding kendo ui grid to JSON data source. At design time we are not sure of column names or number of columns. 

    I would like to inject columns names,title, width and format based on JSON data. 

    it is possible please point me to an example or suggest a way to achieve it. 

    - Also, can we drag columns to increase width as in Excel 
    - Remove rows based on certain values.
    - highlight text in cell based on a threshold.

    I have hard coded the column name and model for test purpose, it did not see to help.

       schema: {
                        data: "d.Data",
                        total: "d.TotalCount",
                        model: { fields:
                                        { A1: { type: "string" },
                                            A2: { type: "string" },
                                            A3: { type: "string" },
                                            A4: { type: "string" },
                                            A5: { type: "string" },
                                            A6: { type: "string" },
                                            A7: { type: "string" }

       Columns: [
                            { field: "A1", title: "S N ", width: 240 },
                            { field: "A2", title: "A1" },
                            { field: "A3", title: "Name" },
                            { field: "A4", title: "A2 Weight" },
                            { field: "A5", title: "A5 Weight" },
                            { field: "A6", title: "A6" },
                            { field: "A7", title: "A7" }

    Column titles are not visible!  i.e extra space

  2. Steven
    Steven avatar
    84 posts
    Member since:
    Oct 2010

    Posted 16 May 2012 Link to this post

    I have the same question.   Were you able to get an answer/find a solution on this?
  3. Vijay
    Vijay avatar
    5 posts
    Member since:
    Apr 2012

    Posted 16 May 2012 Link to this post

    No. actually I have written a simple grid with minimum features! try  datatables.net simple and easy

    hoping someone from Kendo Support team, respond at least with Possible | not possible answer!
  4. Steven
    Steven avatar
    84 posts
    Member since:
    Oct 2010

    Posted 16 May 2012 Link to this post

    I have looked at this before, but unfortunately, I need inline editing, multi-column and row selections, and the ability to template the columns when editing.   All of this is provided by kendoGrid, except the dynamic datasource description (as far as I can tell).  

    I would like to see if someone at Telerik could pop in and tell us otherwise how to do it.
  5. Alexander Valchev
    Alexander Valchev avatar
    2887 posts

    Posted 17 May 2012 Link to this post

    Hello guys,

    The dynamic change of grid columns is not supported. The column reordering and resizing functionality is available only in the last service pack and will not work with previous versions.

    I am not sure what you mean by "Remove rows based on certain values." It is possible to filter the dataSource with not equal to < value >. The text highlighting could be could be done through template expressions.

    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Steven
    Steven avatar
    84 posts
    Member since:
    Oct 2010

    Posted 17 May 2012 Link to this post

    Well, it may not be provided as a native capability, but I did get it to work, and I didn't have to hack any code.   Now, I will say that I have not fully tested this, but so far so good.   Perhaps the Telerik folks can tell me if I am off my rocker or if it is a good solution.

    Here is what I did:

    1) First, create a datasource and set up an event handler on the 'change' event (essentially onDataLoaded).
    2) Next, in the onDataLoaded handler, get the first row of the result set and generate the columns
    3) Create the control, and set the columns property to the generated columns.

    In my particular case, I also let the user specify the columns when creating my control, and if I receive them, then I create the grid immediately and don't do the initial read.   I let the kendoGrid do that.  

    The trick to this is in the onDataLoaded (change) handler, you need to see if the control exists.   If it does, then don't do anything.   If it does not exist, then create the grid.   This way you can create the grid before hand and then this onDataLoaded handler doesn't do anything.   But, if the grid is not yet created, it can do so because you now have the columns available.   

    So far, seems to work pretty well, but certainly there might be some lurking issues with this approach.

    Here are some code samples:

    This is the startup, where I create both controls.
    // Startup of the class
    initialize: function ( element, options ) {
        console.log( 'Initializing dimDropdown ' + element );
        this.parent( element );
        this.dataSource = this._createDataSource();
        this.control = this._createControl();

    Here is how I handle the createControl:
    _createControl: function () {
        // If we already have the control built, then do nothing
        // just return it's instance.
        if( !$('#' + this.element).data("kendoGrid") ) {
            // Now, convert the user specified columns into
            // the grid column format needed for kendo
            var columns = this._createGridColumns();
            // If the user did not specify any columns when
            // instantiating this object, then we need
            // to defer the creation of the grid until
            // some data has been pulled.
            if( !columns || columns.length === 0 ) {
                return null;
            $('#' + this.element).kendoGrid({
                dataSource: this.dataSource,
                height: this.options.height,
                groupable: this.options.groupable,
                scrollable: this.options.scrollable,
                sortable: this.options.sortable,
                navigatable: this.options.navigatable,
                filterable: this.options.filterable,
                editable: this.options.editable,
                resizable: this.options.resizable,
                columns: columns,
        return $('#' + this.element).data("kendoGrid");

    And now, here is how I handle the change (onDataLoaded) event from the datasource:
    _onDataLoaded: function( e ) {
        // If we have a data read event and the control has not been
        // built yet, then it means that we need to dynamically create
        // the columns for the control, and then create the control
        // iteself.
        if( !this.control ) {
            this.options.columns = this._createColumnsFromRow( this.rows[0] );
            this.control = this._createControl();       

    Notice that the _createColumnsFromRow function is the one that inspects the data and creates the appropriate field list.

    The object this.rows  is actually handled in another routine bound to the data property in the schema for getting the appropriate rows back.   I did it this way because sometimes my data comes back blank and it crashes if I don't handle it properly.    Yours might look more like: results.rows (or whatever).

    Hope this helps!

  7. RainerAtSpirit
    RainerAtSpirit avatar
    4 posts
    Member since:
    Jul 2009

    Posted 18 May 2012 Link to this post

    I found a (partial) solution for this by deleting/re-creating the grid. Key is to unbind the CHANGE event.
    There's probably more work required if you use features like filtering, but this should get you started.

    Here's the link to forum post.

    You can take a look at a live example at: http://www.spirit.de/demos/metro

    Use Firebug and check app.js to see details.


    BTW: Make sure to vote at http://kendo.uservoice.com/forums/127393-kendo-ui-feedback/suggestions/2616963-all-widgets-should-have-a-destroy-method
  8. Sarvesh
    Sarvesh avatar
    16 posts
    Member since:
    May 2012

    Posted 15 Oct 2012 Link to this post


    I had to implement something similar. This is how i managed to solve the problem. My json response sends metadata about the columns and i use it while initializing the grid.

    var grid = $("#Grid").kendoGrid({
                            dataSource: {
                                data: eval(actiondata.Data),
                                pageSize: 10,
                                schema: {
                                    total: function (result) {
                                        var totalCount = result.length;
                                        return totalCount;
                            columns: getColumns(eval(actiondata.Columns)),
                            height: "352px"

    the getColumns method uses a list of column metadata thats | seperated to form a array of columns that the grid understands.

    function getColumns(columns) {
                var columnArray = [];

                columnArray.push({ field: "IsSelected", sortable: false, width: "30px", title: "&nbsp;", headerTemplate: '<p align="center"><input id="headerSelect" type="checkbox" /></p>', template: '<p align="center" # if(IsReadOnly === "True") { # title="ColumnTitle" # } # /> <input type="checkbox" id="#=KeyField#" # if(IsReadOnly === "True") { # disabled /> # } else { if(IsSelected === "True") { # checked="checked" /> # } else { # /> # } if(saveItem(KeyField)){} } # </p>' });

                $.each(columns, function (index, value) {
                    var parameters = value.split('|');
                    if (parameters[2] == 'False')
                        columnArray.push({ field: parameters[0], title: parameters[1], template: '<p title=\'#=' + parameters[0] + '#\' # if(IsReadOnly === "True") { # style="color:gray;white-space:nowrap;" # }# style="white-space:nowrap;">#=' + parameters[0] + '#</p>' });
                        columnArray.push({ field: parameters[0], title: parameters[1], hidden: true });
                return columnArray;

    Hope this helps.

  9. Nishant
    Nishant avatar
    2 posts
    Member since:
    Nov 2012

    Posted 10 Dec 2012 Link to this post

    Hi Sarvesh,

    Can you provide full solution for this java-script, view and controller code along with Json data which is coming back to view.
    What is actiondata ? I am getting error "actiondata is not defined".

  10. hansdenbraber
    hansdenbraber avatar
    12 posts
    Member since:
    Apr 2007

    Posted 22 Jan 2013 Link to this post

    Hi Sarvesh,

    I to want to see the full solution. Please can you provide me the java-script, view and controller code along with the JSON data. 



Back to Top