Dynamic grid

Is it possible to dynamically assign the columns in a grid from the data source? The application that I am developing uses arbitrary tables and it is not possible to know in advance the number of columns or their names.

Thanks you.

There is not such a ready functionality. However, it is possible. Try the following:

  1. put an empty view in a row/column where you want to load Grid - view with id = “gridRow” in my example:

... { id: "layout1", rows:[ { id: "gridRow", template: "" },... ] } ...
2) generate the json object that that will contain 2 properties:

  • “config” - an object with grid configutation, including grid fields
  • “gridData” - an array of grid rows

{ config:{ view:"grid", fields:[ ... ] }, gridData:[ { "id":"1", "column1":"....", }, ... ] }

  1. use the approach similar to one in the sample dhtmlxTouch_v12_120913/samples/09_template/03_ajax_ui.html to load grid json with its config and data, replace empty view with the grid:

dhx.ajax(url, function(text){ // converts text to an object var res = dhx.DataDriver.json.toObject(text); if(res.config){ //define grid id res.config.id = "mygrid"; //replace an empty view with the grid in layout dhx.ui(res.config, $$('layout1'),"gridRow"); //set grid data if(res.gridData){ $$("mygrid").parse(res.gridData); } } });

Thank you - I’ll give it a go …

That works, thank you, but I’m not sure how to handle the column widths - do you have any idea how I might derive the width value for the field or is there a parameter that can be used to auto size them?


Perhaps I should use DHTMLX Grid in an iframe?

You may send a total width of Grid container to server ($$(“gridRow”).$width). There you can divide this value by the number of column - you’ll get a column width.

dhx.ajax(url+"?totalWidth="+$$("gridRow").$width, function(text){ ... });