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

Dynamic Grid

9 Answers 1069 Views

Grid

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

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

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!

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

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: " ", 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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Dynamic Grid

9 Answers, 1 is accepted