This is a migrated thread and some comments may be shown as answers.

Dynamic Grid

9 Answers 835 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Vijay
Top achievements
Rank 1
Vijay asked on 14 May 2012, 06:41 PM
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

9 Answers, 1 is accepted

Sort by
0
Steven
Top achievements
Rank 1
answered on 16 May 2012, 11:31 PM
I have the same question.   Were you able to get an answer/find a solution on this?
0
Vijay
Top achievements
Rank 1
answered on 16 May 2012, 11:39 PM
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!
0
Steven
Top achievements
Rank 1
answered on 16 May 2012, 11:49 PM

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.
0
Alexander Valchev
Telerik team
answered on 17 May 2012, 02:49 PM
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.

@Vijay
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.

Greetings,
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!
0
Steven
Top achievements
Rank 1
answered on 17 May 2012, 07:52 PM
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.setOptions(options);
    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 ) {
            this.dataSource.read();
            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!



0
RainerAtSpirit
Top achievements
Rank 1
answered on 18 May 2012, 11:35 AM
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.
http://www.kendoui.com//forums/ui/grid/destroy-recreate-grid-with-different-columns.aspx

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.

Rainer

BTW: Make sure to vote at http://kendo.uservoice.com/forums/127393-kendo-ui-feedback/suggestions/2616963-all-widgets-should-have-a-destroy-method
0
Sarvesh
Top achievements
Rank 1
answered on 15 Oct 2012, 05:53 AM
Hi,

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>' });
                else
                    columnArray.push({ field: parameters[0], title: parameters[1], hidden: true });
            });
            return columnArray;
        }


Hope this helps.

Regards,
Sarvesh
0
Nishant
Top achievements
Rank 1
answered on 10 Dec 2012, 07:53 AM
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".

Thanks,
Nishant
0
Ewoud
Top achievements
Rank 1
answered on 22 Jan 2013, 08:25 AM
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. 

Thanks!!

Regards,

Hans
Tags
Grid
Asked by
Vijay
Top achievements
Rank 1
Answers by
Steven
Top achievements
Rank 1
Vijay
Top achievements
Rank 1
Alexander Valchev
Telerik team
RainerAtSpirit
Top achievements
Rank 1
Sarvesh
Top achievements
Rank 1
Nishant
Top achievements
Rank 1
Ewoud
Top achievements
Rank 1
Share this question
or