Property Grid

golditz

Hello,

I am not sure if this has been asked already or not, but is there any property grid option in datatable?

Basically I want to display one row data which the columns will be appearing on the left side and the values will be appearing on the right side.

Any ideas how to do it?

allan

I don't quite understand. Don't you just want a table which looks like:

[code]
prop 1 | value 1
prop 2 | value 2
prop 3 | value 3
...
[/code]

In which case, yes - that will work fine.

Allan

golditz

Hi Allan,

That was a really fast response. thank you for that.

I am trying to build this table dynamically using a json object I have.

Could you please advise what is the best way to do so?

When I am creating a datatable I need to define its columns and then its data.

I couldn't find a place where I can set to display the columns vertically...

Thanks in advanced,
Isaac

allan

Make an Ajax call to the server to get the column and data information: http://datatables.net/release-datatables/examples/data_sources/js_array.html (static, but could easily be done with `$.ajax` ).

Allan

golditz

Allan,

I know how to call ajax... that's fine.

I have been doing already many tables using this great library, I just can't get how to make the tables to display the columns in the way you wrote in your example above.
Column1: Value1
Column2: Value2
.
.
.

What am I missing?!

allan

Without a link to a the code you are using I don't know...! See: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read

I'd suggest reading this, to see how to get Ajax working with objects:
http://datatables.net/blog/Extended_data_source_options_with_DataTables

Allan

golditz

Allan,
this is the function I built:

function PropertyGrid ( aParent, options ) {

var grid;
var columns = [];
var data = [];
var ajaxUrl;

var defaultOptions = {
"bAutoWidth": false,
"bPaginate": false,
"bLengthChange": true,
"bDestroy": true,
"bFilter": false,
"aaSorting": [],
"bSort": false,
"bInfo": false,
"iDisplayLength" : -1,
"sScrollY": "100%",
"sScrollX": "100%",
"sDom": 'Rlfrtip'
};

this.options = $.extend({},defaultOptions,options);

//Initializing the local Columns, table width and sort fields.
this.preProcessColumns = function ( columns, sortFields, tableWidth ) {
var me = this;
//Set the columns
me.columns = columns;
me.tableWidth = tableWidth;
//Set the sort columns
me.sortFields = sortFields;
};

//Loading the data.
this.loadData = function ( url ) {
var me = this;

//if url is empty, use the local url as the grid is being reload.
if ( url!==undefined && me.ajaxUrl != url )
me.ajaxUrl = url;
else
url = me.ajaxUrl;

// fetch the data
$.ajax( {
type: "get",
contentType: "application/x-www-form-urlencoded",
url: url,
data: {
alt: 'json',
},
dataType: "json",
success: function( response ) {
me.data = response;
me.createGrid();
},
error: function( xhr, textStatus, errorThrown ) {

}
} );

};

this.createGrid = function ( ) {
var me = this;

var table = $("");
var dataTableParams = this.options;
me.table = table;

jQuery.extend (this.options,{
"aoColumns": me.columns,
"aaData": me.data,

});

var dataTable = $(aParent.parts.body).find("table").dataTable(dataTableParams);

me.grid = dataTable;
};


}

The simple question I have is if there is a way to make the columns (thead) to be vertical and not horizontal?

allan

> The simple question I have is if there is a way to make the columns (thead) to be vertical and not horizontal?

Ah! In which case, no - there is no option for that in DataTables at this time. Sorry.

Allan

golditz

Thanks Allan for your answer.

Well.. I think it would be useful to add it for future...

EasyUI allows you to do that, but I don't like their library and the lack of the documentation ... :-)

Thanks anyway,
Isaac