jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Dynamic Population of Datafields and Columns
This topic contains 5 replies, has 4 voices, and was last updated by morgenweck 10 years, 8 months ago.
-
Author
-
Hi
I am able to load my data into the jqxgrid if I hardcode the datafields however, this is not possible if i don’t know how many columns I have to deal. I have gone through your documentation on the jqxgrid and can’t find any code on how to dynamically populate the datafields and the columns
`$(document).ready(function () {
var url = “../sampledata/index-json-fruit-test.php”;var source =
{
datatype: “json”,
//datafields: [],
// Dynamically populate this without hard coding
/*datafields: [
{ name: ‘Categories’, type: ‘string’},
{ name: ‘Apples and Grapes’, type: ‘number’ },
{ name: ‘Pears’, type: ‘number’},
{ name: ‘Oranges’, type: ‘number’},
{ name: ‘Bananas’, type: ‘number’},],*/
id: ‘id’,
url: url,
root: ‘data’
};$(“#jqxgrid”).jqxGrid(
{
width: 1020,
source: dataAdapter,
columnsresize: true,
filterable: true,
showfilterrow: true,
//filtermode: ‘excel’,
// Dynamically populate this without hard coding
//columns: [
// { text: ‘Categories’, dataField: ‘Categories’, width: 100 },
// { text: ‘Applessss’, dataField: ‘Apples and Grapes’, width: 100 },
// { text: ‘Pears’, dataField: ‘Pears’, width: 180 },
// { text: ‘Oranges’, dataField: ‘Oranges’, width: 80, cellsalign: ‘right’ },
// { text: ‘Bananas’, dataField: ‘Bananas’, width: 90, cellsalign: ‘right’, cellsformat: ‘c2’ },
]
});});`
Is there code somewhere? Any help would be appreciated.
Thanks
CheersThis is my JSON data:
[{“Categories”:”John”,”Apples”:”8″,”Pears”:”4″,”Oranges”:”6″,”Bananas”:”5″,”id”:0},{“Categories”:”Jane”,”Apples”:”3″,”Pears”:”4″,”Oranges”:”2″,”Bananas”:”3″,”id”:1},{“Categories”:”Joe”,”Apples”:”86″,”Pears”:”76″,”Oranges”:”79″,”Bananas”:”77″,”id”:2},{“Categories”:”Janet”,”Apples”:”3″,”Pears”:”16″,”Oranges”:”13″,”Bananas”:”15″,”id”:3},{“Categories”:”Will”,”Apples”:”3″,”Pears”:”3″,”Oranges”:”80″,”Bananas”:”100″,”id”:4}]
Hi rc,
When you make your Ajax call to your server, in its “success” callback function you will know how many columns/datafields you need and there you can create the DataAdapter instance from the received data and build data datafields array and after that create the jqxGrid and set its columns.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hi,
I got the basics of your answer but I’m going around in circles on my end. I’m trying to fill three different grids with the following data:
{“site_code”:[{“DISEASE_SITE”:”ANAL”,”DESCRIPTION”:”Anal”,”CASES”:”5″,”BC”:”10 (5)”,”NL”:”15 (4)”,”PL”:”20 (5)”,”TP”:”9 (4)”}],”age_range”:[{“DBID”:”0″,”SITE_CODE”:”ANAL”,”MIN_AGE”:”26″,”MAX_AGE”:”81″}],”ethnicity”:[{“ETHNICTY”:”WHITE”,”DESCRIPTION”:”White (Caucasian)”,”COUNT”:”5″}]}
For the most part I will not know the names of the columns until it comes back in the success callback but parsing that is what causing the trouble.
Thanks for your help.morgenweck,
What i do myself is call my controller via ajax (using mvc):
var datafields = {}; $.ajax({ url: '/Home/GenerateDatafields', async: false, cache: false, type: 'GET', success: function (result) { datafields = result; } });
In the controller i call data from a database:
public JsonResult GenerateDatafields() { var dbResult = db.<sometable>.ToList(); var datafieldsList = new List<DatafieldModel>(); // class i created for datafields foreach (var column in dbResult) { datafieldsList.Add(new DatafieldModel { name = column.ColumnName, type = "string", // this can of course be a different type }); } return Json(datafieldsList, JsonRequestBehavior.AllowGet); }
And in the source i set the datafields:
var source = { datatype: "json", datafields: datafields, etc. };
You can do the same for the grid columns but then you need the values: text, datafield, width and visibility.
Thanks I appreciate your input. For the most part that will work, however I was hoping for an easier built-in solution. I’m trying to convert my code from a competitors grid and theirs does build a grid without column names. Each column is the same width but that’s OK. I’m trying to build an ad hoc report writer tool and the data will be coming from many different sources. I think I need to stay with the other company.
Thanks -
AuthorPosts
You must be logged in to reply to this topic.