Grid Header name

[Jack The DreamerMember]

Good day!

Have a grid working which retrieve’s data from mysql database using json
I have a field called subject from my database

subject <– field name and the data are
English
Math
Science…

How can I make the grid header be the name of the subject data and do you have an example?

Thank you very much.

[DimitarParticipant]

Hello Jack The Dreamer,

The forum topic Need to create grid columns dynamically from JSON may be of help to you.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Jack The DreamerMember]

Thanks Dimitar for a quick responce
Check the forum that you gave but I don’t understand it

This is a working code that I have right now

$(document).ready(function () {
// prepare the data
var data = {};
var source =
{
datatype: “json”,
datafields: [
{ name: ‘sched_Id’, type: ‘int’},
{ name: ‘Idno’, type: ‘int’},
{ name: ‘subject’, type: ‘text’},
{ name: ‘first_grading’, type: ‘float’},
{ name: ‘second_grading’, type: ‘float’},
{ name: ‘third_grading’, type: ‘float’},
{ name: ‘fourth_grading’, type: ‘float’},
{ name: ‘average’, type: ‘float’}

],
id: ‘sched_Id’,
url: ‘Student_Grades.php’,

};
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 700,
height: 350,
selectionmode: ‘singlecell’,
source: source,
theme: ‘fresh’,
columns: [
{ datafield: “subject”, text: “subject”, width: 205 },
{ datafield: “first_grading”, text: “1st Grading”, width: 90, cellsformat: ‘F2’, cellsalign: ‘center’ },
{ datafield: “second_grading”, text: “2nd Grading”, width: 90, cellsformat: ‘F2’, cellsalign: ‘center’ },
{ datafield: “third_grading”, text: “3rd Grading”, width: 90, cellsformat: ‘F2’, cellsalign: ‘center’ },
{ datafield: “fourth_grading”, text: “4th Grading”, width: 90, cellsformat: ‘F2’, cellsalign: ‘center’ },
{ datafield: “average”, text: “Average”, width: 90, cellsformat: ‘F2’, cellsalign: ‘center’ }
]
});
});

output:

Subject | 1st Grading | 2nd Grading | 3rd Grading | 4th Grading | Average
English | 80.00 | 85.00 | 80.00 | 90:00 |
Math | 80.00 | 85.00 | 80.00 | 90:00 |
Science | 80.00 | 85.00 | 80.00 | 90:00 |

This is what I want to do, all the data in subjects will be the header name and grades of students in each subject.
How can I do this? Any suggestion?

Name | English | Math | Science
Student A | 80.00 | 85.00 | 80.00
Student B | 80.00 | 85.00 | 80.00
Student C | 80.00 | 85.00 | 80.00

Thanks again!

[Jack The DreamerMember]

Tried to study your code example ‘ Need to create grid columns dynamically from JSON’ can you please explain

var json = ‘[{ “columns”: [{ “text”: “Name”, “datafield”: “name”, “width”: “250” }, { “text”: “Beverage Type”, “datafield”: “type”, “width”: “250” }, { “text”: “Calories”, “datafield”: “calories”, “width”: “180” }, { “text”: “Total Fat”, “datafield”: “totalfat”, “width”: “120” }, { “text”: “Protein”, “datafield”: “protein” }] }, {“rows” : [{“id”: “1”, “name”: “Hot Chocolate”, “type”: “Chocolate Beverage”, “calories”: “370”, “totalfat”: “16g”, “protein”: “14g”}, {“id”: 2, “name”: “Peppermint Hot Chocolate”, “type”: “Chocolate Beverage”, “calories”: “440”, “totalfat”: “16g”, “protein”: “13g”}, {“id”: “3”, “name”: “Salted Caramel Hot Chocolate”, “type”: “Chocolate Beverage”,”calories”: “450”, “totalfat”: “16g”, “protein”: “13g”}]}]’;

How did you retrieve this file before you assigned to –> var json?

Thanks again

[DimitarParticipant]

Hi Jack The Dreamer,

The JSON data may be contained in an external file and not in a variable. To see how to bind a grid to JSON data, please check out the Grid Data Sources documentation entry.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts